| layout | post |
|---|---|
| title | Data-Binding |
| description | data binding |
| platform | js |
| control | DataManager |
| documentation | ug |
| api | /api/js/ejdatamanager |
A data source can be bound to a table through JavaScript. The DataManager supports JSON array binding. It is useful to bind records in client side using JSON data that is very helpful in Single Page Application (SPA) and in feature rich web application. To achieve this, you can refer the following code example.
{% highlight html %}
| Order ID | Customer ID | Employee ID | Freight |
|---|
{% endhighlight %}
The result of the above code example is illustrated as follows.
###OData binding
OData is standardized protocol for creating and consuming data. You can retrieve data from OData service using DataManager. You can refer to the following code example of remote Data binding using OData service.
{% highlight html %}
| Item ID | Item Name | Item Type | Price | Stock |
|---|
// Query creation
var query = ej.Query()
.from("Foods")
.select("ItemID", "ItemName", "ItemType", "Price", "Stock").take(7)
var execute = dataManger.executeQuery(query) // executing query
.done(function (e) {
$("#table1 tbody").html($("#tableTemplate").render(e.result));
});
{% endhighlight %}
The result of the above code example is illustrated as follows.
The OData v4 is an improved version of OData protocols and the DataManager can also retrieve and consume OData v4 services. For more details on OData v4 Services, refer the odata documentation.
You can refer to the following code example for consuming OData v4 services and bind the result to the simple HTML table. In the the following code, crossDomain is enabled to make cross domain request.
{% highlight html %}
| Order ID | Customer ID | Employee ID |
|---|
{% endhighlight %}
The request and response to the service from the DataManager is illustrated as follows.
OData v4 request and response
The result of the above code example is illustrated as follows.
OData v4 binding
The Web API is a programmatic interface to define the request and response messages system that is mostly exposed in JSON or XML. The DataManager contains default adaptor to handle the Web API request and responses. The WebApiAdaptor is discussed briefly in the Adaptor section.
Refer to the following code example for consuming Web API data using ej.DataManager.
{% highlight html %}
| Order ID | Customer ID | Employee ID |
|---|
The request to the Web API and response is illustrated as follows.
Web API adaptor request and response
The result for the above code example is illustrated as follows.
Web API data binding
The ejDataManager can also retrieve data from ASP.Net Web methods and ASP.Net MVC Controller`s action. You can achieve this by using the UrlAdaptor of ej.DataManager. The UrlAdaptor is discussed briefly in the adaptor section. By default, the UrlAdaptor is used when accessing remote data.
Refer to the following code example to know how the DataManager can be used to consume data from the web method.
{% highlight html %}
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
| University Code | Title | Course Fees |
|---|
<asp:Content runat="server" ID="ScriptContent" ContentPlaceHolderID="ScriptContent">
<script type="text/javascript"> $(function () { var dataManager = ej.DataManager({ url: "WebService1.asmx/getData" }); var promise = dataManager.executeQuery(new ej.Query()); promise.done(function (e) { $("#table1 tbody").append($("#tableTemplate").render(e.result)); }); }); </script> <script id="tableTemplate" type="text/x-jsrender"> {{"{{"}}>UniversityCode{{}}}} {{"{{"}}>Title{{}}}} {{"{{"}}>CourseFees{{}}}} </script></asp:Content>
{% endhighlight %}
Consuming data from the MVC controller`s action is as follows. Now the data from the action is handled by the UrlAdaptor.
{% highlight html %}
| Order ID | Customer ID | Employee ID |
|---|
{% endhighlight %}
{% highlight c# %}
public class HomeController : Controller
{
public JsonResult Data(DataManager dataObj)
{
List<Object> data = new List<object>();
for (int i = 1; i <= 10; i++)
{
data.Add(new { OrderID = 10240 + i, CustomerID = “Customer” + i, EmployeeID = i });
}
var records = data.Take(dataObj.Take); // take query of Data Manager
return Json(records, JsonRequestBehavior.AllowGet);
}
}
{% endhighlight %}
The result and the request-response to the controller is illustrated as follows.
