We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Binding with Ajax

Binding with Ajax

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

7 Replies
PS Pavithra Subramaniyam Syncfusion Team January 7, 2019 10:31 PM

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> 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S.  


JT Juraj Tomana January 8, 2019 02:59 AM

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

Regards,
Juraj

TS Thavasianand Sankaranarayanan Syncfusion Team January 8, 2019 05:29 AM

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. 



Regards, 
Thavasianand S. 


JT Juraj Tomana January 8, 2019 02:55 PM

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

TS Thavasianand Sankaranarayanan Syncfusion Team January 9, 2019 02:02 AM

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> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


JT Juraj Tomana January 9, 2019 07:19 AM

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

TS Thavasianand Sankaranarayanan Syncfusion Team January 10, 2019 06:19 AM

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> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon