Can Kendo Grid always be in edit mode?

Question

Does anyone know if a kendo grid can always be edited?

We do not want the user to click on a cell or button to activate edit mode. We want widgets to be displayed and accessible at any time.

Is it possible at all?

Answer 1

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

Example

To enable it, set { batch: true } in the table data source. Otherwise, you can move on to deeper scripting. Checked and just called editRow for all lines. The default behavior is to disable editing on the line when a new one is put into edit mode.

So, a quick look says that batch mode will not display editors all the time, but it works out of the box.

Answer 2

In addition to using batch editing, you can try to set the template for each column and bind input elements to data elements 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 3

I found the answer above to be excellent. One problem is that Kendo does not clear the bindings when it refreshes the grid (for example, when sorting or filtering or when refresh () is called) and removes the DOM elements of the grid. The result will be that in the dataItems the number of “shift” events in the queue will increase - a bit of memory leak. This can be avoided by detaching the dataBinding event, as shown below:

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