Bind JSON to DevExtreme datagrid

Question

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.

Could you provide your JSON response? – Sergey Aug 30 '16 at 07:12 — Sergey, Aug 30 '16 at 07:12

score 2 · Answer 1 · answered Sep 04 '16 at 11:25

2

Make sure that the following fields are present in your JSON:

"OrderNumber"
"OrderDate"
"StoreCity"
"StoreState"
"Employee"
"SaleAmount"

answered Sep 04 '16 at 11:25

Ricky Ponting

21
5

score 1 · Answer 2 · answered Sep 04 '16 at 13:20

1

Here is my JSON Result Action and yes, the column names in code are same like in JSON Result Action.

[{"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"}]

answered Sep 04 '16 at 13:20

tomas

153
2
13

It would be helpful if you pasted this response to your question and not as an answer. I would suggesting moving it to your question. Then deleting this answer. – Elim Garak Sep 29 '16 at 13:36

score 0 · Answer 3 · answered Sep 05 '16 at 13:48

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");

Bind JSON to DevExtreme datagrid

3 Answers3