drag and drop / reordering

[PPCnSEO]

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?

[Nikolay Rusev]

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

[Keith]

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?

[Nikolay Rusev]

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

[Keith]

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?

[Nikolay Rusev]

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

[James Crosswell]

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

[James Crosswell]

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

[Nikolay Rusev]

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

[James Crosswell]

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).

[Nikolay Rusev]

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

[James Crosswell]

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

[Nikolay Rusev]

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

[James Crosswell]

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

[Nikolay Rusev]

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

[Alex]

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.

[James Crosswell]

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

[Vasili]

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.

[hustcer]

Very helpful, Thank you.

[Josh]

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.

[Vasili]

Hey Josh,

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

[Bob]

Thanks Josh. Your post over one year ago is still quite helpful.

[Jeff]

Awesome Job Josh, your solution was ridiculously helpful

[Joe]

I know it is an old post but the codes with the latest Kendo version don't seem to work under IE11.

This version from Nikolay works under IE11, but is with an older version of Kendo.
http://jsfiddle.net/rusev/nmB69/

These versions from Nikolay don't work under IE11:
http://jsfiddle.net/JBeQn/
http://jsfiddle.net/UsCFK/

This version from Josh doesnt' work under IE11.
http://jsfiddle.net/BtkCf/4/

Any suggestions? Thoughts?

[Ristogod]

Yes, I am attempting to do drag and drop sorting on my grid also and none of the provided examples from any of the fiddles seem to work with the current version of Kendo.

Anyone know of a working example with current versions of Kendo?

[Ristogod]

Here is a fiddle of the original example posted but using the most current version of kendo.

The drop never happens because the target can not be found.

http://jsfiddle.net/ristogod/9LpctLL7/1/

[Ristogod]

I think I got it working. Check this out.

http://jsfiddle.net/ristogod/b69d8g74/

[Bob]

Thanks for posting this...

[Derek]

You might also consider new Sortable functionality:

http://demos.telerik.com/aspnet-mvc/sortable/integration-grid

[Joe]

[quote]Derek said:You might also consider new Sortable functionality:

http://demos.telerik.com/aspnet-mvc/sortable/integration-grid

[/quote]

I like this. But..when I attempted to move an item to the end of the grid which is below the current browser window's bottom, the window couldn't automatically scroll down.

Then I tried to address this issue by adding codes like below to the KendoSortable() but the e.clientY couldn't get a value.

move: function(e) {
                          console.log(e.clientY + ' ' + $(window).innerHeight());
                             if (e.clientY + 50 > $(window).innerHeight()) {
                          $(window).scrollTop($(window).scrollTop() + 10);
                      } else if (e.clientY - 50 < $(window).scrollTop()) {
                          $(window).scrollTop($(window).scrollTop() - 10);
                      }

Is there a way to make it work?

[petr]

Its not worked for frozen table also after editing field(if table is editable:true)

[Anthony]

It worked, but unfortunately not on an iPad

I asked Telerik and got this version back from Daniel which does work both on Desktop and on an iPad

 http://jsfiddle.net/k83aet1t/1/

[Anthony]

It did work on Desktop but unfortunately not on an iPad

I asked Telerik and got this reply back from Daniel which does work on both

http://jsfiddle.net/k83aet1t/1/

[Jason]

All of these examples just swap the drag and dropped items, is it possible to insert the dropped item in the list and move everything down one and update the sort order?

[Nikolay Rusev]

Hello Jason,

 

The items in the Grid are sorted based on Position field. That said in the drop event handler you can update that field that way so the desired effect is achieved.

 

Regards,
Nikolay Rusev
Telerik