RadGrid Drag and Drop feature: why so complicated!!

[Eric]

Hi,

I need to use the drag and drop feature of the RadGrid, so I checked out the demo (http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx). Unfortunately, the way Telerik demostrates how to use this feature is not suitable for my situation. The following are the main two reasons (staying in the demo context: shipped and pending orders):

 

1. Telerik uses the Session variable to store the shipped and pending orders. In my case multiple pages will be opened; a user will open pages to view and compare the different orders. Therefore, storing the orders in the session will not work since when a row is dragged both windows will be affected by the changes upon postback.
2. On Row drop event, Telerik retreives the entities again, then inserts and deletes the dragged items from the entities's collection and afterwards, rebinds the grids. I don't understand why this has to be done this way. Why can't we manipulate the GridDataItems instead? We would just have to moved the GridDataItems, no need to retrieve the data source again and play around with the data source. Furthermore, in my scenario, the rows in the grid are added dynamically by the user. When a row is added, it is not yet saved in the database, the new records added to the RadGrid and the data will only be saved in the database when the user clicks "save". Playing with the entities's collection will not work in this case since it is not yet aware of the new rows added...

With all this being said, how can I implement the drag and drop feature to properly fit my scenario? Maybe having the drag and drop feature only client side, that would probably work...

Here's a short example of what I wish to acheive (server side):

<h2>Pending Orders</h2>
<telerik:RadGrid runat="server" ID="grdPendingOrders" OnNeedDataSource="grdShippedOrders_NeedDataSource" OnRowDrop="grdShippedOrders_RowDrop" AllowMultiRowSelection="true">
    <MasterTableView DataKeyNames="OrderId">
        <Columns>
            <telerik:GridDragDropColumn Visible="false" />
        </Columns>
    </MasterTableView>
    <ClientSettings AllowRowsDragDrop="True">
        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
    </ClientSettings>
</telerik:RadGrid>

<h2>Shipped Orders</h2>
<telerik:RadGrid runat="server" ID="grdShippedOrders" OnNeedDataSource="grdShippedOrders_NeedDataSource" OnRowDrop="grdShippedOrders_RowDrop" AllowMultiRowSelection="true">
    <MasterTableView DataKeyNames="OrderId">
        <Columns>
            <telerik:GridDragDropColumn Visible="false" />
        </Columns>
    </MasterTableView>
    <ClientSettings AllowRowsDragDrop="True">
        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
    </ClientSettings>
</telerik:RadGrid>

protected void grdShippedOrders_RowDrop(object sender, GridDragDropEventArgs e)
{
    foreach (var item in e.DraggedItems)
    {
        grdShippedOrders.MasterTableView.InsertItem(item); //add to destination
        grdPendingOrders.MasterTableView.PerformDelete(item); //remove from source
    }
}

protected void grdPendingOrders_RowDrop(object sender, GridDragDropEventArgs e)
{
    foreach (var item in e.DraggedItems)
    {
        grdPendingOrders.MasterTableView.InsertItem(item);  //add to destination
        grdShippedOrders.MasterTableView.PerformDelete(item); //remove from source
    }
}

Hope my explanation is clear and thanks for your support.

Eric

[Veli]

Hi Eric,

1. The Session state in the example is used just as a temporary storage of sample data. It is not imperative to use as given with the Item Drag-Drop functionality of the grid. You can use whatever temporary storage your page has access to.

2. You cannot manipulate the GridDataItems directly because RadGrid is a data-bound control. This means that items are created only as a result of databinding and the data items correspond exactly to the data records from RadGrid's data source. In effect, you cannot remove one item from a grid and append it to the Items collection of another grid. It has to be done through the grid data. You need to remove one data item from the first grid, add another data item (with the same data) to the second grid and rebind both to have their state updated.

Veli
the Telerik team