API Reference for ejDataManager
23 Jun 202024 minutes to read
Communicates with data source and returns the desired result based on the Query provided.
Syntax
var dataManager = new ej.DataManager(datasource, query, adaptor)| Name | Type | Description |
|---|---|---|
| datasource | Object | Sets the data source to create the Data Manager. |
| query | ej.Query | Sets the default query for the data source. |
| adaptor | Object | Configures the adaptor based on the data source type of the Data Manager. |
Example
<style>
.table,tr,td{ border:1px solid; padding:3px;}
</style>
<table class="table" style="border-collapse:collapse">
<tbody></tbody>
</table>
<script>
var dataManger = ej.DataManager(window.gridData);
var tableBody = "";
for(var i=0;i<5;i++)
{
row="dataManger.dataSource.json[0];;"
tableBody="" +="String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>"," row.OrderID,="" row.CustomerID,="" row.EmployeeID,="" row.ShipCity,="" row.freight);
$(".table="" tbody").html(tableBody);
}
</script>Callback Functions
beforeSend(request, settings)
Custom headers can be set using pre-request callback beforeSend as follows. The setRequestHeader method can be used to modify the XMLHTTPRequest.
| Name | Type | Description |
|---|---|---|
| request | Object | Sets the default query for the data source. |
| settings | Object | A set of key/value pairs that configure the AJAX request. |
Example
<div class="datatable" style="padding:10px">
<table id="table1" class="table table-striped table-bordered" style="width:700px" >
<thead>
<tr>
<th>Order ID</th>
<th>Customer ID</th>
<th>Employee ID</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var customAdaptor = new ej.UrlAdaptor().extend({
beforeSend: function (request, settings) {
settings.setRequestHeader("myData1", "Syncfusion");
settings.setRequestHeader("myData2", 23243);
}
});
var dataManager1 = ej.DataManager({ url: "TreeViewFeatures.aspx/Data", adaptor: new customAdaptor() });
var query = ej.Query().take(3).skip(2);
var execute = dataManager1.executeQuery(query) // executing query
.done(function (e) {
renderTable(e.result);
});
});
</script>done(args)
A function to be called if the request succeeds.
| Name | Type | Description |
|---|---|---|
| result | Object | Contains filtered results on the data based on query. |
| query | ej.Query | A set of key/value pairs that configure the AJAX request. |
| xhr | Object | XMLHTTPRequest object. |
| actual | Object | Contains all the records as it is from the data source. |
| getKnockoutModel | function | The DataManager contains a default method to subscribe the view model properties as KO observable. This is done at the success of the executeQuery using the getKnockoutModel. You can also provide computed properties to the view model using the getKnockoutModel. |
| getTableModel | function | The DataManager contains a default support to bind a TableModel to the element. You can make the data observable using the getTableModel method. The getTableModel method also accept extra properties or properties with computed value that can be added to the TableModel. In the view, you can create a simple view by using the bindings getTableModel |
| count | number | Contains total count of records when the requiresCount() method is enabled in the ej.Query() |
| request | Object | Contains all the necessary data before posting a request |
| aggregates | Object | Aggregates data such as sum, average , min and max |
| virtualSelectRecords | Object | It will have virtually loaded records, when the lazy loading or virtual scrolling is enabled. |
Example
<div class="datatable">
<table id="table1" class="table table-striped table-bordered" style="width:700px">
<thead>
<tr>
<th>ItemID</th>
<th>ItemName</th>
<th>ItemType</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Foods",
crossDomain: true
});
var query = ej.Query()
.sortBy("ItemID", "descending", false)
.select("ItemID", "ItemName", "ItemType")
var updateData = { ItemID: 14, ItemName: "Grapes Juice", ItemType: "Veg" };
dataManager.update("ItemID", updateData);
// executing query
var dataSource = dataManager.executeQuery(query).done(function (args) {
// Result is successful
renderTable(args.result);
});
});
// This function can be better replaced with any template engine. We used this for simplicity in demo.
function renderTable(data) {
var tableBody = "", row;
for (var i = 0; i < data.length; i++) {
row = data[i];
tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.ItemID, row.ItemName, row.ItemType);
}
$(".table tbody").html(tableBody);
}
</script>fail(args)
A function to be called if the request fails.
| Name | Type | Description |
|---|---|---|
| query | ej.Query | A set of key/value pairs that configure the AJAX request. |
| error | Object | When an HTTP error occurs, error thrown receives error status of HTTP object. |
Example
<div class="datatable">
<table id="table1" class="table table-striped table-bordered" style="width:700px">
<thead>
<tr>
<th>ItemID</th>
<th>ItemName</th>
<th>ItemType</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Foods",
crossDomain: true
});
var query = ej.Query()
.sortBy("ItemID", "descending", false)
.select("ItemID", "ItemName", "ItemType")
var updateData = { ItemID: 14, ItemName: "Grapes Juice", ItemType: "Veg" };
dataManager.update("ItemID", updateData);
// executing query
var dataSource = dataManager.executeQuery(query).done(function (args) {
renderTable(args.result);
}).fail(function (args) {
// handling of error
});
});
// This function can be better replaced with any template engine. We used this for simplicity in demo.
function renderTable(data) {
var tableBody = "", row;
for (var i = 0; i < data.length; i++) {
row = data[i];
tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.ItemID, row.ItemName, row.ItemType);
}
$(".table tbody").html(tableBody);
}
</script>always(args)
A function to be called when the request finishes (after success and error callbacks are executed).
If the request is success, arguments list will be as below.
| Name | Type | Description |
|---|---|---|
| result | Object | Contains filtered results on the data based on query. |
| query | ej.Query | A set of key/value pairs that configure the AJAX request. |
| xhr | Object | XMLHTTPRequest object. |
| actual | Object | Contains all the records as it is from the data source. |
| getKnockoutModel | function | The DataManager contains a default method to subscribe the view model properties as KO observable. This is done at the success of the executeQuery using the getKnockoutModel. You can also provide computed properties to the view model using the getKnockoutModel. |
| getTableModel | function | The DataManager contains a default support to bind a TableModel to the element. You can make the data observable using the getTableModel method. The getTableModel method also accept extra properties or properties with computed value that can be added to the TableModel. In the view, you can create a simple view by using the bindings getTableModel |
| count | number | Contains total count of records when the requiresCount() method is enabled in the ej.Query() |
| request | Object | Contains all the necessary data before posting a request |
| aggregates | Object | Aggregates data such as sum, average , min and max |
| virtualSelectRecords | Object | It will have virtually loaded records, when the lazy loading or virtual scrolling is enabled. |
If the request is fail, the argument list will be as below.
| Name | Type | Description |
|---|---|---|
| query | ej.Query | A set of key/value pairs that configure the AJAX request. |
| error | Object | When an HTTP error occurs, error thrown receives error status of HTTP object. |
Example
<div class="datatable">
<table id="table1" class="table table-striped table-bordered" style="width:700px">
<thead>
<tr>
<th>ItemID</th>
<th>ItemName</th>
<th>ItemType</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Foods",
crossDomain: true
});
var query = ej.Query()
.sortBy("ItemID", "descending", false)
.select("ItemID", "ItemName", "ItemType")
var updateData = { ItemID: 14, ItemName: "Grapes Juice", ItemType: "Veg" };
dataManager.update("ItemID", updateData);
// executing query
var dataSource = dataManager.executeQuery(query).always(function (args) {
// if it is success result can be obtained otherwise it display the error report
renderTable(args.result);
});
});
// This function can be better replaced with any template engine. We used this for simplicity in demo.
function renderTable(data) {
var tableBody = "", row;
for (var i = 0; i < data.length; i++) {
row = data[i];
tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.ItemID, row.ItemName, row.ItemType);
}
$(".table tbody").html(tableBody);
}
</script>Methods
executeLocal(query)
This method does not execute more than one operation at a time; it waits for one operation to complete, and then executes the next operation.
| Name | Type | Description |
|---|---|---|
| query | ej.Query | Sets the default query for the data source. |
Returns:
JQueryPromise
Example
<div class="datatable">
<table id="table1" class="table table-striped table-bordered" style="width:700px">
<thead>
<tr>
<th>Order ID</th>
<th>Customer ID</th>
<th>Employee ID</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
{ OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
{ OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
{ OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
{ OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
var dataManager = ej.DataManager(data);
var query = ej.Query()
.from("Orders")
.sortBy("OrderID", "descending", false)
// executing query
var dataSource = dataManager.executeLocal(query);
renderTable(dataSource);
});
// This function can be better replaced with any template engine. We used this for simplicity in demo.
function renderTable(data) {
var tableBody = "", row;
for (var i = 0; i < data.length; i++) {
row = data[i];
tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
}
$(".table tbody").html(tableBody);
}
</script>executeQuery(query, done, fail, always)
The executeQuery property is used to process the data based on the query on URL Binding.
| Name | Type | Description |
|---|---|---|
| query | ej.Query | Sets the default query for the data source. |
| done | function | A function to be called if the request succeeds. |
| fail | function | A function to be called if the request fails. |
| always | function | A function to be called when the request finishes (after success and error callbacks are executed). |
Returns:
JQueryPromise
Example
<script>
var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/");
var query = ej.Query().select(["OrderID", "CustomerID", "ShipName"]).from("Orders").take(3);
var promise = dataManager.executeQuery(query);
promise.done(function(e){});
promise.fail(function(e){});
</script>insert(data, tableName, query)
Inserts a data item in the data table.
| Name | Type | Description |
|---|---|---|
| data | Object | JSON data or JSON array |
| tableName | string | Name of the table |
| query | ej.Query | Sets the default query for the data source. |
Returns:
Object
Example
<div class="datatable">
<table id="table1" class="table table-striped table-bordered" style="width:700px">
<thead>
<tr>
<th>Order ID</th>
<th>Customer ID</th>
<th>Employee ID</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
{ OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
{ OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
{ OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
{ OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
var dataManager = ej.DataManager(data);
var query = ej.Query()
.from("Orders")
.sortBy("OrderID", "descending", false)
var record = { OrderID: 10253, CustomerID: "STRPQ", EmployeeID: 4 };
dataManager.insert(record);
// executing query
var dataSource = dataManager.executeLocal(query);
renderTable(dataSource);
});
// This function can be better replaced with any template engine. We used this for simplicity in demo.
function renderTable(data) {
var tableBody = "", row;
for (var i = 0; i < data.length; i++) {
row = data[i];
tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
}
$(".table tbody").html(tableBody);
}
</script>remove(keyField, value, tableName, query)
It is used to remove the data from the dataSource.
| Name | Type | Description |
|---|---|---|
| keyField | string | KeyColumn to find the data |
| value | string | Specified value for the keyField |
| tableName | string | Name of the source table |
| query | ej.Query | Sets the default query for the data source. |
Returns:
Object
Example
<div class="datatable">
<table id="table1" class="table table-striped table-bordered" style="width:700px">
<thead>
<tr>
<th>Order ID</th>
<th>Customer ID</th>
<th>Employee ID</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var query = ej.Query().sortByDesc("EmployeeID");
var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
{ OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
{ OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
{ OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
{ OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
var dataManager = ej.DataManager(data);
dataManager.remove("OrderID", 10252, data);
var dataSource = dataManager.executeLocal(query);
renderTable(dataSource);
});
function renderTable(data) {
var tableBody = "", row;
for (var i = 0; i < data.length; i++) {
row = data[i];
tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
}
$(".table tbody").html(tableBody);
}
</script>saveChanges(changes, key, tableName, query)
This method is used to save the changes to the corresponding table. You can add a new record, edit an existing record, or delete a record by using this method.
| Name | Type | Description |
|---|---|---|
| changes | Object | Specified values for the Data Table |
| key | String | KeyColumn to find the data |
| tableName | string | Name of the source table |
| query | ej.Query | Sets the default query for the data source. |
Returns:
Object
Example
<div class="datatable">
<table id="table1" class="table table-striped table-bordered" style="width:700px">
<thead>
<tr>
<th>Order ID</th>
<th>Customer ID</th>
<th>Employee ID</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
{ OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
{ OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
{ OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
{ OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
var newData = { "added": [{ OrderID: 10258, CustomerID: "JOHN", EmployeeID: 25 }], "deleted": {} , "changed":{} };
var dataManager = ej.DataManager(data);
var query = ej.Query()
.from("Orders")
.sortBy("OrderID", "descending", false)
var dataManagerObj = dataManager.saveChanges(newData);
renderTable(data);
});
// This function can be better replaced with any template engine. We used this for simplicity in demo.
function renderTable(data) {
var tableBody = "", row;
for (var i = 0; i < data.length; i++) {
row = data[i];
tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
}
$(".table tbody").html(tableBody);
}
</script>update(keyField, value, tableName, query)
Updates existing record and saves the changes to the table.
| Name | Type | Description |
|---|---|---|
| keyField | String | KeyColumn to find the data |
| value | String | Specified value for the keyField |
| tableName | String | Name of the source table |
| query | ej.Query | Sets the default query for the data source. |
Returns:
Object
Example
<div class="datatable">
<table id="table1" class="table table-striped table-bordered" style="width:700px">
<thead>
<tr>
<th>Order ID</th>
<th>Customer ID</th>
<th>Employee ID</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var query = ej.Query().sortByDesc("EmployeeID");
var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
{ OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
{ OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
{ OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
{ OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
var updateData = { OrderID: 10252, CustomerID: "ZAUDS", EmployeeID: 4 };
var dataManger = ej.DataManager(data);
dataManger.update("OrderID", updateData, data);
var result = dataManger.executeLocal(query);
renderTable(result);
});
function renderTable(data) {
var tableBody = "", row;
for (var i = 0; i < data.length; i++) {
row = data[i];
tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
}
$(".table tbody").html(tableBody);
}
</script>