Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Move rows up and down in radgrid -> DetailTables -> GridTableView

1 Answer 216 Views
Grid
This is a migrated thread and some comments may be shown as answers.
maha raja
Top achievements
Rank 1
maha raja asked on 01 Sep 2009, 02:45 PM
Hi,

Have a smiley day..

I am using radgrid with gridtableview in detailtables. I need to move rows up / down within that gridtableview.

I have used the following coding snippet.. and find underlined line in the snippet
..(ie.. $find("<%= grdProgramDetails.MasterTableView.ClientID %>").selectItem(targetRow);  ....

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GridHierarchy_DragDrop.aspx.vb" Inherits="samples.GridHierarchy_DragDrop" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server">  
    <title>Untitled Page</title> 
     <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
 
        <script type="text/javascript">    
                var _selectedRow;    
                function RadGrid1_RowSelected(sender, args)    
                {     
                    _selectedRow = $get(args.get_id());    
                }    
   
                function MoveRowUp()    
                {   
                  
                    if (_selectedRow && _selectedRow.sectionRowIndex > 0)    
                    {    
                        swapRows(_selectedRow, _selectedRow.parentNode.rows[_selectedRow.sectionRowIndex - 1])  
                       // _selectedRow.Control.swapNode(_selectedRow.Control.parentNode.rows[_selectedRow.Control.sectionRowIndex - 1]);     
                    }    
                      
                     
                }    
   
                function MoveRowDown()    
                {    
                  
                    if (_selectedRow && _selectedRow.sectionRowIndex < _selectedRow.parentNode.rows.length - 1)    
                    {    
                        swapRows(_selectedRow, _selectedRow.parentNode.rows[_selectedRow.sectionRowIndex + 1])  
                       // _selectedRow.Control.parentNode.rows[_selectedRow.Control.sectionRowIndex + 1].swapNode(_selectedRow.Control);     
                    }    
                      
                     
                }    
   
                function serializeChanges(index1, index2)    
                {    
                    var reorderInput = document.getElementById("ReorderChanges");    
                    if (reorderInput)    
                    {    
                        reorderInput.value += index1 + "," + index2 + ";";    
                    }    
                }    
                    
                function swapRows(sourceRow, targetRow)    
                {    
                   for(var i = 0; i < sourceRow.cells.length; i++)  
                   {  
                        var cellContent1 = targetRow.cells[i].innerHTML;  
                        var cellContent2 = sourceRow.cells[i].innerHTML;  
                        targetRow.cells[i].innerHTML = cellContent2;  
                        sourceRow.cells[i].innerHTML = cellContent1;  
                   }  
                   $find("<%= grdProgramDetails.MasterTableView.ClientID %>").selectItem(targetRow);  
                   serializeChanges(sourceRow.sectionRowIndex, targetRow.sectionRowIndex);  
                     
                }  
        </script> 
 
    </telerik:RadScriptBlock> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager" runat="server" /> 
   <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="All">  
        </telerik:RadFormDecorator> 
                          
        <telerik:RadMultiPage ID="RadMultiPage1" Width="530px" runat="server" SelectedIndex="0" > 
                        <telerik:RadPageView ID="RadPageView1" runat="server">  
                          
                         <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Style="width: 320px; " Skin="Vista" EnableAjaxSkinRendering="true" >   
        </telerik:RadAjaxLoadingPanel> 
 
<telerik:RadAjaxLoadingPanel ID="LoadingPanel2" runat="server" Style="width: 320px; " Skin="Vista" Direction="RightToLeft" EnableAjaxSkinRendering="true">   
        </telerik:RadAjaxLoadingPanel> 
          
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="grdProgramDetails">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="grdProgramDetails" LoadingPanelID="LoadingPanel1"/>  
                        <telerik:AjaxUpdatedControl ControlID="grdCommercialDetails" LoadingPanelID="LoadingPanel2"/>     
                          
                                         
                     </UpdatedControls> 
                     </telerik:AjaxSetting> 
                       
                     <telerik:AjaxSetting AjaxControlID="grdCommercialDetails">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="grdProgramDetails" LoadingPanelID="LoadingPanel2"/>  
                        <telerik:AjaxUpdatedControl ControlID="grdCommercialDetails" LoadingPanelID="LoadingPanel1"/>     
                          
                                         
                     </UpdatedControls> 
                     </telerik:AjaxSetting> 
                     </AjaxSettings> 
                     </telerik:RadAjaxManager> 
         
        <br /> 
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="1000" Height="550">  
           <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">  
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">  
                    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="150px">  
                        Pane 1 Content  
                    </telerik:RadSlidingPane> 
                    <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pane2" runat="server" Width="150px">  
                        Pane 2 Content  
                    </telerik:RadSlidingPane> 
                    <telerik:RadSlidingPane ID="Radslidingpane3" Title="Pane3" runat="server" Width="150px">  
                        Pane 3 Content  
                    </telerik:RadSlidingPane> 
                </telerik:RadSlidingZone> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar> 
            <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">  
                <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">  
                    <%--<telerik:RadPane ID="Radpane1" runat="server" Height="22px" Scrolling="none">  
                        <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Height="22px" SlideDirection="Bottom">  
                            <telerik:RadSlidingPane ID="Radslidingpane4" Title="Pane1" runat="server" Height="150px">  
                                Pane1</telerik:RadSlidingPane> 
                            <telerik:RadSlidingPane ID="Radslidingpane8" Title="Pane2" runat="server" Height="150px">  
                                Pane2</telerik:RadSlidingPane> 
                            <telerik:RadSlidingPane ID="Radslidingpane9" Title="Pane3" runat="server" Height="150px">  
                                Pane3</telerik:RadSlidingPane> 
                        </telerik:RadSlidingZone> 
                    </telerik:RadPane>--%> 
                    <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar> 
                    <telerik:RadPane ID="Radpane2" runat="server">  
                      
                        <div style="padding: 5px">  
                        <p> 
                  <telerik:raddocklayout id="RadDockLayout1" runat="server">  
            <table> 
                <tr> 
                    <td> 
                        <telerik:raddockzone id="RadDockZone1" runat="server" Skin="Outlook" MinWidth="500">  
                          
                        <telerik:raddock id="RadDock2" runat="server" defaultcommands="All" text=" " title="Program Details" > 
                        <ContentTemplate>                          
                            <telerik:RadGrid runat="server" ID="grdProgramDetails" OnNeedDataSource="grdProgramDetails_NeedDataSource" 
                AllowPaging="True" OnRowDrop="grdProgramDetails_RowDrop" AllowMultiRowSelection="false" Width="600" 
                PageSize="30" > 
                 <ClientSettings> 
                  
                    <Selecting AllowRowSelect="True"></Selecting> 
                    <ClientEvents OnRowSelected="RadGrid1_RowSelected"></ClientEvents> 
                </ClientSettings> 
                <MasterTableView DataKeyNames="ProgramId">  
                <NoRecordsTemplate> 
                        <div style="height: 30px; cursor: pointer;">  
                            No items to view</div> 
                 </NoRecordsTemplate> 
                  <DetailTables> 
                    <telerik:GridTableView DataKeyNames="ProgramId" AllowSorting="true" Name="grdDetailstables" CommandItemDisplay="Bottom">  
                              
                            <NoRecordsTemplate> 
                              <div style="height: 30px; cursor: pointer;">  
                            No items to view</div> 
                            </NoRecordsTemplate> 
                              
                            <CommandItemTemplate> 
                            <input type="Button" value="MoveDown" style="background-image: url('~/Images/arrow_marble_down.gif');" onclick="MoveRowDown()">  
                            <input type="hidden" name="ReorderChanges" id="ReorderChanges" runat="server" /> 
                            <input type="Button" value="MoveUp" style="background-image: url('~/Images/arrow_marble_up.gif');" onclick="MoveRowUp()">  
                              
 
                          <%--  <asp:ImageButton ImageUrl="~/Images/arrow_marble_down.gif" runat="server" ID="down" Height="40" Width="40" /> 
                            <asp:ImageButton ImageUrl="~/Images/arrow_marble_up.gif" runat="server" ID="up" Height="40" Width="40" /> 
                                     --%>                  
                            </CommandItemTemplate> 
                                      
                       
    
    
    
 
                   </telerik:GridTableView> 
                     
                 </DetailTables> 
                 <%--<Columns>    
                    <telerik:GridButtonColumn Text="Select" CommandName="Select"/>    
                    </Columns>--%> 
                </MasterTableView> 
                <SelectedItemStyle Font-Bold="true" Font-Size="Medium" ForeColor="BurlyWood" /> 
                <ClientSettings AllowRowsDragDrop="True">  
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"/>  
                    <%--<ClientEvents OnRowDropping="onRowDropping" />--%> 
                    <Scrolling AllowScroll="true" UseStaticHeaders="true"/>  
                </ClientSettings> 
                   
                <PagerStyle Mode="NumericPages" PageButtonCount="4" /> 
            </telerik:RadGrid> 
            </ContentTemplate> 
                            </telerik:raddock> 
                              
                            <telerik:raddock id="RadDock1" runat="server" text=" " title="Commercial Details" > 
                            <ContentTemplate> 
                            <telerik:RadGrid runat="server" ID="grdCommercialDetails" OnNeedDataSource="grdCommercialDetails_NeedDataSource" 
                AllowPaging="True" OnRowDrop="grdCommercialDetails_RowDrop" OnItemCommand="grdCommercialDetails_ItemCommand" AllowMultiRowSelection="true" 
                PageSize="30">  
                <MasterTableView DataKeyNames="CommercialId" Width="100%">  
                 <NoRecordsTemplate> 
                        <div style="height: 30px; cursor: pointer;">  
                            No items to view</div> 
                 </NoRecordsTemplate> 
                 <%-- <Columns>    
                    <telerik:GridButtonColumn Text="Select" CommandName="Select"/>    
                    </Columns>--%> 
                </MasterTableView> 
                <SelectedItemStyle Font-Bold="true" Font-Size="Medium" ForeColor="BurlyWood" /> 
                <ClientSettings AllowRowsDragDrop="True">  
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"/>  
                    <%--<ClientEvents OnRowDropping="onRowDropping" />--%> 
                    <Scrolling AllowScroll="true" UseStaticHeaders="true"/>  
                </ClientSettings> 
                 
                <PagerStyle Mode="NumericPages" PageButtonCount="4" /> 
                 
            </telerik:RadGrid> 
            </ContentTemplate> 
                            </telerik:raddock> 
                                                      
                        </telerik:raddockzone> 
                    </td> 
                     
                </tr> 
            </table> 
        </telerik:raddocklayout> 
                            </p> 
                              
                        </div> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar> 
            <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">  
                <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" ClickToOpen="true" 
                    SlideDirection="Left">  
                    <telerik:RadSlidingPane ID="Radslidingcommercial" Title="Commercial" runat="server" Width="555px">  
                    <div> 
                    <h2> 
                                Commercial Details..  
                    </h2> 
                          
            </div> 
                    </telerik:RadSlidingPane> 
                    <telerik:RadSlidingPane ID="Radslidingpane6" Title="Skin" runat="server" Width="200px">  
                       <div id="ThumbsArea">  
                            <asp:RadioButtonList ID="ThumbsList" AutoPostBack="true" runat="server" RepeatColumns="2"   
                             RepeatDirection="Horizontal" OnSelectedIndexChanged="ThumbsList_SelectedIndexChanged">  
                </asp:RadioButtonList> 
            </div> 
                    </telerik:RadSlidingPane> 
                    <telerik:RadSlidingPane ID="Radslidingpane7" Title="Pane3" runat="server" Width="150px">  
                        Pane 3 Content  
                    </telerik:RadSlidingPane> 
                </telerik:RadSlidingZone> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
</telerik:RadPageView> 
</telerik:RadMultiPage> 
      
    </form> 
</body> 
</html> 
 


I have to set the clientid in the above mentioned code for that DetailTables -> GridTableView.... otherwise its selecting multiple row when moving rows.

And how to update in sql server table?...

Please give any suggestions.

thanks in advance.

regards,
maha

1 Answer, 1 is accepted

Sort by
0
Raj
Top achievements
Rank 1
answered on 12 Apr 2012, 06:59 PM
Hi Maha,
Did you implemeted the above functionality rows move up and down,in radgridrow.please let me know,i need to implement the same.

Thanks,
Raj
Tags
Grid
Asked by
maha raja
Top achievements
Rank 1
Answers by
Raj
Top achievements
Rank 1
Share this question
or