Drag and Drop RadGrid in clientside

12 posts, 0 answers
  1. Balamurugan B
    Balamurugan B avatar
    3 posts
    Member since:
    Feb 2010

    Posted 23 Mar 2010 Link to this post

    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>

  2. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 26 Mar 2010 Link to this post

    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.
  3. mohammad imran rizvi
    mohammad imran rizvi avatar
    3 posts
    Member since:
    Aug 2009

    Posted 22 Apr 2010 Link to this post

    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

  4. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 23 Apr 2010 Link to this post

    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.
  5. mohammad imran rizvi
    mohammad imran rizvi avatar
    3 posts
    Member since:
    Aug 2009

    Posted 23 Apr 2010 Link to this post

    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.


  6. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 27 Apr 2010 Link to this post

    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.
  7. Saranya
    Saranya avatar
    14 posts
    Member since:
    Dec 2010

    Posted 04 Jan 2011 Link to this post

    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
  8. Rohan
    Rohan avatar
    94 posts
    Member since:
    Jul 2012

    Posted 06 Jul 2012 Link to this post

    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>
                              




  9. Richard
    Richard avatar
    3 posts
    Member since:
    Aug 2012

    Posted 29 May 2013 Link to this post

    "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.
  10. Angel Petrov
    Admin
    Angel Petrov avatar
    1099 posts

    Posted 03 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Richard
    Richard avatar
    3 posts
    Member since:
    Aug 2012

    Posted 03 Jun 2013 Link to this post

    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>

  12. akhil
    akhil avatar
    1 posts
    Member since:
    Oct 2017

    Posted 07 Dec 2017 in reply to Dimo Link to this post

    Hi EveryOne,

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

Back to Top