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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding with Ajax

Thread ID:

Created:

Updated:

Platform:

Replies:

141788 Jan 4,2019 07:16 AM UTC Jan 10,2019 11:19 AM UTC ASP.NET Core - EJ 2 7
loading
Tags: DataGrid
Juraj Tomana
Asked On January 4, 2019 07:16 AM UTC

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 [Syncfusion]
Replied On January 8, 2019 03:31 AM UTC

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.  


Juraj Tomana
Replied On January 8, 2019 07:59 AM UTC

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

Regards,
Juraj

Thavasianand Sankaranarayanan [Syncfusion]
Replied On January 8, 2019 10:29 AM UTC

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. 


Juraj Tomana
Replied On January 8, 2019 07:55 PM UTC

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 [Syncfusion]
Replied On January 9, 2019 07:02 AM UTC

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. 


Juraj Tomana
Replied On January 9, 2019 12:19 PM UTC

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 [Syncfusion]
Replied On January 10, 2019 11:19 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon