Bind JSON to DevExtreme datagrid
I have problem with loading data to DevExtreme datagrid. If i trying example, with this example code:
var orders = new DevExpress.data.CustomStore({
load: function (loadOptions) {
var deferred = $.Deferred(),
args = {};
if (loadOptions.sort) {
args.orderby = loadOptions.sort[0].selector;
if (loadOptions.sort[0].desc)
args.orderby += " desc";
}
args.skip = loadOptions.skip || 0;
args.take = loadOptions.take || 12;
$.ajax({
url: "http://js.devexpress.com/Demos/WidgetsGallery/data/orderItems",
data: args,
success: function(result) {
deferred.resolve(result.items, { totalCount: result.totalCount });
},
error: function() {
deferred.reject("Data Loading Error");
},
timeout: 5000
});
return deferred.promise();
}
});
var grid = $("#gridContainer").dxDataGrid({
dataSource: {
store: orders
},
paging: {
pageSize: 12
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [8, 12, 20]
},
columns: [
"OrderNumber", "OrderDate", "StoreCity", "StoreState", "Employee", {
dataField: "SaleAmount",
format: "currency"
}
]
}).dxDataGrid("instance");
It works, so problem with execute devextreme datagrid i have not problem. But when i want to set datasource to my data, it doesn't work. I have ASP.NET mvc application. One action GetData return data in JSON format. And if i change url to:
url:"/Home/GetData" , or url:"localhost:port/Home/GetData/ add: type:"GET" and change names of columns to name my columns in JSON response. It doesn't work. But action GetData returns data in JSON format. I'm new in this technologies. Is something what i did wrong? I nowhere found in API reference, how to bind JSON data from MVC action, maybe i was wrong searched.
Make sure that the following fields are present in your JSON:
这是我的JSON结果操作，是的，代码中的列名与JSON结果操作中的列名相同。
[{"Name":"Jan","Surname":"Novak","Department":"IT","Address":"Address 1"},{"Name":"Jan ","Surname":"Datel","Department":"HR","Address":"Address 2"},{"Name":"Josef","Surname":"Novotny","Department":"IT","Address":"Address 2"}]
You should set your columns (in your json: "Name", "Surname", "Department", "Address") in dxDataGrid:
var grid = $("#gridContainer").dxDataGrid({
dataSource: {
store: orders
},
paging: {
pageSize: 12
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [8, 12, 20]
},
columns: [
"Name", "Surname", "Department", "Address"
]
}).dxDataGrid("instance");
Also you can create grid with minimum settings:
var grid = $("#gridContainer").dxDataGrid({
dataSource: {
store: orders
}
}).dxDataGrid("instance");