Question

I working on a kendo ui grid. The grid is not-editable as default.
In the toolbar is a 'edit' button. When the user clicks on it, the grid should be editable in batch mode like this.

The only solution to get this work is remove and recreate the grid/datasource with new properties (editable:true etc).

This works as expected. Now I want to set the focus on the first row/cell, so that the user can see that the grid is editable now (in the example below the row becomes an input field).

Any suggestions for this?

Here is a fiddle for this.

 $('.k-grid-edit').on('click', function (e) {
     e.preventDefault();

     // remove old grid
     $('#grid').html('');

     // recreate grid with edit: true and new datasource
     $('#grid').kendoGrid({
         dataSource: dataSourceInEdit,
         editable: true,
         columns: [{
             field: 'TableId',
             title: 'Id',
             width: 50
         }, {
             field: 'Area',
             title: 'Area'
         }, {
             field: 'Table',
             title: 'Table',
             width: 60
         }, {
             command: 'destroy',
             title: ' ',
             width: 100
         }]
    }).data("kendoGrid");

}); // end edit
Was it helpful?

Solution

Okay, I got it:
These 2 lines make it happen:

var grid = $("#rt_tableGrid").data("kendoGrid");
grid.editRow($("#rt_tableGrid tr:eq(1)"));

Certainly only on my local script, in the Fiddle I cant´t get it to work.

Although in the Docu is written: Requires "inline" or "popup"
Documentation here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top