Binding with Ajax

[Juraj Tomana]

Hi.

I'm trying to achieve following behavior: after page with grid is loaded, I start to load data from my controller with Ajax (loading spinner is animating) and on success grid's datasource is fillled. If there was an error during computing in controller, there will be somewhere an error-message. 

I was trying to use documentation (https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#binding-with-ajax), but without any success.

Thanks.

Regards,

Juraj

[Pavithra Subramaniyam]

Hi Juraj, 

 

Query: I'm trying to achieve following behavior: after page with grid is loaded, I start to load data from my controller with Ajax (loading spinner is animating) and on success grid's datasource is fillled. If there was an error during computing in controller, there will be somewhere an error-message. I was trying to use documentation (https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#binding-with-ajax), but without any success. 

 

Based on your requirement, we have created the sample. Here, we have load data from controller with ajax function using button click. Please find the below code example and sample for your reference. 

 

[code example] 

@{ 

    ViewData["Title"] = "Grid"; 

} 

 

<ejs-button id="normalbtn" content="Render"></ejs-button> 

 

<div> 

    <ejs-grid id="Grid" allowPaging="true"> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" editType="numericedit" width="120"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    document.getElementById("normalbtn").addEventListener("click", function () { 

       var grid = document.getElementById('Grid').ej2_instances[0]; // Grid instance 

        var ajax = new ej.base.Ajax('/Home/DataSource', 'GET'); 

        ajax.send(); 

        ajax.onSuccess = function (data) { 

           grid.dataSource = JSON.parse(data); 

        }; 

    }) 

</script> 

 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSampleCoreAjax-87041572  

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.  

[Juraj Tomana]

Thanks. One more problem - loading spinner is not spinning while data is loading.

Regards,

Juraj

[Thavasianand Sankaranarayanan]

Hi Juraj, 

Thanks for your update. 

As per your given detail we suspect that you want to show a spinner while binding data to Grid. We can achieve your requirement using showSpinner and hideSpinner method of Grid. 

Refer the below code example. 

<ejs-button id="normalbtn" content="Render"></ejs-button> 

 

<div> 

    <ejs-grid id="Grid" allowPaging="true"> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" editType="numericedit" width="120"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    document.getElementById("normalbtn").addEventListener("click", function () { 

        var grid = document.getElementById('Grid').ej2_instances[0]; // Grid instance 

        grid.showSpinner(); 

        var ajax = new ej.base.Ajax('/Home/DataSource', 'GET'); 

        ajax.send(); 

        ajax.onSuccess = function (data) { 

            grid.dataSource = JSON.parse(data); 

            grid.showSpinner(); 

        }; 

    }) 

</script> 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/documentation/api/grid/#showspinner 

Link: https://ej2.syncfusion.com/documentation/api/grid/#hidespinner 

Regards, 

Thavasianand S. 

[Juraj Tomana]

Hi.

Thanks, but even if I use 'showSpinner()' method, spinner is not shown. 

.. and one more problem - I have first column of type DateTime, and I wan't to use format 'd.M.yyyy'. 

My code:

