EJ2 Treegrid: Spinner never hides with DataManager UrlAdaptor

[Mark]

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>

[Pon Selva Jeganathan]

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

   

Sample: https://www.syncfusion.com/downloads/support/forum/165593/ze/coresample494066256-1950000624 

 

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:- 

https://ej2.syncfusion.com/documentation/data/adaptors/#url-adaptor 

     

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