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();
});
}