Inline Edit mode via JavaScript

[Gilbert van Veen]

Hi,

Is it possible to activate the InlineEdit mode when the user clicks on a row? In other words "open" all cells on a row for editing when the users clicks on the row.

It should work the same as when the user presses the update button to call the InlineEdit mode.

When a user presses enter the row should be saved and the next row (if there is any) should be selected and "opened".

I want to simulate (a little) the behavior of a normal winform/silverlight grid.

Is such a scenario possible?

Thanks in advance.

[Georgi]

Hello Gilbert,

This functionality is not available out of the box. However it is possible to call the editRow method when a row is clicked and move to the next row  and call saveRow method when enter key is pressed.

I have assembled a small sample (edit-navigation.zip) which illustrates how to achieve this behaviour with the aforementioned approach.

Regards,
Georgi
Progress Telerik

[Gilbert van Veen]

Hi Georgi,

Many thanks this looks promising but I have one remark.

When you click on a row, all the cells are in edit mode. But (when in edit mode) you click on another cell in the same row, the first column/cell gets selectd. The user can only move to other cells with the tab key.

Is it possible to set the grid row in edit mode and select the cell which was clicked?

 

[Georgi]

Hi Gilbert,

You can select the clicked cell by storing the name of the input, and when edit event is fired, select the clicked cell;

I have assembled a small sample (edit-navigation.zip) which illustrates how to achieve this behaviour with the aforementioned approach.

Regards,
Georgi
Progress Telerik

[David]

Hello,

I realize this is a really old post, but I am trying to implement this functionality in Kendo MVC 2020.1.219. The row does go into edit mode as expected, but the clicked on column does not receive focus. That is because of it uses the following line to determine on which cell was clicked

                localStorage.columnName = $(e.target.closest('td')).attr('name');

but none of the TD in the grid have a name attribute.

How can I assign a name to each cell so that this code will work?

Thanks,

Dave Shine

[Nikolay]

Hello David,

I would suggest another approach. Get the column index and target the column name by it.

        function attachRowEvent() {
            var grid = $("#grid").data("kendoGrid");
            $(grid.tbody).on('click', "td", function (e) {
                var row = $(this).closest("tr");
                var colIdx = $("td", row).index(this);

                localStorage.currentRowId = $(e.target.closest('tr')).attr('data-uid');
                localStorage.columnName = grid.columns[colIdx].field;
                grid.editRow(e.target.closest('tr'));

            })
        }

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[David]

Thank you Nikolay. That worked great.

 

Dave Shine