I'm attempting to modify your drag & drop grid sample to allow dropping back and forth between both grids rather than just allowing drag from one grid to the other. I can get it to work dragging from the left to the right grid, but when I attempt to drag from the right to the left, the row is removed from the right grid, but does not show up in the left until I do a refresh of the page.
Modified JavaScript:
Grids:
C# code(I have commented out the sql query that populates grdAvailable and hard-coded 2 rows, eventually I will need to query to populate both grids):
Modified JavaScript:
function onRowDropping(sender, args) { |
debugger; |
if (sender.get_id() == '<%=grdAvailable.ClientID %>') |
{ |
var node = args.get_destinationHtmlElement(); |
if(!isChildOf('<%=grdSelected.ClientID %>', node) && !isChildOf('<%=grdAvailable.ClientID %>', node) ) |
{ |
args.set_cancel(true); |
} |
} |
if (sender.get_id() == '<%=grdSelected.ClientID %>') |
{ |
var node = args.get_destinationHtmlElement(); |
if(!isChildOf('<%=grdAvailable.ClientID %>', node) && !isChildOf('<%=grdSelected.ClientID %>', node) ) |
{ |
args.set_cancel(true); |
} |
} |
} |
Grids:
<table> |
<tr> |
<td style="width: 100%; padding-left: 5px; padding-right: 5px;"> |
<div style="float: left; padding: 0 6px 0 10px"> |
<h2> |
Available</h2> |
<telerik:RadGrid runat="server" ID="grdAvailable" Skin="Office2007" OnNeedDataSource="grdAvailable_NeedDataSource" |
Width="550px" AllowMultiRowSelection="true" AutoGenerateColumns="false" OnRowDrop="grdAvailable_RowDrop"> |
<MasterTableView DataKeyNames="fieldname" Width="95%" TableLayout="Fixed"> |
<Columns> |
<telerik:GridBoundColumn HeaderText="Field Name"></telerik:GridBoundColumn> |
<telerik:GridBoundColumn HeaderText="Column Description"></telerik:GridBoundColumn> |
<telerik:GridBoundColumn HeaderText="Column Width"></telerik:GridBoundColumn> |
</Columns> |
</MasterTableView> |
<ClientSettings AllowRowsDragDrop="True"> |
<Selecting AllowRowSelect="True" EnableDragToSelectRows="true" /> |
<ClientEvents OnRowDropping="onRowDropping" /> |
<Scrolling AllowScroll="true" UseStaticHeaders="true" /> |
</ClientSettings> |
<PagerStyle Mode="NextPrevAndNumeric" /> |
</telerik:RadGrid> |
</div> |
</td> |
<td valign="top"> |
<div style="float: right; padding: 0 10px 0 6px"> |
<h2> |
Selected</h2> |
<telerik:RadGrid runat="server" ID="grdSelected" Skin="Office2007" OnNeedDataSource="grdSelected_NeedDataSource" |
Width="550px" AllowMultiRowSelection="true" AutoGenerateColumns="false" OnRowDrop="grdSelected_RowDrop"> |
<MasterTableView DataKeyNames="fieldname" Width="100%"> |
<Columns> |
<telerik:GridBoundColumn HeaderText="Field Name"></telerik:GridBoundColumn> |
<telerik:GridBoundColumn HeaderText="Column Description"></telerik:GridBoundColumn> |
<telerik:GridBoundColumn HeaderText="Column Width"></telerik:GridBoundColumn> |
</Columns> |
</MasterTableView> |
<ClientSettings AllowRowsDragDrop="True"> |
<Selecting AllowRowSelect="True" EnableDragToSelectRows="true" /> |
<ClientEvents OnRowDropping="onRowDropping" /> |
</ClientSettings> |
</telerik:RadGrid> |
</div> |
<div style="clear: both;"> |
<!-- --> |
</div> |
</td> |
</tr> |
</table> |
C# code(I have commented out the sql query that populates grdAvailable and hard-coded 2 rows, eventually I will need to query to populate both grids):
protected void grdAvailable_NeedDataSource(object source, GridNeedDataSourceEventArgs e) |
{ |
grdAvailable.DataSource = AvailableFields; |
} |
protected void grdSelected_NeedDataSource(object source, GridNeedDataSourceEventArgs e) |
{ |
grdSelected.DataSource = SelectedFields; |
} |
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() |
{ |
IList<Field> results = new List<Field>(); |
//using (IDbConnection connection = DbProviderFactories.GetFactory("System.Data.SqlClient").CreateConnection()) |
//{ |
// connection.ConnectionString = |
// ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString; |
// using (IDbCommand command = connection.CreateCommand()) |
// { |
// command.CommandText = |
// "SELECT o.OrderID, o.CustomerID, o.RequiredDate, c.CompanyName FROM orders o INNER JOIN customers c on o.customerID = c.customerID"; |
// connection.Open(); |
// try |
// { |
// IDataReader reader = command.ExecuteReader(); |
// while (reader.Read()) |
// { |
// string fieldName = (!reader.IsDBNull(reader.GetOrdinal("fieldname"))) |
// ? (string)reader.GetValue(reader.GetOrdinal("CustomerID")) |
// : string.Empty; |
// string description = (!reader.IsDBNull(reader.GetOrdinal("description"))) |
// ? (string)reader.GetValue(reader.GetOrdinal("RequiredDate")) |
// : string.Empty; |
// string width = (!reader.IsDBNull(reader.GetOrdinal("width"))) |
// ? (string)reader.GetValue(reader.GetOrdinal("CompanyName")) |
// : string.Empty; |
results.Add(new Field("jobid", "Ticket", "150")); |
results.Add(new Field("status", "S", "150")); |
// } |
// } |
// catch |
// { |
// results.Clear(); |
// } |
// } |
//} |
return results; |
} |
protected void grdAvailable_RowDrop(object sender, GridDragDropEventArgs e) |
{ |
if (string.IsNullOrEmpty(e.HtmlElement)) |
{ |
if (e.DraggedItems[0].OwnerGridID == grdAvailable.ClientID) |
{ |
// items are drag from available to selected grid |
if ((e.DestDataItem == null && SelectedFields.Count == 0) || |
e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdSelected.ClientID) |
{ |
IList<Field> selectedFields = SelectedFields; |
IList<Field> availableFields = AvailableFields; |
foreach (GridDataItem draggedItem in e.DraggedItems) |
{ |
Field tmpField = GetField(availableFields, (string)draggedItem.GetDataKeyValue("fieldname")); |
if (tmpField != null) |
{ |
selectedFields.Add(tmpField); |
availableFields.Remove(tmpField); |
} |
} |
SelectedFields = selectedFields; |
AvailableFields = availableFields; |
grdAvailable.Rebind(); |
grdSelected.Rebind(); |
} |
else if (e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdAvailable.ClientID) |
{ |
//reorder items in available grid |
IList<Field> availableFields = AvailableFields; |
Field field = GetField(availableFields, (string)e.DestDataItem.GetDataKeyValue("fieldname")); |
int destinationIndex = availableFields.IndexOf(field); |
List<Field> fieldsToMove = new List<Field>(); |
foreach (GridDataItem draggedItem in e.DraggedItems) |
{ |
Field tmpField = GetField(availableFields, (string)draggedItem.GetDataKeyValue("fieldname")); |
if (tmpField != null) |
fieldsToMove.Add(tmpField); |
} |
foreach (Field fieldToMove in fieldsToMove) |
{ |
availableFields.Remove(fieldToMove); |
availableFields.Insert(destinationIndex, fieldToMove); |
} |
AvailableFields = availableFields; |
grdAvailable.Rebind(); |
e.DestDataItem.Selected = true; |
} |
} |
} |
} |
private static Field GetField(IEnumerable<Field> fieldsToSearchIn, string fieldName) |
{ |
foreach (Field field in fieldsToSearchIn) |
{ |
if (field.fieldName == fieldName) |
{ |
return field; |
} |
} |
return null; |
} |
protected void grdSelected_RowDrop(object sender, GridDragDropEventArgs e) |
{ |
if (string.IsNullOrEmpty(e.HtmlElement)) |
{ |
if (e.DraggedItems[0].OwnerGridID == grdSelected.ClientID) |
{ |
// items are drag from selected to available grid |
if ((e.DestDataItem == null && AvailableFields.Count == 0) || |
e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdAvailable.ClientID) |
{ |
IList<Field> availableFields = AvailableFields; |
IList<Field> selectedFields = SelectedFields; |
foreach (GridDataItem draggedItem in e.DraggedItems) |
{ |
Field tmpField = GetField(selectedFields, (string)draggedItem.GetDataKeyValue("fieldname")); |
if (tmpField != null) |
{ |
availableFields.Add(tmpField); |
selectedFields.Remove(tmpField); |
} |
} |
AvailableFields = availableFields; |
SelectedFields = selectedFields; |
grdSelected.Rebind(); |
grdAvailable.Rebind(); |
} |
else if (e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdSelected.ClientID) |
{ |
//reorder items in selected grid |
IList<Field> selectedFields = SelectedFields; |
Field field = GetField(selectedFields, (string)e.DestDataItem.GetDataKeyValue("fieldname")); |
int destinationIndex = selectedFields.IndexOf(field); |
List<Field> fieldsToMove = new List<Field>(); |
foreach (GridDataItem draggedItem in e.DraggedItems) |
{ |
Field tmpField = GetField(selectedFields, (string)draggedItem.GetDataKeyValue("fieldname")); |
if (tmpField != null) |
fieldsToMove.Add(tmpField); |
} |
foreach (Field fieldToMove in fieldsToMove) |
{ |
selectedFields.Remove(fieldToMove); |
selectedFields.Insert(destinationIndex, fieldToMove); |
} |
AvailableFields = selectedFields; |
grdSelected.Rebind(); |
e.DestDataItem.Selected = true; |
} |
} |
} |
} |
#region Nested type: Field |
protected class Field |
{ |
private string _fieldName; |
private string _description; |
private string _width; |
public Field(string fieldName, string description, string width) |
{ |
_fieldName = fieldName; |
_description = description; |
_width = width; |
} |
public string fieldName |
{ |
get { return _fieldName; } |
} |
public string description |
{ |
get { return _description; } |
} |
public string width |
{ |
get { return _width; } |
} |
} |
#endregion |