Bailey Everitt
Top achievements
Rank 1
Rank 1
Bailey Everitt
asked on 02 Apr 2009, 03:37 PM
Hi Everyone,
I have two grids, one on the right and one on the left and I've implemented drag and drop functionality. The actual dragging and dropping works fine, however, the initial data that is loaded into the "Available" grid isn't correct. Instead of the values that are returned from my dataset, I'm receiving [ProjectName].[PageName]+Field listed in each row of the table (screenshot of the page: http://img164.imageshack.us/img164/1317/screenshotg.jpg)
My code is below, any help is greatly appreciated.
I have two grids, one on the right and one on the left and I've implemented drag and drop functionality. The actual dragging and dropping works fine, however, the initial data that is loaded into the "Available" grid isn't correct. Instead of the values that are returned from my dataset, I'm receiving [ProjectName].[PageName]+Field listed in each row of the table (screenshot of the page: http://img164.imageshack.us/img164/1317/screenshotg.jpg)
My code is below, any help is greatly appreciated.
| <%@ 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"> |
| <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"> |
| <telerik:RadPane ID="uxRadePaneLeft" runat="server"> |
| <telerik:RadGrid runat="server" ID="uxRadGridAvailable" Skin="WebBlue" 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"> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px" /> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| <Columns> |
| <telerik:GridBoundColumn HeaderText="Equipment ID" UniqueName="column"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Category" UniqueName="column"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Type" UniqueName="column"></telerik:GridBoundColumn> |
| </Columns> |
| </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="WebBlue" 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"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Category"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="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> |
| 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) |
| { |
| 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)); |
| } |
| } |
| } |
| 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
Bailey Everitt
Top achievements
Rank 1
Rank 1
answered on 02 Apr 2009, 07:51 PM
Problem Fixed: I needed to specify the DataField