Can Kendo Grid be always in edit mode?

Question

Does anyone know if the kendo grid could be always set to edit mode at all times?

We don't want the user to click on a cell or a button to activate the edit mode. We want it the widgets to be displayed and available at all times.

Is it possible at all?

Answer 1

Apart from using batch editing mode you can try setting the template of every column and binding the input elements to the data items using MVVM.

$("#grid").kendoGrid({
  dataSource: {
    schema: {
      model: {
        id: "id",
        fields: {
          id: { editable: false }
        }
      }
    }
    data: [
      { id:1, age: 30, name: "John Doe" }
    ]
  },
  columns: [
    { field: "id", width: 50 },
    { field: "age", template: "<input data-bind='value: age' data-role='numerictextbox'>" },
    { field: "name", template:"<input data-bind='value: name' >" }
  ],
  dataBound: function() {
    var rows = this.tbody.children();
    var dataItems = this.dataSource.view();
    for (var i = 0; i < dataItems.length; i++)  {
      kendo.bind(rows[i], dataItems[i]);
    }
  }
});

Here is a live demo: http://jsbin.com/ApoFobA/2/edit

Answer 2

Out of the box, not exactly. You can enable Batch editing which displays everything normally, but clicking a cell will switch it to an editor automatically.

Example

To enable it, set { batch: true } on the table's datasource. Otherwise you're off to some deeper scripting. Checked and simply calling editRow on all rows doesn't do it. Default behavior is to disable editing on a row when a new one is taken into edit mode.

So, quick look says Batch mode - won't display editors all the time, but works and out of the box.

Answer 3

I found the above answer to be excellent. One issue though, is that Kendo doesn't clean up bindings when it refreshes the grid (such as when sorting or filtering or when refresh() is called) and deletes the grid's DOM elements. The result is the dataItems will have an increasing number of "change" events queued up -- a bit of a memory leak. This can be avoided by unbinding in the dataBinding event, as below:

dataBinding: function() {
  var rows = this.tbody.children();
  for (var i = 0; i < rows.length; i++)  {
    kendo.unbind(rows[i]);
  }
}