Lier JSON à la base de données DevExtreme

Question

J'ai un problème avec le chargement des données dans DevExtreme DataGrid. Si je exemple essayer, avec ce code exemple:

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

Il fonctionne, donc un problème d'exécuter devextreme DataGrid je n'ai pas problème. Mais quand je veux placer la source de données à mes données, cela ne fonctionne pas. J'ai l'application de mvc d'ASP.NET. Une action GetData renvoie des données au format JSON. Et si je change URL pour:

url:"/Home/GetData" ou url:"localhost:port/Home/GetData/ ajouter: type:"GET" et changer les noms de colonnes pour nommer mes colonnes en réponse JSON. Cela ne fonctionne pas. Mais l'action GetData renvoie les données au format JSON. Je suis nouveau dans cette technologie. Est-ce que quelque chose que j'ai mal fait? Je ne trouve nulle part dans la référence de l'API, comment lier les données JSON de l'action MVC, peut-être que j'avais tort cherché.

Answer 1

Assurez-vous que les champs suivants sont présents dans votre JSON:

• "OrderNumber"
• "OrderDate"
• "StoreCity"
• "StoreState"
• "employé"
• "SaleAmount"

Answer 2

Voici mon action de résultat JSON et oui, les noms de colonnes dans le code sont identiques à ceux de l'action Résultat 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"}] 

Answer 3

Vous devez définir vos colonnes (dans votre JSON: "Nom", "Nom", "Département", "Adresse") dans 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"); 

vous pouvez également créer la grille avec un minimum paramètres:

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