layout	post
title	DataBinding with Grid widget for Syncfusion Essential Angular-2
description	How to bind in-memory JSON and remote web services in Grid
platform	Angular
control	Grid
documentation	ug
api	/api/Angular/grid

Data binding

The Grid control uses ej.DataManager which supports both RESTful JSON data services binding and local JSON array binding. The dataSource property can be assigned either with the instance of ej.DataManger or JSON data array collection. It supports different kinds of data binding methods such as

Local data
Remote data

N> DateTime values, retrieved from server-end or database, will be converted based on the local time zone. To avoid the local time zone conversion, refer this knowledge base link.

Local Data

To bind local data to the Grid, you can assign a JSON array to the dataSource property.

The following code example describes the above behavior.

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
 @Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
 })
 export class AppComponent {
    public gridData;
    constructor()
    {
       //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
       this.gridData = window.gridData;
	}
 }

{% endhighlight %}

The following output is displayed as a result of the above code example.

N> 1. There is no in-built support to bind the XML data to the grid. But you can achieve this requirement with the help of [custom adaptor]concept. N> 2. Refer this Knowledge Base link for bounding XML data to grid using custom adaptor.

Remote Data

To bind remote data to Grid Control, you can assign a service data as an instance of ej.DataManager to the dataSource property.

OData

OData is a standardized protocol for creating and consuming data. You can provide the OData service URL directly to the ej.DataManager class and then you can assign it to Grid dataSource.

The following code example describes the above behavior.

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
import {NorthwindService} from './services/northwind.service';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
  providers:[NorthwindService]
})
export class AppComponent {
    public gridData;
    public dataManager;
	constructor()
    {
         this.dataManager = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/", 
                crossDomain:true
            });
         this.gridData = this.dataManager;
     }
}

{% endhighlight %}

The following output is displayed as a result of the above code example.

N> By default, if no adaptor is specified for ej.DataManager and only the url link is mentioned it will consider as ODataService.

OData Version 4

For OData Version 4 support, ej.ODataV4Adaptor should be used. By using url property of ej.DataManager you can bind OData Version 4 Service link and specify adaptor as ej.ODataV4Adaptor.

I> You can provide adaptor value either as string value ("ODataAdaptor") or by creating a new instance (new ej.ODataV4Adaptor).

The following code example describes the above behavior.

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
import {NorthwindService} from './services/northwind.service';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
  providers:[NorthwindService]
})
export class AppComponent {
    public gridData;
    public dataManager;
	constructor()
    {
         this.dataManager = ej.DataManager({
               url:["http://services.odata.org/V4/Northwind/Northwind.svc/Regions/"](http://services.odata.org/V4/Northwind/Northwind.svc/Regions/#),
		       adaptor: new ej.ODataV4Adaptor()
            });
         this.gridData = this.dataManager;
     }
}

{% endhighlight %}

{% seealso %}For further details about OData service please refer to this link. {% endseealso %}

WebAPI

Using ej.WebApiAdaptor, you can bind WebApi service data to Grid. The data from WebApi service must be returned as object that has property Items with its value as datasource and another property Count with its value as dataSource's total records count.

The following code example describes the above behavior.

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
import {NorthwindService} from './services/northwind.service';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
  providers:[NorthwindService]
})
export class AppComponent {
    public gridData;
    public dataManager;
	constructor()
    {
         this.dataManager = ej.DataManager({
               url:"/api/Orders",
		       adaptor: new ej.WebApiAdaptor()
          });
         this.gridData = this.dataManager;
     }
}

{% endhighlight %}

{% highlight cs %} using EJGrid.Models; using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; using System.Net; using System.Net.Http; using System.Web; using System.Web.Http;

namespace EJGrid.Controllers {

public class OrdersController: ApiController
{

	// GET: api/Orders
	NORTHWNDEntities db = new NORTHWNDEntities();

	public object Get()
	{
		var queryString = HttpContext.Current.Request.QueryString;
		int skip = Convert.ToInt32(queryString["$skip"]);
		int take = Convert.ToInt32(queryString["$top"]);
		var data = db.Orders.Skip(skip).Take(take).ToList();
		return new {
			Items = data.Skip(skip).Take(take), Count = data.Count()
		};
	}
}

} {% endhighlight %}

The following output is displayed as a result of the above code example.

Load At Once

On remote data binding, by default all the Grid actions will be processed on server-side such as paging, sorting, editing, grouping and filtering etc. To avoid post back to server on every action, you can set the grid to load all the data on initialization time and make the actions client-side. To enable this, you can use offline property of the ej.DataManager.

