Drag and Drop RadGrid in clientside

[Balamurugan B]

I want to reorder the grid rows  in client side only , Without server side scripting can i do that, I sort the rows based on GridTemplateColumn (Label denotes Order of each row)
given below
<telerik:GridTemplateColumn  HeaderText ="Description"  Visible="false" Display="false">
<ItemTemplate>
<asp:Label ID="lblDisplayOrder" runat="server"></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>

[Dimo]

Hello Balamurugan,

I am afraid this behavior is not supported out-of-the-box. Normally, when you reorder RadGrid rows, the control posts back in order to send information about the changes to the server, where you can manipulate the control's datasource. So arranging rows without communicating this to the datasource (no matter what is its type) doesn't make much sense.

One thing that you can do is use client-side binding, cancel the OnRowDropping client event handler (to prevent postback), manually make changes to the datasource on the client and rebind the RadGrid MasterTableView on the client (otherwise the rows will not be reordered).

http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx

http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[mohammad imran rizvi]

Hi Demo,

Although the feature is not supported directly and it is a big mis out of control, but I think it would not be a very big deal to implement it using client side object model (telerik has a rick CSOB).

Can you quickly give some good example of this, I have to integrate it in my project.

The given example is good but it takes data from WebService all the time, what I want is just to take the data from existing datasource and change the datasource(table) order and rebind, I think that will solve the our problem as well as help many other people to integrate this great feature , I have been searching for this solution since last 1 week.

It would be great if you can create an example of this.

Regards,
Mohammad Imran Rizvi

[Dimo]

Hello Mohammad,

I am afraid we do not have an example of the desired functionality. Please follow the guidelines in my previous message and try to implement it. If you stumble upon any particular difficulty, let us know.

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[mohammad imran rizvi]

Hi Dimo,

Thanks for replying,

I have started working on the same, my plan is to write some code that will remove the existing row (draggedItems)  , and insert it at dropped location (args._targetItemIndexHierarchical) .

I am able to get the RadGrid object and Index of Row at client side , but I haven't found any property using which
1) I can get the particular Row(Item) object which I am dragging
2) Insert Row at given Index.

I am using onRowDropping client side event to handle the drag and drop

Can you please let me know how we can

1) Get the particular Row(Item) object which I am dragging.
2) Insert it at particular index in RadGrid's MasterTableView's First DetailTableView.
3) How to rebind again at client side (or it is not required?)

Thanks

Imran Rizvi.

[Dimo]

Hi Imran Rizvi,

Here are some guidelines on your questions:

1) To get the client object(s) of specific row(s):

http://www.telerik.com/help/aspnet-ajax/onrowdragstarted.html
http://www.telerik.com/help/aspnet-ajax/onrowdropping.html

2) There is no use in inserting rows client-side somewhere in RadGrid. Instead, you should update the control's datasource (according to the information from the RowDropping event) and

3) Rebind the RadGrid by using the rebind() method of the MasterTableView object.


Please note that we do not support client-side binding with hierarchy.


Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Saranya]

Hi Dimo,

But still the "OnRowDragStarted" on ClientEvents makes a server hit (causes postback). The ultimate aim is to drag and drop thereby reordering the rows within the radgrid without page refresh. Any way to avoid this postback and achieving the same functionality?

Regards,
Saranya

[Rohan]

Hi All ,

 For Telelrik Rad Grid - Can’t see the drop and drag functionality.  Ex. When dropping a column for grouping  - cannot see the column while dragging.  On the Telerik site – it shows the column header while dragging.

