Data Binding in Grid Control

21 Dec 20225 minutes to read

The Grid uses DataManager, which supports both RESTful JSON data services binding and local JavaScript object array binding. The dataSource property can be assigned either with the instance of DataManager or JavaScript object array collection.

It supports the following kinds of data binding method:

  • List binding
  • DataTable binding
  • Remote data

Sending additional parameters to the server

To add a custom parameter to the data request, use the addParams method of Query class. Assign the Query object with additional parameters to the grid query property.

<ejs-grid id="Grid"  query="new ej.data.Query().addParams('ej2grid', 'true')" >
    <e-data-manager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders" adaptor="ODataV4Adaptor" crossdomain="true"></e-data-manager>
    <e-grid-pagesettings pageSize="7"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
 </ejs-grid>
public IActionResult Index()
{
    
    return View();
}

NOTE

The parameters added using the Query property will be sent along with the data request for every grid action.

Handling HTTP error

During server interaction from the grid, some server-side exceptions may occur, and you can acquire those error messages or exception details in client-side using the actionFailure event.

The argument passed to the actionFailure event contains the error details returned from the server.

<ejs-grid id="Grid"  actionFailure="actionFailure" >
    <e-data-manager url="http://some.com/invalidUrl"></e-data-manager>
    <e-grid-pagesettings pageSize="7"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    function actionFailure(args) {
        var span = document.createElement('span');
        this.element.parentNode.insertBefore(span, this.element);
        span.style.color = '#FF0000'
        span.innerHTML = 'Server exception: 404 Not found';
    }
</script>
public IActionResult Index()
 { 
    return View();
 }

NOTE

The actionFailure event will be triggered not only for the server errors, but also when there is an exception while processing the grid actions.

Binding with ajax

You can use Grid dataSource property to bind the datasource to Grid from external ajax request. In the below code we have fetched the datasource from the server with the help of ajax request and provided that to dataSource property by using onSuccess event of the ajax.

<script type="text/javascript">
    var grid = document.getElementById('Grid').ej2_instances[0]; // Grid instance
    var ajax = new ej.base.Ajax('/Home/UrlDatasource', 'GET');
    ajax.send();
    ajax.onSuccess = function (data) {
        grid.dataSource = ej.data.DataUtil.parse.parseJson(data).result;
    };
</script>

NOTE

If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server side crud actions.

Troubleshoot: Grid render rows without data

In ASP.NET Core, by default the JSON results are returned in camelCase format. So grid field names are also changed in camelCase.

To avoid this problem, you need to add DefaultContractResolver in Startup.cs file.

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().AddJsonOptions(options =>
    {
        options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver();
    });
}

Note: For ASP.NET Core 3.0 or above, use the below code

For this we need to install Microsoft.AspNetCore.Mvc.NewtonsoftJson package.

  public void ConfigureServices(IServiceCollection services)
          {
            services.AddMvc().AddNewtonsoftJson(options =>
            {
                options.SerializerSettings.ContractResolver = new DefaultContractResolver();
            });
           }