EJ2 Treegrid: Spinner never hides with DataManager UrlAdaptor

Hello, 

This is weird in that using a basic tree grid with a remote dataSource, the spinner never hides on data load in our production environment.  Running it on localhost (which is slower) works perfectly.  It seems if the data returns at a certain speed, the call to hide the spinner never happens.  If we use straight JSON for the datasource, then it works fine.  Any thoughts on what we need to do?  The endpoint returns data and it does display correctly in the treegrid, the spinner just stays around.  We have tried the hideSpinner in databound and without as well.


Here is the complete code:

 var dataManager_directorates = new ej.data.DataManager({
            url: '/api/Directorates/list',
            crudUrl: '/api/Directorates/crud',
            adaptor: new ej.data.UrlAdaptor(),
            crossDomain: true,
        });

        grid_directorates = new  ej.treegrid.TreeGrid({
            dataSource: dataManager_directorates,
            idMapping: 'id',
            parentIdMapping: 'directorate_id',
            treeColumnIndex: 1,
            dataBound: function (args){
                this.hideSpinner();
            },
            columns: [
                { field: 'id', headerText: 'ID', isPrimaryKey: true, visible: false, },
                { field: 'name', headerText: 'Directorate',
                    validationRules: { required: true, maxLength: 45 }, },
            ],
        });
        grid_directorates.appendTo('#grid_directorates');

Here is the generated HTML relevant to spinners:

<div id="grid_directorates" class="e-control e-treegrid e-lib e-keyboard" tabindex="0">
    <div class="e-spinner-pane e-spin-hide">
        <div class="e-spinner-inner">
            <svg class="e-spin-material" id="3GlZr" viewBox="0 0 30 30" style="height: 30px; width: 30px; transform-origin: 15px 15px 15px;">
                <path class="e-path-circle" d="M15,1.5A13.5,13.5 0 1 1 1.5,15" stroke-width="3" stroke-dasharray="63.61725123519331" stroke-dashoffset="190.0035236891107">
                </path>
            </svg>
        </div>
    </div>
    <div id="grid_directorates_gridcontrol" class="e-control e-grid e-lib e-responsive e-default e-droppable e-tooltip e-keyboard" role="grid" tabindex="0" style="width: auto;">
        <div class="e-dlg-ref-element"></div>
        <div class="e-dlg-container e-dlg-center-center" style="z-index: 10000006;">
            <div id="grid_directorates_gridcontrolEditAlert" class="e-control e-dialog e-lib e-dlg-modal e-popup e-popup-close" role="dialog" style="z-index: 10000006; width: 320px; left: 0px; top: 0px;" aria-describedby="grid_directorates_gridcontrolEditAlert_dialog-content" aria-modal="true">
                <div class="e-dlg-content" id="grid_directorates_gridcontrolEditAlert_dialog-content"></div>
                <div class="e-footer-content">
                    <button type="button" class="e-control e-btn e-lib e-flat e-primary">OK</button>
                </div>
            </div>
            <div class="e-dlg-overlay" style="z-index: 10000005; display: none;"></div>
        </div>
        <div class="e-dlg-ref-element">
        </div>
        <div class="e-dlg-container e-dlg-center-center" style="z-index: 10000007;">
            <div id="grid_directorates_gridcontrolEditConfirm" class="e-control e-dialog e-lib e-dlg-modal e-popup e-popup-close" role="dialog" style="z-index: 10000007; width: 320px; left: 0px; top: 0px;" aria-describedby="grid_directorates_gridcontrolEditConfirm_dialog-content" aria-modal="true">
                <div class="e-dlg-content" id="grid_directorates_gridcontrolEditConfirm_dialog-content"></div>
                <div class="e-footer-content">
                    <button type="button" class="e-control e-btn e-lib e-primary e-flat">OK</button>
                    <button type="button" class="e-control e-btn e-lib e-flat">Cancel</button>
                </div>
            </div>
            <div class="e-dlg-overlay" style="z-index: 10000006; display: none;"></div>
        </div>
        <div class="e-spinner-pane e-spin-show">
            <div class="e-spinner-inner">
                <svg class="e-spin-material" id="2HMiq" viewBox="0 0 30 30" style="height: 30px; width: 30px; transform-origin: 15px 15px 15px;">
                    <path class="e-path-circle" d="M15,1.5A13.5,13.5 0 1 1 1.5,15" stroke-width="3" stroke-dasharray="63.61725123519331" stroke-dashoffset="77.63506127401328" transform="rotate(0 15 15)"></path>
                </svg>
            </div>
        </div>


1 Reply 1 reply marked as answer

PS Pon Selva Jeganathan Syncfusion Team May 20, 2021 02:49 PM UTC

Hi Mark, 
 
Thanks for using Syncfusion Products.  
 

Query: Spinner never hides with DataManager UrlAdaptor

 

We have checked your problem by preparing the sample with your code snippet, but we are unable to reproduce the problem on our end. Please refer to the below sample

   
 
We suspect that the problem may occur when doesn’t return resultant data in the form of result and count pair. So please ensure this scenario by referring the documentation:- 
     
Please reproduce the issue in the above attached sample or share with us the following details so that we can provide you with the solution as early as possible from our end.  
   
  1. Kindly share the video demo of the issue. 
  2. Confirm whether you are returning the resultant data contained result and count pair?
  3. If possible, share the stackTrace detail using to actionFailure event.
  4. Complete Tree Grid code example. 
  5. If possible, share the issue reproducible sample. 
 
Regards,
Pon selva
 


 


Marked as answer
Loader.
Up arrow icon