This is a migrated thread and some comments may be shown as answers.
Inline Edit mode via JavaScript
6 Answers 50 Views
This is a migrated thread and some comments may be shown as answers.
Gilbert van Veen
Top achievements
Rank 1
Gilbert van Veen asked on 20 Jun 2017, 01:23 PM

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.

6 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 21 Jun 2017, 12:59 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Gilbert van Veen
Top achievements
Rank 1
answered on 21 Jun 2017, 01:36 PM

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?

 

0
Georgi
Telerik team
answered on 22 Jun 2017, 12:55 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
David
Top achievements
Rank 1
answered on 05 Jun 2020, 06:18 PM

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

0
Nikolay
Telerik team
answered on 09 Jun 2020, 02:15 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
David
Top achievements
Rank 1
answered on 09 Jun 2020, 04:55 PM

Thank you Nikolay. That worked great.

 

Dave Shine

Tags
Grid
Asked by
Gilbert van Veen
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Gilbert van Veen
Top achievements
Rank 1
David
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or