Bind JSON to DevExtreme datagrid

Question

У меня проблема с загрузкой данных в DevExtreme datagrid. Если я пытаюсь пример, в этом примере кода:

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

Это работает, так что проблема с выполнения devextreme DataGrid я не проблема. Но когда я хочу установить datasource для своих данных, это не сработает. У меня есть приложение ASP.NET mvc. Одно действие GetData возвращает данные в формате JSON. И если я изменить URL на:

url:"/Home/GetData" или url:"localhost:port/Home/GetData/ оных: type:"GET" и изменить имена столбцов назвать мои столбцы в ответ JSON. Не работает. Но действие GetData возвращает данные в формате JSON. Я новичок в этих технологиях. Что-то я сделал неправильно? Я нигде не нашел в ссылке API, как связать данные JSON с действием MVC, возможно, я ошибся в поиске.

Answer 1

Убедитесь, что следующие поля присутствуют в вашем JSON:

• "ORDERNUMBER"
• "OrderDate"
• "StoreCity"
• "StoreState"
• "Сотрудник"
• "SaleAmount"

Answer 2

Вот мое действие JSON Result Action и да, имена столбцов в коде такие же, как в 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"}] 

Answer 3

Вы должны установить столбцы (в вашем JSON: "Имя", "Фамилия", "Отдел", "Адрес") в 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"); 

Также вы можете создать сетку с минимальным настройки:

var grid = $("#gridContainer").dxDataGrid({ 
    dataSource: { 
     store: orders 
    } 
}).dxDataGrid("instance");