dataSource kendo.data.DataSource

The data source of the widget. Configured via the dataSource option.

Changes to the data source will be reflected in the widget.

Assigning a new data source would have no effect. Use the setDataSource method instead.

Example - add a data item to the data source

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30}
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add({ name: "John Doe", age: 33 });
</script>

Example - update a data item in the data source

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 }
  ]
});
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.at(0);
data.set("name", "John Doe");
</script>

Example - remove a data item from the data source

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30},
    { name: "John Doe", age: 33},
  ]
});
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.at(1);
grid.dataSource.remove(data);
</script>