drag and drop / reordering

21 posts, 0 answers
  1. PPCnSEO
    PPCnSEO avatar
    16 posts
    Member since:
    Nov 2011

    Posted 18 Jan 2012 Link to this post

    I need a way of changing the order of rows in a grid and updating the datasource accordingly.

    I could do this by placing up/down arrows in a column but a drag/drop reordering would be much more user friendly.

    Is there a way to do this or will it be coming later?

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    1866 posts
    Member since:
    Sep 2012

    Posted 20 Jan 2012 Link to this post

    Hello Mark,

    You can easily implement this behavior by using the drag and drop api. One way to handle such behavior is illustrated on the following jsFiddle.
    http://jsfiddle.net/rusev/nmB69/

    Greetings,
    Nikolay Rusev
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. Leo
    Leo avatar
    8 posts
    Member since:
    May 2012

    Posted 16 Jul 2012 Link to this post

    I implemented the code from the jsFiddle successfully but it seems in the latest release of Kendo that this behaviour is now broken. Is there an updated jsfiddle or did row reordering get added into the latest release?

  4. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    1866 posts
    Member since:
    Sep 2012

    Posted 17 Jul 2012 Link to this post

    Hello Leo,

    Here is how updated version should look like: http://jsfiddle.net/JBeQn/

    Other possible solution could be to create DropTarget for every grid row then in the context of drop event this.element will be the analogue for destination.

    Regards,
    Nikolay Rusev
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  5. Leo
    Leo avatar
    8 posts
    Member since:
    May 2012

    Posted 17 Jul 2012 Link to this post

    Thanks a lot for the update Nikolay.

    I've found one issue with your example whereby if you try to drag and drop a row by dragging within approximately the first half of the first cell it doesn't work. I've also found this happens in the grids in my own application.

    Is there some form of offset in play here?

    Also, is this feature going to be scheduled in at some point down the road?

  6. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    1866 posts
    Member since:
    Sep 2012

    Posted 20 Jul 2012 Link to this post

    Hello Leo,

    "I've found one issue with your example whereby if you try to drag and drop a row by dragging within approximately the first half of the first cell it doesn't work. I've also found this happens in the grids in my own application."

    Unfortunately we weren't able to replicate this behavior.

    "Is there some form of offset in play here?"
    You can check the configuration settings for Kendo Draggable. cursorOffset may be what you are looking for.

    "Also, is this feature going to be scheduled in at some point down the road?"
    So far we haven't planned the development of such feature.

    All the best,
    Nikolay Rusev
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  7. James Crosswell
    James Crosswell avatar
    11 posts
    Member since:
    Jul 2009

    Posted 21 Jul 2012 Link to this post

    I've got this working from the jsfiddle example, however I have batch editing enabled on the grid in question (which is hooked up to a remote data source). When I try to save the changes after having reordered various records, nothing is posted back to the remote service (confirmed by fiddler).

    I also notice that the records that have been modified don't look like they've been edited (i.e. they don't have the k-dirty class applied to them)... 

    How can I let the grid know that records are dirty after I modify them in client side code (to make sure these records get saved when saving the next "batch")?

    TIA.

    Cheers,
    Jimmy

  8. James Crosswell
    James Crosswell avatar
    11 posts
    Member since:
    Jul 2009

    Posted 22 Jul 2012 Link to this post

    OK so I kind of got this working:

    var targetUid = $(e.draggable.currentTarget).data("uid"),
          target = ds.getByUid(targetUid);
    target.set("dirty",true);
    grid.tbody.find("tr[data-uid='" + targetUid + "']").find("td:eq(1)").addClass("k-dirty-cell");
    grid.tbody.find("tr[data-uid='" + targetUid + "']").find("td:eq(1)").html('<span class="k-dirty"></span>' + destPosition);

    It doesn't work perfectly... if I drag one item (changing it's order) it "looks" dirty as expected. If I then drag a second item, the second item looks dirty but the first item loses it's dirty look.

    For the time being, that's kind of a minor issue though. What's more surprising is that I found out why the Update wasn't being posted back to the remove url. I had originally copied/adapated the code below from one of the sample projects and created a corresponding Update action method on the server (ASP.NET MVC 3) that expected an IEnumerable<MyClass> parameter:

    parameterMap: function(data, operation) {
        if (operation != "read") {
            // post the items so the ASP.NET DefaultModelBinder will understand them:
            // item[0].Name="name"
            // item[0].ProductID =1
            // item[1].Name="name"
            // item [1].ProductID =1
            var result = {};
            for (var i = 0; i < data.models.length; i++) {
                var product = data.models[i];
                for (var member in product) {
                    result["item[" + i + "]." + member] = item[member];
                }
            }
            return result;
        }
    }

    To my surprise (and confusion) the kendo grid does not actually post all of the batch updates in a single request... rather posts an update request to the server for each and every row that has changed individually... so the parameter map above didn't work. Since data.models is null, data.models.length throws an exception. I fixed this by removing the parameter map entirely and changing the type of the argument in my Update method from IEnumerable<MyClass> to simply MyClass. However this behaviour is not at all what I was expecting. Is there any way to configure the grid to post a single update to the server (without coding this up myself in a custom save button)?

    Cheers,
    Jimmy

  9. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    1866 posts
    Member since:
    Sep 2012

    Posted 26 Jul 2012 Link to this post

    Hello James,

    I suppose you are missing the batch: true setting in DataSource configuration. See the following demo for more details: http://demos.kendoui.com/web/grid/editing.html

    Greetings,
    Nikolay Rusev
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  10. James Crosswell
    James Crosswell avatar
    11 posts
    Member since:
    Jul 2009

    Posted 27 Jul 2012 Link to this post

    So I definitely had the batch editing enabled in the data source. I think implementing drag n drop interferes with editing though... for one thing, if you have drag n drop enabled the the default (incell) edits are not applied unless you hit the return key after changing cell contents (simply clicking off to another cell to make another edit elsewhere doesn't work as it does when drag n drop has not been implemented). 

    After disabling the drag n drop operations I was able to get batch editing working (although I had to fight pretty hard to find out exactly how to configure the jquery ajax post and the parameters of the Update action method of my mvc3 controller in order to have anything other than null being passed as a parameter to that Update action method).

    Next step is to try to get batch editing AND drag n drop working at the same time - it feels like I'm making a really delicate tower style desert here though... any little change I make can bring the whole thing crashing down. I wasn't expecting changes to drag n drop to have any impact on editing - but it seems anything and everything here can be interconnected and I  get one thing working only to break another.

    I'm struggling a bit to convince myself that this is a superior development model to plain old asp.net mvc with mvc extensions. Unfortunately I can't get the kendoui asp.net mvc extensions to work either (I can get them working in a new application but for some reason the intellisense etc. won't work in an existing application - despite having followed all the install instructions to the letter (at least 5 times).

  11. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    1866 posts
    Member since:
    Sep 2012

    Posted 01 Aug 2012 Link to this post

    Hello James,

    I don't really understand what is the issue which you are facing. Batch editing and drag'n'drop seems to work in the fiddle:  http://jsfiddle.net/UsCFK/

    Regards,
    Nikolay Rusev
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  12. James Crosswell
    James Crosswell avatar
    11 posts
    Member since:
    Jul 2009

    Posted 01 Aug 2012 Link to this post

    That fiddle displays exactly what I'm talking about. Try clicking on a cell and then changing a value (e.g. change "text 3" to "text 4")... don't press the enter key, just click with your mouse on another cell (e.g. the cell with the value "text 2"). Now see that the value of the cell that you just changed reverts to "text 3" (your changes have been discarded). This does not happen when drag and drop is not enabled.

    You can work around this by making sure to press the enter key after each edit that you make, but that isn't obvious/intuitive to end users and certainly doesn't add anything from a usability point of view.

    Cheers,
    James

  13. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    1866 posts
    Member since:
    Sep 2012

    Posted 02 Aug 2012 Link to this post

    Hello James,

    Indeed you are right. However some prevention of event bubbling is required to make it Draggable work properly.

    You can take another approach if editing and row reorder is required. You can add handler in front of every row which will be the draggable target. This should avoid the current behavior.

    Greetings,
    Nikolay Rusev
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  14. James Crosswell
    James Crosswell avatar
    11 posts
    Member since:
    Jul 2009

    Posted 03 Aug 2012 Link to this post

    I'm not sure I understand your suggestion. The code in that fiddler does make the row the drag target doesn't it?

    grid.table.kendoDraggable({
        filter: "tbody > tr",
        group: "gridGroup",
        threshold: 100,
        hint: function(e) {
            return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
        }
    });

    The filter is "tbody > tr" which should be a row.

    One thing I was thinking was maybe to add a column that contained a "grip" icon or something, which would be the drag target... so the draggable event would only be triggered when clicking on a non-editable cell. I'll have to play around with this some time when I'm not so busy though.

    Cheers,
    James

  15. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    1866 posts
    Member since:
    Sep 2012

    Posted 06 Aug 2012 Link to this post

    Hello James,

    "One thing I was thinking was maybe to add a column that contained a "grip" icon or something, which would be the drag target..."

    this is exactly what I meant when saying:

    "You can add handler in front of every row which will be the draggable target.."

    Essentially you will have some sort of icon(in form of template column or simply inserted once the grid is loaded) and use it to drag the row instead of making the whole row draggable. Once you implement this "grip" icon you will need to change the filter for the Draggable in fiddle.

    Regards,
    Nikolay Rusev
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  16. Alex
    Alex avatar
    15 posts
    Member since:
    Oct 2011

    Posted 10 Aug 2012 Link to this post

    Would it be possible to provide an example and/or further guidance on using "grip icon" to move rows?

    I've got row reordering working using the whole row as the draggable, but I'd prefer that a grip icon be used. I'm struggling to understand the filter property on keno Draggable etc.

  17. James Crosswell
    James Crosswell avatar
    11 posts
    Member since:
    Jul 2009

    Posted 10 Aug 2012 Link to this post

    The filter is a standard jquery selector... so if you add an image in one of the columns like this:

    <img alt='drag' src='/content/images/drag.png' />

    You can then use the following filter as a parameter to the kendoDraggable method:

    filter: "[alt='drag']"

    Just bear in mind that the parameter to the kendoDraggable hint function will then be the img node (not a tr or a td node) so you'll have to use e.parent() or e.parent().parent() in those methods if you need to access the td or tr elements that the drag grip is sitting in... if you hunt around for a bit of info on jquery selectors this should start making sense - it took me a little while to get my head around it.

    Cheers,
    Jimmy

  18. Vasili
    Vasili avatar
    3 posts
    Member since:
    Jan 2013

    Posted 28 May 2013 Link to this post

    Hey,
    I've run into the same issue and it was almost impossible to find this thread. Could you please add a note to kendo draggable mentioning the possible issues with grid? I think it could save someone a day or two.

  19. Josh
    Josh avatar
    4 posts
    Member since:
    Mar 2013

    Posted 30 May 2013 Link to this post

    I'm a little late to the game here, but I thought I would post a response that might help out others.

    I came up with a fiddle to support multiple row selecting and drag and dropping: http://jsfiddle.net/BtkCf/4/

    You have to CTRL-click (or if on a Mac CMD-click), to select multiple rows.  Ideally you can drag a mouse and select a group.

  20. Vasili
    Vasili avatar
    3 posts
    Member since:
    Jan 2013

    Posted 30 May 2013 Link to this post

    Hey Josh,

    Thanks a lot for sharing it, it's great!

  21. hustcer
    hustcer avatar
    20 posts
    Member since:
    Apr 2014

    Posted 24 Apr in reply to Nikolay Rusev Link to this post

    Very helpful, Thank you.

Back to Top