The following code example describes the above behavior.

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
import {NorthwindService} from './services/northwind.service';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
  providers:[NorthwindService]
})
export class AppComponent {
    public gridData;
    public dataManager;
	constructor()
     {
         this.dataManager = ej.DataManager({
              url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/",
	          adaptor: new ej.ODataAdaptor(),
	          offline: true
      });
         this.gridData = this.dataManager;
     }
}

{% endhighlight %}

Please refer to this for further reference on offline property

The following output is displayed as a result of the above code example.

Data Caching

Date caching will help you prevent the request to server for already visited pages in Grid using the enableCaching property of ej.DataManager. Also using cachingPageSize and timeTillExpiration properties of ej.DataManager, you can control the number of pages to be cached and duration it should be cached respectively.

N> The cached data will be stored in browser's HTML5 localStorage.

The following code example describes the above behavior.

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
import {NorthwindService} from './services/northwind.service';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
  providers:[NorthwindService]
})
export class AppComponent {
    public gridData;
    public dataManager;
	constructor()
     {
         this.dataManager = ej.DataManager({
             url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/",
	         enableCaching: true,
	         cachingPageSize: 10,
	         timeTillExpiration: 120000
      });
         this.gridData = this.dataManager;
     }
}

{% endhighlight %}

The following output is displayed as a result of the above code example.

Custom request parameters and HTTP Header

Adding request parameters

You can use the addParams method of ej.Query class, to add custom parameter to the data request. The Grid has query property, which accepts instance of ej.Query.

The following code example describes the above behavior.

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [query]="queryOrder">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
import {NorthwindService} from './services/northwind.service';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
  providers:[NorthwindService]
})
export class AppComponent {
    public gridData;
    public dataManager;
    public queryOrder;
	constructor()
     {
         this.dataManager = ej.DataManager({
             url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/",
	         enableCaching: true,
	         cachingPageSize: 10,
	         timeTillExpiration: 120000
      });
         this.gridData = this.dataManager;
         this.queryOrder = new ej.Query().addParams("Syncfusion", true),
     }
}

{% endhighlight %}

The custom parameter will be passed along with the data request of the grid as follows.

Handling HTTP Errors

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

The argument passed to the actionFailure Grid event contains the Error details returned from server. Please refer to the following table for some error details that would be acquired in client-side event arguments.

Parameter	Description
argument.error.status	It returns the response error code.
argument.error.statusText	It returns the error message.

The following code example describes the above behavior.

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" (actionFailure)="actionFailure($event)">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
import {NorthwindService} from './services/northwind.service';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
  providers:[NorthwindService]
})
export class AppComponent {
    public gridData;
    public dataManager;
     public actionFailure(e){ 
        alert(e.error.status + " : " + e.error.statusText);
     }
	constructor()
     {
         this.dataManager = ej.DataManager({
	           url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/",
	           adaptor: "ODataAdaptor"
          });
         this.gridData = this.dataManager;
     }
}

{% endhighlight %}

The following output is displayed as a result of the above code example.

HTML Table

A HTML Table element can also be used as the datasource of Grid. To use HTML Table as datasource, the table element should be passed to dataSource property of Grid as an instance of the ej.DataManager.

The following code example describes the above behavior.

{% highlight html %}

Laptop	Model	Price	OS	RAM	ScreenSize
Dell Vostro	2520	39990	Windows 8	4GB	15.6
HP Pavilion Sleekbook	14-B104AU	22800	Windows 8	2GB	14
Sony Vaio	E14A15	42500	Windows 7 Home Premium	4GB DDR3 RAM	14
Lenovo	Yoga 13	57000	Windows 8 RT	2GB DDR3 RAM	11.6
Toshiba	L850-Y3110	57700	Windows 8 SL	8GB DDR3 RAM	15.6

{% endhighlight %}

{% highlight html %}

<ej-grid id="Grid" [dataSource]="gridData"> <e-column field="Laptop" headerText="Laptop"">

{% endhighlight %}

{% highlight javascript %}

import {Component, ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
  providers:[NorthwindService]
})
export class AppComponent {
    public gridData;
    public dataManager;
    constructor()
     {
         this.dataManager = ej.DataManager({$("#Table1")});
         this.gridData = this.dataManager;
     }
}

{% endhighlight %}

The following output is displayed as a result of the above code example.

I> The HTML Table element is the only valid element when using HTML Table binding. Using other elements will throws an exception.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Data binding

Local Data

Remote Data

OData

OData Version 4

WebAPI

Load At Once

Data Caching

Custom request parameters and HTTP Header

Adding request parameters

Handling HTTP Errors

HTML Table

FilesExpand file tree

Data-Binding.md

Latest commit

History

Data-Binding.md

File metadata and controls

Data binding

Local Data

Remote Data

OData

OData Version 4

WebAPI

Load At Once

Data Caching

Custom request parameters and HTTP Header

Adding request parameters

Handling HTTP Errors

HTML Table