...

 document.addEventListener('DOMContentLoaded',

          function() {

            var gridObj = document.getElementById("Grid").ej2_instances[0];

            gridObj.showSpinner(); 

            $.ajax({

              url: "@Url.Action("ConnStopRetDS")",

              type: 'POST',

              data: {

                dateFromString: "@Model.DateRange[0].ToString("dd.MM.yyyy")",

                dateToString: "@Model.DateRange[1].ToString("dd.MM.yyyy")",

                objectKey: @Model.ObjectKey

              },

              dataType: "json",

              success: function(data) {

                

                gridObj.dataSource = data.result;

                gridObj.columns[0].format = { type: 'date', format: 'd.M.yyyy' }              

                gridObj.showSpinner();

              },

              error: function(error) {

                console.log(error);

                alert(error);

              }

            });

....

...when I add highlighted row, following actionFailure is thrown:

"TypeError: e.getDate is not a function

at https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:390133 at e.toView (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:4953576) at e.format (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:5037388) at e.refreshCell (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:5038665) at e.render (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:5038111) at p (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:5002308) at e.refreshRow (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:5003169) at e.render (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:5000925) at e.refreshContentRows (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:5019483) at e.dataManagerSuccess (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:5061085)"

Thanks.

Regards,

Juraj

[Thavasianand Sankaranarayanan]

Hi Juraj, 

 

Query: Thanks, but even if I use 'showSpinner()' method, spinner is not shown.  

 

Based on your requirement, we have created and checked the reported problem. But, it works fine and the spinner is shown before binding data to grid. Please find the sample for your reference. 

 

Query: and one more problem - I have first column of type DateTime, and I wan't to use format 'd.M.yyyy'.  

 

We have validated your query and the type of the date column is string which is the cause of the issue. To resolve this problem, you need to set date column type as date. Please find the below code example and sample for your reference. 

 

[code example] 

... 

 

<ejs-button id="normalbtn" content="Render"></ejs-button> 

 

<div> 

    <ejs-grid id="Grid" allowPaging="true"> 

        <e-grid-columns> 

            ... 

           <e-grid-column field="OrderDate" headerText="Order Date" type="date" textAlign="Right" width="140"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

 

    document.getElementById("normalbtn").addEventListener("click", function () { 

        var grid = document.getElementById('Grid').ej2_instances[0]; // Grid instance 

        grid.showSpinner(); 

        var ajax = new ej.base.Ajax('/Home/DataSource', 'GET'); 

        ajax.send(); 

        ajax.onSuccess = function (data) { 

            grid.dataSource = JSON.parse(data); 

            grid.columns[3].format = { type: 'date', format: 'd.M.yyyy' }  

            grid.hideSpinner(); 

        }; 

    }); 

     

</script> 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSampleCoreAjaxdateFormat-1771229627  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Juraj Tomana]

Hi.

Query 2 (date): thanks, it works.

Query 1 - not working spinner

I have modified your sample:

HomeController

...

        public IActionResult DataSource()

        {

            var order = OrdersDetails.GetAllRecords();

            //to simulate long loading process

            System.Threading.Thread.Sleep(5000);

            return Json(order);

        }

...

Index.cshtml

...

<script>

//to start on document loaded (not on button click)

  document.addEventListener('DOMContentLoaded', function () {

...

See attached video... there is no spinner..

Thanks.

Regards,

Juraj

Attachment: nospinner_71f4874b.zip

[Thavasianand Sankaranarayanan]

Hi Juraj, 

 

Query: Not working spinner. to start on document loaded (not on button click) 

 

Based on your requirement, we have prepared a sample. Here, we have shown the spinner before render grid data when initial loading of the document and hide the spinner after data is loaded in grid. Please find the below code example for your reference. 

 

[code example] 

... 

 

<div id="container"> 

    <ejs-grid id="Grid" allowPaging="true" dataBound="dataBound"> 

        ... 

   </ejs-grid> 

</div> 

 

<script> 

    var isSpinnerShown = false; 

    document.addEventListener("DOMContentLoaded", function () { 

 

        var grid = document.getElementById('Grid').ej2_instances[0]; // Grid instance 

        grid.hideSpinner = () => true; 

        var ajax = new ej.base.Ajax('/Home/DataSource', 'GET'); 

        ajax.send(); 

        ajax.onSuccess = function (data) { 

            grid.dataSource = JSON.parse(data); 

            grid.columns[3].format = { type: 'date', format: 'd.M.yyyy' }; 

            isSpinnerShown = true; 

        }; 

    }); 

 

    function dataBound() { 

        if (isSpinnerShown) { 

            var spnElem = this.element.querySelector('.e-spinner-pane'); 

            if (spnElem.classList.contains('e-spin-show')) { 

 

                spnElem.classList.remove('e-spin-show'); 

                spnElem.classList.add('e-spin-hide'); 

                isSpinnerShown = false; 

            } 

        } 

 

    } 

     

</script> 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSampleSpinner-388540336  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S.