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); ....
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
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