Data not show in Data Grid using Datatable.

[Xeeshan akram]

Hello, i am new using Syncfusion I have trying for 3 hours of hardwork , i dont understand why data not show on Grid. When i use debug data load in datatable but when i see on view i dont see the values on grid. Can you tell me What is the problem. 

Function 

public ActionResult GroupsL()

        {

            using (objSqlCon = new SqlConnection(conn))

            {

                SqlCommand cmd = new SqlCommand("select Group_Id,Group_Name from Groups", objSqlCon);

                cmd.CommandType = CommandType.Text;

                SqlDataAdapter sd = new SqlDataAdapter(cmd);

                DataTable dt = new DataTable();

                objSqlCon.Open();

                sd.Fill(dt);

                objSqlCon.Close();

                return Json(dt);

            }

        }

View

  <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">

                            <e-data-manager url="/Groups/GroupsL" adaptor="UrlAdaptor" insertUrl="" updateUrl="" removeUrl=""></e-data-manager>

                            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true "></e-grid-editSettings>

                            <e-grid-columns>

                                <e-grid-column field="Group_Id" headerText="Group Id" isPrimaryKey="true" validationRules="@(new { required=true})" width="100"></e-grid-column>

                                <e-grid-column field="Group_Name" headerText="Group Name" width="120"></e-grid-column>

                            </e-grid-columns>

                        </ejs-grid>

            </div>

[Xeeshan akram]

Any expert available kindly tell me where i am wrong.

[Praveenkumar Gajendiran]

Hi Xeeshan, 

Thanks for contacting Syncfusion support.

Based on your query and provided information, we would like to inform you that when using the UrlAdaptor for binding data to the EJ2 Grid, you need to return the data as JSON object with properties - result with dataSource as its value and count with the dataSource total records count as its value(i.e., the data should be returned in the form of result and count to apply the data properly to the grid component).

Also to perform server side Grid actions for DataTable, you need to convert DataTable to IEnumerable using Utils.DataTableToJson method. Thereby in controller action, you need to use DataOperations class for performing grid actions and return result as JSON object with result and count.

Please refer the below code example and document for more information.  

HomeController.cs 

public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 

{ 

    IEnumerable DataSource = Utils.DataTableToJson(dt); //Here dt is the dataTable 

    DataOperations operation = new DataOperations(); 

    if (dm.Search != null && dm.Search.Count > 0) 

    { 

        DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search 

    } 

    if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

    { 

        DataSource = operation.PerformSorting(DataSource, dm.Sorted); 

    } 

    if (dm.Where != null && dm.Where.Count > 0) //Filtering 

    { 

        DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 

    } 

              List<string> str = new List<string>(); 

    if (dm.Aggregates != null) 

    {            

        for (var i = 0; i < dm.Aggregates.Count; i++) 

            str.Add(dm.Aggregates[i].Field); 

    } 

    IEnumerable aggregate = operation.PerformSelect(DataSource, str); 

    int count = DataSource.Cast<object>().Count(); 

    if (dm.Skip != 0) 

    { 

        DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 

    } 

    if (dm.Take != 0) 

    { 

        DataSource = operation.PerformTake(DataSource, dm.Take); 

    } 

    return dm.RequiresCounts ? Json(new { result = DataSource, count = count, aggregate = aggregate }) : Json(DataSource); 

} 

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

    <e-data-manager url="@Url.Action("UrlDataSource", "Home")" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-pagesettings pageCount="5" pageSize="10"></e-grid-pagesettings> 

    <e-grid-columns> 

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

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

        <e-grid-column field="employeeID" headerText="Employee ID" width="150"></e-grid-column> 

        <e-grid-column field="orderDate" headerText=" Order Date" format="yMd" width="130"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#datatable 

We have prepared a sample based on this for your reference,

Sample: https://www.syncfusion.com/downloads/support/forum/162793/ze/DataTable_core-1843841286.zip

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G