Code-

  <telerik:RadGrid ID="grdLog" runat="server" AutoGenerateColumns="False" OnItemCommand="grdLog_ItemCommand" OnNeedDataSource="grdLog_NeedDataSource" ShowGroupPanel="True" AllowPaging="True"  AllowSorting="true" Width="100%">
                
                 <ExportSettings HideStructureColumns="true" ExportOnlyData="true" OpenInNewWindow="true" IgnorePaging="true" />
                                    <MasterTableView CommandItemDisplay="Top"  AllowFilteringByColumn="true">
                                  
                                    <PagerStyle AlwaysVisible="true"/>
                                    <CommandItemTemplate>
                                    <table>
                                    <tr>
                                    <td>
                                     <asp:Button ID="btnRefresh" runat="server" CommandName="Rebind" CssClass="rgRefresh" ToolTip="Refresh content." />
                                    </td>
                                    <td>
                                    <asp:Button ID="ExportToExcelButton" runat="server" CommandName="ExportToExcel" CssClass="rgExpXLS" ToolTip="Export to Excel." />
                                    </td>
                                    <td>
                                    <asp:Button ID="ExportToWordButton" runat="server" CommandName="ExportToWord" CssClass="rgExpDOC" ToolTip="Export to Work." />
                                    </td>
                                    <td>
                                    <asp:Button ID="ExportToPdfButton" runat="server" CommandName="ExportToPdf" CssClass="rgExpPDF" ToolTip="Export to PDF." />
                                    </td>
                                    <td>
                                    <asp:Button ID="ExportToCsvButton" runat="server" CommandName="ExportToCsv" CssClass="rgExpCSV" ToolTip="Export To CSV." />
                                    </td>
                                    <td>
                                    <asp:ImageButton ID="imgHideUnhide" runat="server" CommandName="HideUnhide" ImageUrl="~//images/SearchCrawler_16px.gif"  OnClientClick="hideFilterItem()" ToolTip="Hide Or Unhide Filter." />
                                    </td>
                                    </tr>
                                    </table>
                                    </CommandItemTemplate>
                                    <CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true" ShowExportToPdfButton="true"
                                        ShowExportToCsvButton="true"  ShowAddNewRecordButton="false" ShowRefreshButton="false"/>
                                        <Columns>
                                            <telerik:GridBoundColumn DataField="Username" HeaderText="User Name" SortExpression="Username" ></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Name" HeaderText="File/Folder" SortExpression="Name" ></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="F_Status" HeaderText="Status" SortExpression="F_Status"  ></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="LogDate" HeaderText="Log Date" SortExpression="LogDate"  ></telerik:GridBoundColumn>
                                        </Columns>

                                    </MasterTableView>
                             <ClientSettings  AllowDragToGroup="True" >
                <Selecting AllowRowSelect="True"></Selecting>
            </ClientSettings>
            <GroupingSettings ShowUnGroupButton="true" />
                                </telerik:RadGrid>
                          

[Richard]

"I am afraid this behavior is not supported out-of-the-box. Normally, when you reorder RadGrid rows, the control posts back in order to send information about the changes to the server, where you can manipulate the control's datasource. So arranging rows without communicating this to the datasource (no matter what is its type) doesn't make much sense.

One thing that you can do is use client-side binding, cancel the OnRowDropping client event handler (to prevent postback), manually make changes to the datasource on the client and rebind the RadGrid MasterTableView on the client (otherwise the rows will not be reordered).

http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx

http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

Kind regards,
Dimo
the Telerik team"

This is a completely unacceptable response.  I cannot believe that a grid so feature rich would not offer the option to prevent a postback on the client-side onRowDropped event.  I read that a possible approach might be to cancel the operation in the onRowDropping event but when I set args.set_cancel(true), it prevents the entire drop operation from firing.  I need a way to drag and drop rows that will allow me to handle the onRowDropped event on the client without posting back to the server.  What if you wanted to recalculate figures on the client and defer saving the information until the user clicks the Save button?  Any help is greatly appreciated.

[Angel Petrov]

Hi Richard,

The OnRowDropped event will internally fire a command that is first handled on the client and later a postback is triggered. That said you can subscribe to the client-side OnCommand event and cancel the postback:

function onGridCommand(sender, args) {
                if (args.get_commandName() === "RowDropped") {
                    args.set_cancel(true);
                }
            }

Now temporarily swapping the rows is more tricky. RadGrid is a databound control and being such it will display the records from it's data source in the same order. To change the order you will have to apply the changes in the data source as well. If avoiding a postback is a requirement then the only possible solution is using client-side data-binding. Note that in this case you will have to manually make the appropriate changes to the data source and rebind the grid.

Regards,
Angel Petrov
Telerik

[Richard]

That proposed solution was so lame.  It still prevents the drop operation from occuring.  I've found my solution with the following JQuery code which will allow multiple-row drag/drop operations until I am ready to post the data back to the server:

<script type="text/javascript">

  //... Control key and mouse click toggles row selection.
  $("#<%= GridView1.ClientID %> tbody").on('click', 'tr', function (e) {
   if (e.ctrlKey || e.metaKey) {
    $(this).toggleClass("selected");
   } else {
    $(this).addClass("selected").siblings().removeClass('selected');
   }
  }).sortable({
   axis: 'y', //... Just row movement.
   connectWith: "#<%= GridView1.ClientID %> tbody",
   containment: 'parent', //... Drag only within parent.
   cursor: 'move', //...Move cursor.
   delay: 150, //... Needed to prevent accidental drag when trying to select.
   items: 'tr:not(Spud)', //... Not spud rows.
   revert: 0,
   helper: function (e, item) {
    var helper = $('<tr/>');
    if (!item.hasClass('selected')) {
     item.addClass('selected').siblings().removeClass('selected');
    }
    var elements = item.parent().children('.selected').clone();
    item.data('multidrag', elements).siblings('.selected').remove();
    return helper.append(elements);
   },
   stop: function (e, info) {
    info.item.after(info.item.data('multidrag')).remove();
    $('.selected').each(function () {
     alert($(this).find('.Rig').val());
    });
   }

  });

</script>

[akhil]

Hi EveryOne,

  Can u Guys Pzz Help me with Rad Grid Row Drag and Drop so that i can reorder