Inline Edit mode via JavaScript

4 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.
  3. Georgi
    Admin
    Georgi avatar
    558 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.
  5. 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?

     

  7. Georgi
    Admin
    Georgi avatar
    558 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.
Back to Top