ej-grid in .net core auto generate after ajax call

[Mike Luken]

I am trying to use an ej-grid to auto generate a grid using data retrieved from an ajax call. In doing so, I am running into a problem.

I am getting an error message when the page first renders saying "DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid". While I understand this, I am struggling because I don't know anything about the datasource until after the ajax call is returned.

This is a .NET CORE 5 razor page....

My razor page:

(note: 'data' below is a json serialized System.Data.DataTable).

<ej-grid id="gridResults" allowPaging="true"></ej-grid>

<script type="text/javascript>

   function ajaxResponse(data) {

      $('#gridResults').ejGrid({

         datasource: data

      });

   }

</script>

So my questions are two-fold:

First, is there a way to bypass the initial error I am getting about the datasource not being set (since I don't have a datasource yet)...

Second, Will my approach of providing a serialized DataTable work, or do I need to do something different to pass the data via Javascript like this?

Right now when I return from the ajax call, I don't get any errors, but nothing happens...

Thanks in advance!

[Padmavathy Kamalanathan]

Hi Mike, 

 

Thanks for contacting Syncfusion Forums. 

 

Query 1: I am getting an error message when the page first renders saying "DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid". 

 

This issue will occur when we do not bind dataSource and define columns to the Grid. For rendering Grid, we should either define columns or bind data source at the initial rendering. 

 

Since you are not binding data in initial rendering, we suggest you to define columns so that Grid will be rendered without any errors. 

 

Query 2: Will my approach of providing a serialized DataTable work, or do I need to do something different to pass the data via Javascript like this? 

 

For binding data table to Grid after serializing it, we should call the dataSource method of grid and pass the data as parameter to it as shown in below code, 

  

  

<ej-button id="repeatButton" text="click" size="Medium" show-rounded-corner="true" click="btnClick" /> 

  

<ej-grid id="FlatGrid" allow-paging="true"> 

  

    <e-columns> 

        <e-column field="No" header-text="Order ID" is-primary-key="true"></e-column> 

        <e-column field="Name" header-text="Employee ID"></e-column> 

    </e-columns> 

</ej-grid> 

<script> 

    function btnClick(args) { 

        $.ajax({ 

  

            url: '/Grid/DataSource', 

  

            dataType: "json", 

  

            type: 'POST', 

  

  

            success: function (data) { 

  

                var grid = $('.e-grid').data("ejGrid"); // grid instance 

  

                grid.dataSource(data); 

                // update grid data source by calling dataSource method and passing data 

            } 

  

        }) 

    } 

</script> 

  

       [HttpPost] 

        public ActionResult DataSource() 

  

        { 

            System.Data.DataTable dt = new DataTable("Table1"); 

            DataColumn cl = new DataColumn("No"); 

            dt.Columns.Add(cl); 

            cl = new DataColumn("Name"); 

            dt.Columns.Add(cl); 

  

            DataRow dataRow = dt.NewRow(); 

            dataRow[0] = 1; 

            dataRow[1] = "John"; 

            dt.Rows.Add(dataRow); 

            ------------ 

  

            var data1 = Utils.DataTableToJson(dt); // method to serialize data table 

            return Json(data1); // fetching and returning boolean column  

  

             

        } 

 

  

In the above code example, we have fetched data using ajax call in button click and bind it to grid using dataSource method. 

 

Please check the below API help documentation, 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource  

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan 

[Mike Luken]

Thanks so much. I was able to get this figured out and everything is working the way I want now.  Thanks!

[Padmavathy Kamalanathan]

Hi Mike, 

 

We are glad to hear that your issue has been resolved. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan