Kendo Sortable Breaks Inline Editing Functionality

7 posts, 2 answers
  1. Ken
    Ken avatar
    6 posts
    Member since:
    Aug 2015

    Posted 27 Dec 2016 Link to this post

    I'm trying to make a kendo grid using sortable and inline editing. I found whenever you make the grid sortable there are some issues that happen with inline editing. Whenever you click on the edit button, you can't click into the input fields to edit. The only way you can edit those fields is if you tab over to them. Also, whenever you change certain inputs they won't save. 

     

    I've created a dojo to show my issues: http://dojo.telerik.com/uYidA

     

    Just click edit on any row and see that you can't click into the inputs. Also, click edit and try to change one of the inputs and see that it doesn't save correctly.

     

    Thanks in advance!

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    635 posts

    Posted 28 Dec 2016 Link to this post

    Hello Ken,

    The described undesired behavior is caused by the fact that the Sortable functionality necessitates the corresponding events for enabling reordering of the rows to come after the ones, required for the proper editing functionality.

    There most straight-forward approach is to modify the Sortable filter to exclude rows in editing mode:

    ...
    filter: ">tbody >tr:not('.k-grid-edit-row')"
    ...

    http://dojo.telerik.com/uYidA/2

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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. Ken
    Ken avatar
    6 posts
    Member since:
    Aug 2015

    Posted 03 Jan in reply to Dimiter Topalov Link to this post

    Hello Dimiter,

    Thanks for the response, it looks like it's working correctly now.

    I found another issue though, now whenever you sort the table and then try to edit a row, the destroy function also gets called on the row that you moved to sort. I've seen this issue before, and I believe the fix before was to return something back from your ajax calls but this seems to not work for this issue.

    Let me know what you think

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    635 posts

    Posted 05 Jan Link to this post

    Hi Ken,

    I could not reproduce the described issue in the provided example. When a row is reordered, and the Delete button is pressed for either the row we have been dragging, or for the one that was previously in the new position of the dragged row, only the item, corresponding to the row, in which the Delete button was pressed is removed.

    Can you please describe in further details the steps that need to be performed in order to observe the undesired behavior?

    Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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. Ken
    Ken avatar
    6 posts
    Member since:
    Aug 2015

    Posted 05 Jan Link to this post

    Hello Dimiter,

    Yes, it looks like that it will work if you sort and then hit the delete button, but if you try to sort and then update/edit a row you can see whenever you hit update in the network tab that the destroy function is called. And if you reload the page you will see that the rows that you sorted before updating another row are now deleted.

    So to test this: sort anything, then click edit on one row and change the name or something, then click update (if you have the network tab open you can see that the destroy method is called), then reload the page and see that the row/rows that you sorted are now deleted.

    Let me know if that makes sense

  6. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    635 posts

    Posted 06 Jan Link to this post

    Hi Ken,

    Thank you for explaining the issue. I was able to reproduce it. It is caused by the fact that for the purpose of the reordering, the dragged item has to be destroyed, recreated, and inserted in the new place.

    However, in the discussed example, the dataSource.remove() method is used. If we use pushDestroy() instead, the scenario seems to be working as expected:

    http://dojo.telerik.com/uYidA/4

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  7. Ken
    Ken avatar
    6 posts
    Member since:
    Aug 2015

    Posted 06 Jan Link to this post

    Looks like that works. Thanks so much!
Back to Top