Open Closed

Show Spinner on specific HTML element. #9637


0
shridhar.mole created

Product version : 8.9 Product type : Angular Framework : .net core

I want to show spinner only on to the specific div which takes some time to load data in it. I have one simple div and I set [busyIf] directive to it. I get the spinner on my whole page which I don't want(spinner which we show using "this.spinnerService.show()"). Please help.


7 Answer(s)
  • 0
    smry created

    [busyIf] works exactly how you are describing it, add it to a div and add a state bool to trigger on/off/finished-loading-data

    In the ASPNETZero source code I believe all the tables and dashboard widgets have code you can try to replicate

    I would recommend trying to put a very clearly defined div inside of a div container and checking your process again to see if it triggers the whole page again - or trying to copy the code from a widget and seeing if that helps identify the issue

  • 0
    shridhar.mole created

    So I have below div on my html page

    <div [busyIf]="loading">
                            <div class="row align-items-center" *ngIf="excelData">
                                <dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
                                    itemsExpr="Children" dataStructure="tree" [showRowLines]="true" [showBorders]="true"
                                    [allowColumnResizing]="true" [columnMinWidth]="100" [columnAutoWidth]="true"
                                    (onRowPrepared)="onRowUpdated($event)" (onCellPrepared)="onCellPrepared($event)"
                                    (onRowExpanding)="onRowExpanding($event)" (onRowCollapsing)="onRowCollapsing($event)"
                                    [customizeColumns]="customizeColumns">
                                    <dxo-sorting mode="none">
                                    </dxo-sorting>
                                    <dxi-column dataField="Name" caption="reportName" [width]="400">
                                    </dxi-column>
                                    <dxi-column dataField="GLCode" caption="GLCode">
                                    </dxi-column>
                                </dx-tree-list>
                            </div>
    </div>
    

    and here is my code

    loading: boolean = false;
      ngOnInit(): void {
        // this.spinnerService.show();
        this.loading = true;
        this.service.GetFinancialsIncomeStatementData(this.timePeriod).subscribe((data) => {      
          this.apiResult = data;
          this.excelData = JSON.parse(this.apiResult.result);
          this.reportName = this.excelData.Name;
          this.loading = false;
          // this.spinnerService.hide();
        });
        this.customizeColumns = this.customizeColumns.bind(this);
      }
    

    this will show spinner on my entire page, I want to show spinner only on the above div

  • 0
    smry created

    Can you try to reverse that order?

    Like this:

    <div class="row align-items-center" *ngIf="excelData">    
            <div [busyIf]="loading">
                                <dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
                                ...
    

    Also, I think the busy-if.directive.ts takes care of the spinnerService show/hide, I didnt need to add it to any of my custom components to get the loading spinner - I only used [busyIf]

  • 0
    shridhar.mole created

    I tried by doing reverse order as you said above but didn't work. Can you please check at your end and send me sample code. Because in my application there is lot of primeng-table where they used this [busyIf] but there also the spinner is showing on whole screen.

  • 0
    smry created

    Here is the code but I'm not sure how helpful it will be, its generally the same concept you have

    html:

    <div [busyIf]="!ContentLoaded">
        <span>
           <app-mycomponent></app-mycomponent>
        </span>
    </div>
    
    

    ts:

      ContentLoaded = false;
    
    
        constructor(
            injector: Injector,
        ) {
            super(injector);
        }
    
        ngOnInit(): void {
        }
    
        myLoadingMethod($event) {
            this.ContentLoaded = $event;
        }
    }
    

    that component was a visual div in tab on a modal

    <tab heading="{{'Content' | localize}}">
              <div class="tab-class" *ngIf="active">
              <content-loaded-area></content-loaded-area>
            </div>
        </tab>
    

    The code you have should spin the div. From what you are describing its treating the whole area as the div. I would try cutting the entire area in 4 and add loading to just 1 to see how it reacts and maybe it will show you why its not reacting correctly Maybe even try adding a solid border around your div and seeing if its going past the area you expect it to be in


    <div [busyIf]="loading">
                            <div class="row align-items-center" *ngIf="excelData">
                                <dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
                                    itemsExpr="Children" dataStructure="tree" [showRowLines]="true" [showBorders]="true"
                                    [allowColumnResizing]="true" [columnMinWidth]="100" [columnAutoWidth]="true"
                                    (onRowPrepared)="onRowUpdated($event)" (onCellPrepared)="onCellPrepared($event)"
                                    (onRowExpanding)="onRowExpanding($event)" (onRowCollapsing)="onRowCollapsing($event)"
                                    [customizeColumns]="customizeColumns">
                                    <dxo-sorting mode="none">
                                    </dxo-sorting>
                                    <dxi-column dataField="Name" caption="reportName" [width]="400">
                                    </dxi-column>
                                    <dxi-column dataField="GLCode" caption="GLCode">
                                    </dxi-column>
                                </dx-tree-list>
                            </div>
    </div>
    <div class="div-green">box 2</div>
    <div class="div-red">box 3</div>
    <div class="div-blue">box 4</div>
    
    
    ........
    div-green {
      background-color: lightgrey;
      width: 300px;
      border: 15px solid green;
      padding: 50px;
      margin: 20px;
    }
    div-red {
      background-color: lightgrey;
      width: 300px;
      border: 15px solid red;
      padding: 50px;
      margin: 20px;
    }
    div-blue {
      background-color: lightgrey;
      width: 300px;
      border: 15px solid blue;
      padding: 50px;
      margin: 20px;
    }
    
  • 0
    shridhar.mole created

    Below is my whole HTML page :

    <div [@routerTransition]>
        <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
    
            <div class="kt-subheader kt-grid__item">
                <div [class]="containerClass">
                    <div class="kt-subheader__main">
                        <h3 class="kt-subheader__title">
                            <span>{{"FinancialStatements" | localize}}</span>
                        </h3>
                        <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                        <span class="kt-subheader__desc">
                            {{"FinancialStatementsHeaderInfo" | localize}}
                        </span>
                    </div>
                </div>
            </div>
    
            <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
                <div class="kt-portlet">
                    <div class="kt-portlet__body" [busyIf]="loading">
                        <div class="kt-form">
                            <form>
                                <div class="form-body">
    
                                    <div class="row mb-4">
                                        <div class="col-xl-4" style="display: flex;align-self: center;">
                                            <label for="StatementTypeDropdown"
                                                style="align-self: center;font-weight: 600;">{{'FinancialStatements' | localize}}</label>
                                            <select id="StatementType" name="StatementType"
                                                style="display: flex;width: inherit;margin-left: 9.25px;width: 200px;"
                                                class="form-control">
                                                <option value="">{{"IncomeStatement" | localize}}</option>
                                                <option value="false">{{"P&LStatement" | localize}}</option>
                                                <option value="true">{{"BudgetStatement" | localize}}</option>
                                            </select>
                                        </div>
                                        <!-- <div class="col-xl-2" style="align-self: center;">
                                            <label class="kt-checkbox">
                                                <input class="form-control" type="checkbox" name="showStatistics"
                                                    value="true" />{{"ShowStatistics" | localize}}
                                                <span></span>
                                            </label>
                                        </div> -->
                                        <div class="col-xl-4" style="display: flex;align-self: center;">
                                            <label for="TimePeriodDropdown"
                                                style="align-self: center;">{{'TimePeriod' | localize}}</label>
                                            <select id="TimePeriod" name="TimePeriod" (change)='onTimePeriodChange($event)'
                                                style="display: flex;width: inherit;margin-left: 9.25px;width: 150px;"
                                                class="form-control">
                                                <option value="Yearly">{{"Annual" | localize}}</option>
                                                <option value="Quarterly">{{"Quarterly" | localize}}</option>
                                                <option value="Monthly">{{"Monthly" | localize}}</option>
                                            </select>
                                            <button type="button" class="btn btn-brand1 btn-icon btn-filter"
                                                (click)="openChangeSettingsModal()" style="margin-left: 30px;"><i
                                                    class="fa fa-cog" style="color: black;width: 3rem"></i></button>
                                        </div>
                                        <div class="col-xl-4" style="text-align: right;">
                                            <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
                                                    class="flaticon-refresh" (click)="refresh()"
                                                    style="color: black;"></i></button>
                                            <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
                                                    class="fa fa-print" style="color: black;"></i></button>
                                            <!-- <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
                                                    class="fa fa-cog" style="color: black;"></i></button> -->
                                            <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
                                                    class="flaticon-download" style="color: black;"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- <div class="row align-items-center">
                            <dx-tree-list id="testDatas" [dataSource]="testDatas" itemsExpr="items" dataStructure="tree"
                                [showRowLines]="true" [showBorders]="true" [columnAutoWidth]="true"
                                (onRowPrepared)="onRowUpdated($event)" (onRowExpanding)="onRowExpanding1($event)"
                                (onRowCollapsing)="onRowCollapsing1($event)">
                                <dxi-column dataField="Full_Name" caption="Category" cellTemplate="testTemplate">
                                </dxi-column>
                                <dxi-column dataField="Amount" caption="Jan 2020"></dxi-column>
                                <div *dxTemplate="let options of 'testTemplate'">
                                    <span *ngIf="options.data.visible"
                                        style="color: blue;">{{options.data.Full_Name}}</span>
                                    <span *ngIf="!options.data.visible">{{options.data.Full_Name}}</span>
                                </div>
                            </dx-tree-list>
                        </div> -->
    
                        <div class="row align-items-center" *ngIf="excelData">
                            <dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
                                itemsExpr="Children" dataStructure="tree" [showRowLines]="true" [showBorders]="true"
                                [allowColumnResizing]="true" [columnMinWidth]="100" [columnAutoWidth]="true"
                                (onRowPrepared)="onRowUpdated($event)" (onCellPrepared)="onCellPrepared($event)"
                                (onRowExpanding)="onRowExpanding($event)" (onRowCollapsing)="onRowCollapsing($event)"
                                [customizeColumns]="customizeColumns">
                                <dxo-sorting mode="none">
                                </dxo-sorting>
                                <dxi-column dataField="Name" caption="reportName" [width]="400">
                                </dxi-column>
                                <dxi-column dataField="GLCode" caption="GLCode">
                                </dxi-column>
                            </dx-tree-list>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <reportSettingsModal #reportSettingsModal></reportSettingsModal>
    

    help me now to show the spinner on this Div which has class=kt-portlet__body, above code shows spinner but it covers the whole page like sidemenu bar,header etc

  • 0
    ismcagdas created
    Support Team

    Hi @shridhar.mole

    Could you rename the boolen field from loading to something else and try again ? If you can't solve the problem, can you send your project to info@aspnetzero.com ?

    Thanks,