Bailey Everitt
Top achievements
Rank 1
Rank 1
Bailey Everitt
asked on 06 Apr 2009, 05:10 PM
Hi Everyone,
I have a two grids, with drag and drop functionality. The grids allow you to drag and drop rows to one another. I'm having two issues that appear to be bugs, and I'm wondering if there is a work around or a fix.
1) My first issue happens when I try to drag rows from the left hand side grid to the right hand side one. The rows drag and drop over fine, but I'm having an issue with ordering/positioning them. For example, if I want to drag a row from the left hand side grid to the right hand side one, and put that row in a certain position, it always adds it to the bottom of the grid as the last row. Once it has been added over, I can reorder the rows, however, I'd like to put a row into any position I want on the initial drag and drop.
2) The second issue is a little bit different. The issue only occurs on this behavior:
-Drag and drop rows from the left hand side grid to the right one
-Re-position the rows in the right hand grid
-Change the page of the left hand grid (I have paging enabled since there about 500 rows)
-The right hand side grid then populates with the same rows that are in the left hand side grid, and all other rows and paging
disappears
My code is below, any help is greatly appreciated! Thanks.
HTML/JS
C#
I have a two grids, with drag and drop functionality. The grids allow you to drag and drop rows to one another. I'm having two issues that appear to be bugs, and I'm wondering if there is a work around or a fix.
1) My first issue happens when I try to drag rows from the left hand side grid to the right hand side one. The rows drag and drop over fine, but I'm having an issue with ordering/positioning them. For example, if I want to drag a row from the left hand side grid to the right hand side one, and put that row in a certain position, it always adds it to the bottom of the grid as the last row. Once it has been added over, I can reorder the rows, however, I'd like to put a row into any position I want on the initial drag and drop.
2) The second issue is a little bit different. The issue only occurs on this behavior:
-Drag and drop rows from the left hand side grid to the right one
-Re-position the rows in the right hand grid
-Change the page of the left hand grid (I have paging enabled since there about 500 rows)
-The right hand side grid then populates with the same rows that are in the left hand side grid, and all other rows and paging
disappears
My code is below, any help is greatly appreciated! Thanks.
HTML/JS
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaintenanceConsists.aspx.cs" |
| Inherits="Web.MaintenanceConsists" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!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></title> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| padding: 0px; |
| margin: 0px; |
| overflow: hidden; |
| } |
| </style> |
| <telerik:RadScriptBlock runat="server" ID="scriptBlock"> |
| <script type="text/javascript"> |
| function onRowDropping(sender, args) |
| { |
| if (sender.get_id() == "<%=uxRadGridAvailable.ClientID %>") |
| { |
| var node = args.get_destinationHtmlElement(); |
| if(!isChildOf('<%=uxRadGridSelected.ClientID %>', node) && !isChildOf('<%=uxRadGridAvailable.ClientID %>', node) ) |
| { |
| args.set_cancel(true); |
| } |
| } |
| if (sender.get_id() == "<%=uxRadGridSelected.ClientID %>") |
| { |
| var node = args.get_destinationHtmlElement(); |
| if(!isChildOf('<%=uxRadGridAvailable.ClientID %>', node) && !isChildOf('<%=uxRadGridSelected.ClientID %>', node) ) |
| { |
| args.set_cancel(true); |
| } |
| } |
| } |
| function isChildOf(parentId, element) |
| { |
| while(element) |
| { |
| if (element.id && element.id.indexOf(parentId) > -1) |
| { |
| return true; |
| } |
| elementelement = element.parentNode; |
| } |
| return false; |
| } |
| function centerUpdatePanel() |
| { |
| centerElementOnScreen(document.getElementById("uxRadAjaxLoadingPanel")); |
| } |
| function centerElementOnScreen(element) |
| { |
| var scrollTop = document.body.scrollTop; |
| var scrollLeft = document.body.scrollLeft; |
| var viewPortHeight = document.body.clientHeight; |
| var viewPortWidth = document.body.clientWidth; |
| if (document.compatMode == "CSS1Compat") |
| { |
| viewPortHeight = document.documentElement.clientHeight; |
| viewPortWidth = document.documentElement.clientWidth; |
| scrollTop = document.documentElement.scrollTop; |
| scrollLeft = document.documentElement.scrollLeft; |
| } |
| var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2); |
| var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2); |
| var top = scrollTop + topOffset - 40; |
| var left = scrollLeft + leftOffset - 70; |
| element.style.position = "absolute"; |
| element.style.top = top + "px"; |
| element.style.left = left + "px"; |
| } |
| </script> |
| </telerik:RadScriptBlock> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager" runat="server" /> |
| <telerik:RadAjaxLoadingPanel IsSticky="true" ID="uxRadAjaxLoadingPanel" runat="server" |
| Height="75px" Width="75px"> |
| <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' |
| style="border: 0px;" /> |
| </telerik:RadAjaxLoadingPanel> |
| <telerik:RadAjaxManager runat="server" ID="uxRadAjaxManager"> |
| <ClientEvents OnRequestStart="centerUpdatePanel();"></ClientEvents> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="uxRadGridAvailable"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="uxRadGridAvailable" LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| <telerik:AjaxUpdatedControl ControlID="uxRadGridSelected" LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| <telerik:AjaxSetting AjaxControlID="uxRadGridSelected"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="uxRadGridAvailable" LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| <telerik:AjaxUpdatedControl ControlID="uxRadGridSelected" LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <telerik:RadSplitter ID="uxRadSplitter" runat="server" Width="100%" Height="100%" |
| Orientation="Horizontal" BorderSize="0" BorderStyle="None" Skin="Web20" VisibleDuringInit="False"> |
| <telerik:RadPane ID="uxRadPaneHeader" runat="server" Height="100px"> |
| Header Pane |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="uxRadSplitBarHeader" runat="server" CollapseMode="Forward" /> |
| <telerik:RadPane ID="uxRadPaneDetail" runat="server" Scrolling="None"> |
| <telerik:RadSplitter ID="uxRadSplitterDetail" runat="server" Skin="Web20" VisibleDuringInit="False"> |
| <telerik:RadPane ID="uxRadePaneLeft" runat="server"> |
| <telerik:RadGrid runat="server" ID="uxRadGridAvailable" Skin="Office2007" OnNeedDataSource="uxRadGridAvailable_NeedDataSource" |
| AllowMultiRowSelection="True" AutoGenerateColumns="False" OnRowDrop="uxRadGridAvailable_RowDrop" |
| GridLines="None" Height="100%" Width="100%" BorderStyle="None" AllowPaging="True" |
| PageSize="50"> |
| <MasterTableView DataKeyNames="assetID" TableLayout="Fixed" Caption="Equipment" EnableNoRecordsTemplate="False"> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px" /> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| <Columns> |
| <telerik:GridBoundColumn DataField="assetID" HeaderText="Equipment ID" UniqueName="column"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="category" HeaderText="Category" UniqueName="column1"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="type" HeaderText="Type" UniqueName="column2"> |
| </telerik:GridBoundColumn> |
| </Columns> |
| <SortExpressions> |
| <telerik:GridSortExpression FieldName="assetID" /> |
| </SortExpressions> |
| </MasterTableView> |
| <ClientSettings AllowRowsDragDrop="True"> |
| <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" /> |
| <ClientEvents OnRowDropping="onRowDropping" /> |
| <Scrolling AllowScroll="true" UseStaticHeaders="true" /> |
| </ClientSettings> |
| <HeaderContextMenu EnableTheming="True" Skin="Office2007"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </HeaderContextMenu> |
| <PagerStyle Mode="NextPrevAndNumeric" /> |
| <FilterMenu EnableTheming="True" Skin="Office2007"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </FilterMenu> |
| </telerik:RadGrid> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="uxRadSplitBarDetail" runat="server" /> |
| <telerik:RadPane ID="uxRadPaneRight" runat="server"> |
| <telerik:RadGrid runat="server" ID="uxRadGridSelected" Skin="Office2007" OnNeedDataSource="uxRadGridSelected_NeedDataSource" |
| Width="100%" AllowMultiRowSelection="True" AutoGenerateColumns="False" OnRowDrop="uxRadGridSelected_RowDrop" |
| GridLines="None" BorderStyle="None" Height="100%"> |
| <HeaderContextMenu EnableTheming="True" Skin="Office2007"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </HeaderContextMenu> |
| <MasterTableView DataKeyNames="assetID" TableLayout="Fixed" Caption="Positions"> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px" /> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| <Columns> |
| <telerik:GridBoundColumn HeaderText="Equipment ID" DataField="assetID"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Category" DataField="category"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Type" DataField="type"> |
| </telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| <ClientSettings AllowRowsDragDrop="True"> |
| <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" /> |
| <ClientEvents OnRowDropping="onRowDropping" /> |
| <Scrolling AllowScroll="True" UseStaticHeaders="True" /> |
| </ClientSettings> |
| <FilterMenu EnableTheming="True" Skin="Office2007"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </FilterMenu> |
| </telerik:RadGrid> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBarFooter" runat="server" CollapseMode="Backward" /> |
| <telerik:RadPane ID="RadPaneFooter" runat="server" Height="50px"> |
| Footer Pane |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
| </html> |
C#
| using System; |
| using TRMS.Utilities; |
| using System.Data; |
| using Telerik.Web.UI; |
| using System.Web.UI.WebControls; |
| using System.Collections.Generic; |
| using TRMS.BLL; |
| namespace Web |
| { |
| public partial class MaintenanceConsists : System.Web.UI.Page |
| { |
| #region GlobalVariables |
| string TableName = ""; |
| string Fields = ""; |
| #endregion |
| #region Events |
| protected void Page_Load(object sender, EventArgs e) |
| { |
| GetQueryString(); |
| } |
| protected void uxRadGridAvailable_NeedDataSource(object source, GridNeedDataSourceEventArgs e) |
| { |
| uxRadGridAvailable.DataSource = AvailableFields; |
| } |
| protected void uxRadGridSelected_NeedDataSource(object source, GridNeedDataSourceEventArgs e) |
| { |
| uxRadGridSelected.DataSource = SelectedFields; |
| } |
| protected void uxRadGridAvailable_RowDrop(object sender, GridDragDropEventArgs e) |
| { |
| DropRowAvailableGrid(e); |
| } |
| protected void uxRadGridSelected_RowDrop(object sender, GridDragDropEventArgs e) |
| { |
| DropRowSelectedGrid(e); |
| } |
| #endregion |
| #region Methods |
| private void GetQueryString() |
| { |
| TableName = Request.QueryString.Get("Table"); |
| Fields = Request.QueryString.Get("Fields"); |
| } |
| protected IList<Field> AvailableFields |
| { |
| get |
| { |
| try |
| { |
| object obj = Session["AvailableFields"]; |
| if (obj == null) |
| { |
| obj = GetAvailableFields(); |
| if (obj != null) |
| { |
| Session["AvailableFields"] = obj; |
| } |
| else |
| { |
| obj = new List<Field>(); |
| } |
| } |
| return (IList<Field>)obj; |
| } |
| catch |
| { |
| Session["AvailableFields"] = null; |
| } |
| return new List<Field>(); |
| } |
| set { Session["AvailableFields"] = value; } |
| } |
| protected IList<Field> SelectedFields |
| { |
| get |
| { |
| try |
| { |
| object obj = Session["SelectedFields"]; |
| if (obj == null) |
| { |
| Session["SelectedFields"] = obj = new List<Field>(); |
| } |
| return (IList<Field>)obj; |
| } |
| catch |
| { |
| Session["SelectedFields"] = null; |
| } |
| return new List<Field>(); |
| } |
| set { Session["SelectedFields"] = value; } |
| } |
| protected IList<Field> GetAvailableFields() |
| { |
| string AssetID = ""; |
| string Category = ""; |
| string AssetType = ""; |
| IList<Field> results = new List<Field>(); |
| if (!StringUtility.IsNullOrEmptyString(TableName) && !StringUtility.IsNullOrEmptyString(Fields)) |
| { |
| DataSet availableDataSet = MaintenanceConsistsBLLC.GetEquipmentAndTypes(TableName, Fields); |
| if (availableDataSet != null) |
| { |
| try |
| { |
| foreach (DataRow dataRow in availableDataSet.Tables[0].Rows) |
| { |
| AssetID = dataRow["AssetID"].ToString(); |
| Category = dataRow["Category"].ToString(); |
| AssetType = dataRow["AssetType"].ToString(); |
| results.Add(new Field(AssetID, Category, AssetType)); |
| } |
| } |
| catch |
| { |
| results.Clear(); |
| } |
| } |
| else |
| { |
| results = null; |
| } |
| } |
| else |
| { |
| results = null; |
| } |
| return results; |
| } |
| private void DropRowAvailableGrid(GridDragDropEventArgs e) |
| { |
| if (string.IsNullOrEmpty(e.HtmlElement)) |
| { |
| if (e.DraggedItems[0].OwnerGridID == uxRadGridAvailable.ClientID) |
| { |
| // items are drag from available to selected grid |
| if ((e.DestDataItem == null && SelectedFields.Count == 0) || |
| e.DestDataItem != null && e.DestDataItem.OwnerGridID == uxRadGridSelected.ClientID) |
| { |
| IList<Field> selectedFields = SelectedFields; |
| IList<Field> availableFields = AvailableFields; |
| foreach (GridDataItem draggedItem in e.DraggedItems) |
| { |
| Field tmpField = GetField(availableFields, (string)draggedItem.GetDataKeyValue("assetID")); |
| if (tmpField != null) |
| { |
| selectedFields.Add(tmpField); |
| availableFields.Remove(tmpField); |
| } |
| } |
| SelectedFields = selectedFields; |
| AvailableFields = availableFields; |
| uxRadGridAvailable.Rebind(); |
| uxRadGridSelected.Rebind(); |
| } |
| else if (e.DestDataItem != null && e.DestDataItem.OwnerGridID == uxRadGridAvailable.ClientID) |
| { |
| //reorder items in available grid |
| IList<Field> availableFields = AvailableFields; |
| Field field = GetField(availableFields, (string)e.DestDataItem.GetDataKeyValue("assetID")); |
| int destinationIndex = availableFields.IndexOf(field); |
| List<Field> fieldsToMove = new List<Field>(); |
| foreach (GridDataItem draggedItem in e.DraggedItems) |
| { |
| Field tmpField = GetField(availableFields, (string)draggedItem.GetDataKeyValue("assetID")); |
| if (tmpField != null) |
| fieldsToMove.Add(tmpField); |
| } |
| foreach (Field fieldToMove in fieldsToMove) |
| { |
| availableFields.Remove(fieldToMove); |
| availableFields.Insert(destinationIndex, fieldToMove); |
| } |
| AvailableFields = availableFields; |
| uxRadGridAvailable.Rebind(); |
| e.DestDataItem.Selected = true; |
| } |
| } |
| } |
| } |
| private void DropRowSelectedGrid(GridDragDropEventArgs e) |
| { |
| if (string.IsNullOrEmpty(e.HtmlElement)) |
| { |
| if (e.DraggedItems[0].OwnerGridID == uxRadGridSelected.ClientID) |
| { |
| // items are drag from selected to available grid |
| if ((e.DestDataItem == null && AvailableFields.Count == 0) || |
| e.DestDataItem != null && e.DestDataItem.OwnerGridID == uxRadGridAvailable.ClientID) |
| { |
| IList<Field> availableFields = AvailableFields; |
| IList<Field> selectedFields = SelectedFields; |
| foreach (GridDataItem draggedItem in e.DraggedItems) |
| { |
| Field tmpField = GetField(selectedFields, (string)draggedItem.GetDataKeyValue("assetID")); |
| if (tmpField != null) |
| { |
| availableFields.Add(tmpField); |
| selectedFields.Remove(tmpField); |
| } |
| } |
| AvailableFields = availableFields; |
| SelectedFields = selectedFields; |
| uxRadGridSelected.Rebind(); |
| uxRadGridAvailable.Rebind(); |
| } |
| else if (e.DestDataItem != null && e.DestDataItem.OwnerGridID == uxRadGridSelected.ClientID) |
| { |
| //reorder items in selected grid |
| IList<Field> selectedFields = SelectedFields; |
| Field field = GetField(selectedFields, (string)e.DestDataItem.GetDataKeyValue("assetID")); |
| int destinationIndex = selectedFields.IndexOf(field); |
| List<Field> fieldsToMove = new List<Field>(); |
| foreach (GridDataItem draggedItem in e.DraggedItems) |
| { |
| Field tmpField = GetField(selectedFields, (string)draggedItem.GetDataKeyValue("assetID")); |
| if (tmpField != null) |
| fieldsToMove.Add(tmpField); |
| } |
| foreach (Field fieldToMove in fieldsToMove) |
| { |
| selectedFields.Remove(fieldToMove); |
| selectedFields.Insert(destinationIndex, fieldToMove); |
| } |
| AvailableFields = selectedFields; |
| uxRadGridSelected.Rebind(); |
| e.DestDataItem.Selected = true; |
| } |
| } |
| } |
| } |
| private static Field GetField(IEnumerable<Field> fieldsToSearchIn, string fieldName) |
| { |
| foreach (Field field in fieldsToSearchIn) |
| { |
| if (field.assetID == fieldName) |
| { |
| return field; |
| } |
| } |
| return null; |
| } |
| #endregion |
| #region Nested type: Field |
| protected class Field |
| { |
| private string _assetID; |
| private string _category; |
| private string _type; |
| public Field(string assetID, string category, string type) |
| { |
| _assetID = assetID; |
| _category = category; |
| _type = type; |
| } |
| public string assetID |
| { |
| get { return _assetID; } |
| } |
| public string category |
| { |
| get { return _category; } |
| } |
| public string type |
| { |
| get { return _type; } |
| } |
| } |
| #endregion |
| } |
| } |
1 Answer, 1 is accepted
0
Hello Bailey,
The reason drag items to be added always at the bottom is that in your logic which handles the AvailableGrid drop event, the dragged item is always added to the end of the collection instead of inserting it at the correct position. Please refer to this online example for a working demo of how to implement inserting functionality.
As to your other issue it seems that in DropRowSelectedGrid you are assigning selectedFields to
AvailableFields.
Regards,
Rosen
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
The reason drag items to be added always at the bottom is that in your logic which handles the AvailableGrid drop event, the dragged item is always added to the end of the collection instead of inserting it at the correct position. Please refer to this online example for a working demo of how to implement inserting functionality.
As to your other issue it seems that in DropRowSelectedGrid you are assigning selectedFields to
AvailableFields.
Regards,
Rosen
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.