kendo grid is blank when column name is data

Question

My kendo grid datasource contains a field "data", So the grid is displayed is blank. Here is telerik link Can somebody tell me how to fix this? I don't have option to change column name as something else in the project I'm working

 var data = [{data:"test",attribute:"my title"},{data:"test",attribute:"my title"}];

  var grid = $("#grid").kendoGrid({
    dataSource: data,
    columns: [
      {field: 'data', title: 'Data'},
      {field: 'attribute', title: 'Attribute'}
            ]
    }).data("kendoGrid");
});

strange behaviour. One option of course would be not using a "data" property, then it works — BramscoChill, Apr 06 '20 at 09:59
The "data" field is fetched from Rest end point in my actual code, So I can't change it in the front end. Looking for some other option :) — Mounika, Apr 06 '20 at 10:05

score 0 · Accepted Answer · answered Apr 06 '20 at 10:14

Define it in schema model, something like this:

  var data = [{data:"data 1",attribute:"my title"},{data:"data 2",attribute:"my title"}];

  var grid = $("#grid").kendoGrid({
    dataSource: {
        data: data,
        schema: {
            model: {
              fields: {
                foo: { from: "data" }
              }
            }
        },
    },
    columns: [
      {field: 'foo', title: 'Data'},
      {field: 'attribute', title: 'Attribute'}
    ]
  }).data("kendoGrid");

Working example: Schema model

kendo grid is blank when column name is data

1 Answers1