Drag and Drop orderable rows

Not Answered This post has 0 verified answers | 10 Replies | 6 Followers Thread's RSS feed.

SIG
Points 190
Replied On: Mon, Mar 11 2013 11:20 AM Reply

I would like to enable the grid to have drag and drop rows, that will allow the grid rows to be ordered very dynamically.  Is there away to do this?

  • Post Points: 20

All Replies

Replied On: Mon, Mar 11 2013 12:00 PM Reply

Hi,

Currently there is no such feature in igGrid. You can try to instantiate jQuery UI Sortable on the grid tbody element, but then you'll need to implement some custom logic in order to save the new row index in the grid.

Hope this helps,
Martin Pavlov
Infragistics, Inc.

  • Post Points: 35
SIG
Points 190
Replied On: Mon, Mar 11 2013 12:04 PM Reply

Do you have any samples that may lead me in the right direction to accomplish this?

  • Post Points: 5
kstitdeveloper
Points 150
Replied On: Wed, Jun 26 2013 10:53 AM Reply

I tried doing that but it does not work. I added these two lines in the jquery window ready function. Even tried putting it in the  $.ig.loader function, but that does not work as well. Please assist. We have a need for this functionality and any help will be appreciated. Please respond to me at biren.ajmera@kochind.com as I'm not sure what email address this account is setup with.

$("#igGrid tbody").sortable();
$("#igGrid tbody").disableSelection();

 

  • Post Points: 20
Replied On: Wed, Jun 26 2013 11:49 AM Reply

Hello Kstitdeveloper,

Attached you can find a working sample demonstrating rows drag and drop.

Best regards,
Martin Pavlov
Infragistics, Inc. 

  • Post Points: 35
kstitdeveloper
Points 150
Replied On: Wed, Jun 26 2013 1:12 PM Reply

Thanks Martin. That was very quick. However I do have a couple of questions. I am using the MVC style grid rendering instead of JS. So my grid declaration is like

@Html.Infragistics.Grid(Model).....

How can I hook up the RowsRendered event of the grid and also I need some js function to trigger every time a row position is changed after dragging. Can you please add those features in your sample code? Thanks a bunch for your excellent support!

  • Post Points: 5
kstitdeveloper
Points 150
Replied On: Wed, Jun 26 2013 1:44 PM Reply

Another issue I've noticed is that after dragging rows, the zebra striping does not get refreshed. So I end up with adjacent rows with the same background color. Is there a way to refresh the zebra striping on the grid after dragging rows?

  • Post Points: 5
webdev
Points 120
Replied On: Wed, Jul 3 2013 4:09 AM Reply

Based on your recommendation I have tried to implement the drag and drop of rows. 

Primarly everything works fine. I have been also able to update the table cells to reflect the new sorting order.

But I have found a problem, which happens after applying a updateRow command. The other table cells were refreshed with the old content.

As far as I have understand this happens because the underlying datasource must be also updated. 

The question is how can I achieve this?

  • Post Points: 5
webdev
Points 120
Replied On: Wed, Jul 3 2013 4:48 AM Reply

I can access the record by findRecordByKey and apply the same changes like sorting order to the datasource items, but unfortunately I can't sort this datasource array.

  • Post Points: 20
aliaksei
Points 820
Replied On: Tue, Feb 11 2014 2:52 AM Reply

Hello,

I have tried your solution and it works fine :)

But I noticed one issue. It works weird when we are switching-on Selection feature and when we are trying to drag selected row. Do you have any ideas about the reason?

Thanks,

Aliaksei

  • Post Points: 5
aliaksei
Points 820
Replied On: Tue, Feb 11 2014 3:05 AM Reply

Well, I have found solution. May be it will be helpfull for someone else:

We just need to recalculate height:

start: function (evt, ui) {

       ui.placeholder.height(ui.item.height());

...

  • Post Points: 5
Page 1 of 1 (11 items) | RSS