Inline Edit mode via JavaScript

7 posts, 0 answers
  1. Gilbert van Veen
    Gilbert van Veen avatar
    74 posts
    Member since:
    Oct 2009

    Posted 20 Jun 2017 Link to this post

    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.

  2. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 21 Jun 2017 Link to this post

    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.
  3. Gilbert van Veen
    Gilbert van Veen avatar
    74 posts
    Member since:
    Oct 2009

    Posted 21 Jun 2017 in reply to Georgi Link to this post

    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?

     

  4. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 22 Jun 2017 Link to this post

    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.
  5. David
    David avatar
    4 posts
    Member since:
    Feb 2018

    Posted 05 Jun 2020 Link to this post

    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

  6. Nikolay
    Admin
    Nikolay  avatar
    323 posts

    Posted 09 Jun 2020 Link to this post

    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.
  7. David
    David avatar
    4 posts
    Member since:
    Feb 2018

    Posted 09 Jun 2020 in reply to Nikolay Link to this post

    Thank you Nikolay. That worked great.

     

    Dave Shine

Back to Top