Multiple Dynamic Grids Drag and Drop

[Drew Auman]

I am looking to create grids dynamically from a database that have drag and drop row ability within the grids themselves, however prevent them from dragging and dropping outside of their parent grid.   I also want to keep performance in mind as well ...

User 1
    Project 1
    Project 2
    Project 3
  
User 2
    Project 4
    Project 5
    Project 6

User 3
    Project X
    Project Y
    Project Z

As shown above, users would be pulled from a database with the grid below them containing the projects that they are working on with the ability to drag and drop sort the order of the projects......  The project row would contain several columns with data relating to the project.  As a example, Project 5 could be moved above or below it's current position, however it could never be moved to User 1 through the drag and drop grid....

The Big Question:  Is this possible, and how would this be accomplished?  Any examples provided would be great....

Drew

[Mira]

Hello Drew,

In order to implement the desired functionality, I recommend that you cancel the RowDropping client-side event if the dragged row is dropped in another tableview:

function onRowDropping(sender, args) {
    if (args.get_draggedItems()[0].get_parent() != args.get_targetItemTableView()) {
        args.set_cancel(true);
    }
}

I hope this helps.

All the best,
Mira
the Telerik team

[Drew Auman]

Ok sounds good.  So in terms of creating the grids, what would your recommendation be?

Would I place a RadGrid on the page for the users and them within each row place another rad grid for the projects? 

What about post back?  I assume I will need to rebuild all data sets for the page for each drag and drop reorder ?  Or is there a way to just hit the database for the grid that is currently being reordered?

Thanks for your help
Drew

[Mira]

Hello Drew,

I suggest that you use an hierarchical grid for representing the data.

About the reordering:
If you want to store the changed order in the database, please follow this code library.
Otherwise, you can store the data from the database in a List, set it as a datasource of the grid and reorder the items only in it. This approach is implemented in the Items Drag-and-drop demo.

I hope this helps.

Kind regards,
Mira
the Telerik team