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

Answer 1

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