Example E2636
Visible to All Users

Grid View for ASP.NET Web Forms - How to move selected rows between grid controls

This example demonstrates how to move selected rows from one grid to another on a custom button click and update data sources on the server.

Move selected grid rows

Overview

Create two grid controls and add custom moving buttons to the page. Use the client-side PerformCallback method to send custom callbacks to the server when a user clicks the corresponding button. Based on an action, create a command and pass it as a parameter.

JavaScript
var command = null; function AddSelectedRows() { command = 'addSelectedRows'; UpdateTargetGrid(); } function UpdateTargetGrid() { if (command != null) targetGrid.PerformCallback(command); else { targetGrid.Refresh(); } }

On the server, the PerformCallback method raises the CustomCallback event. In the CustomCallback event handler, call the GetSelectedFieldValues method to obtain the selected rows. Update the data sources of the grids based on the command passed to the server.

C#
protected void TargetGrid_CustomCallback(object sender, DevExpress.Web.ASPxGridViewCustomCallbackEventArgs e) { rowValues = new List<object>(); switch (e.Parameters) { case "addSelectedRows": rowValues = SourceGrid.GetSelectedFieldValues(fieldNames); var categoryIDs = new StringBuilder(); for (int i = 0; i < rowValues.Count(); i++) { var categoryID = (rowValues[i] as object[])[0]; if (i < rowValues.Count() - 1) categoryIDs.AppendFormat("{0}, ", categoryID); else categoryIDs.Append(categoryID); } if (categoryIDs.Length > 0) { SourceDS.DeleteCommand = string.Format("DELETE FROM [Categories] WHERE [CategoryID] IN ({0})", categoryIDs); SourceDS.Delete(); foreach (object[] rowValue in rowValues) { TargetDS.InsertCommand = string.Format( "INSERT INTO [CategoriesUpdated] ([CategoryID], [CategoryName], [Description]) VALUES ({0}, '{1}', '{2}')", rowValue[0], rowValue[1], rowValue[2]); TargetDS.Insert(); } TargetGrid.DataBind(); } break; // ... } }

Files to Review

Documentation

More Examples

Example Code

E2636/Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="E2636.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .container { display: table; } .contentButtons { padding-top:20px; padding-bottom:10px; } .button { width:100% !important; } @media(min-width:790px) { .contentEditors, .contentButtons { display: table-cell; width: 33.33333333%; } .button { width:170px !important; } .contentEditors { vertical-align: top; } .contentButtons { vertical-align: middle; text-align: center; } } </style> <script type="text/javascript"> var command = null; function AddSelectedRows() { command = 'addSelectedRows'; UpdateTargetGrid(); } function AddAllRows() { command = 'addAllRows'; UpdateTargetGrid(); } function RemoveSelectedRows() { command = 'removeSelectedRows'; UpdateSourceGrid(); } function RemoveAllRows() { command = 'removeAllRows'; UpdateSourceGrid(); } function UpdateSourceGrid() { if (command != null) sourceGrid.PerformCallback(command); else sourceGrid.Refresh(); } function UpdateTargetGrid() { if (command != null) targetGrid.PerformCallback(command); else { targetGrid.Refresh(); } } function UpdateButtonState() { btnMoveAllItemsToRight.SetEnabled(sourceGrid.GetVisibleRowsOnPage() > 0); btnMoveAllItemsToLeft.SetEnabled(targetGrid.GetVisibleRowsOnPage() > 0); btnMoveSelectedItemsToRight.SetEnabled(sourceGrid.GetSelectedRowCount() > 0); btnMoveSelectedItemsToLeft.SetEnabled(targetGrid.GetSelectedRowCount() > 0); } function onControlsInitialized(s, e) { switch (command) { case 'addSelectedRows': case 'addAllRows': command = null; UpdateSourceGrid(); break; case 'removeSelectedRows': case 'removeAllRows': command = null; UpdateTargetGrid(); break; default: UpdateButtonState(); } } </script> </head> <body> <form id="form1" runat="server"> <dx:ASPxGlobalEvents ID="GlobalEvents" runat="server"> <ClientSideEvents ControlsInitialized="onControlsInitialized" /> </dx:ASPxGlobalEvents> <div class="container"> <div class="contentEditors"> <dx:ASPxGridView ID="SourceGrid" ClientInstanceName="sourceGrid" runat="server" AutoGenerateColumns="false" KeyFieldName="CategoryID" DataSourceID="SourceDS" OnCustomCallback="SourceGrid_CustomCallback"> <Columns> <dx:GridViewCommandColumn ShowSelectCheckbox="True" /> <dx:GridViewDataTextColumn FieldName="CategoryName" /> <dx:GridViewDataTextColumn FieldName="Description" /> </Columns> <SettingsBehavior AllowSelectByRowClick="true" /> <ClientSideEvents SelectionChanged="function(s, e) { UpdateButtonState(); }" /> </dx:ASPxGridView> <asp:AccessDataSource ID="SourceDS" runat="server" DataFile="~/App_Data/nwindNew.mdb" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"> </asp:AccessDataSource> </div> <div class="contentButtons"> <div> <dx:ASPxButton ID="btnMoveSelectedItemsToRight" runat="server" ClientInstanceName="btnMoveSelectedItemsToRight" CssClass="button" AutoPostBack="False" Text="Add >" ClientEnabled="False" ToolTip="Add selected items"> <ClientSideEvents Click="function(s, e) { AddSelectedRows(); }" /> </dx:ASPxButton> </div> <div> <dx:ASPxButton ID="btnMoveAllItemsToRight" runat="server" ClientInstanceName="btnMoveAllItemsToRight" CssClass="button" AutoPostBack="False" Text="Add All >>" ToolTip="Add all items"> <ClientSideEvents Click="function(s, e) { AddAllRows(); }" /> </dx:ASPxButton> </div> <div style="height: 32px"> </div> <div> <dx:ASPxButton ID="btnMoveSelectedItemsToLeft" runat="server" ClientInstanceName="btnMoveSelectedItemsToLeft" CssClass="button" AutoPostBack="False" Text="< Remove" ClientEnabled="False" ToolTip="Remove selected items"> <ClientSideEvents Click="function(s, e) { RemoveSelectedRows(); }" /> </dx:ASPxButton> </div> <div> <dx:ASPxButton ID="btnMoveAllItemsToLeft" runat="server" ClientInstanceName="btnMoveAllItemsToLeft" CssClass="button" AutoPostBack="False" Text="<< Remove All" ClientEnabled="False" ToolTip="Remove all items"> <ClientSideEvents Click="function(s, e) { RemoveAllRows(); }" /> </dx:ASPxButton> </div> <div style="height: 32px"> </div> <div> <dx:ASPxButton ID="btnRestore" runat="server" Text="Restore Database" OnClick="btnRestore_Click"> </dx:ASPxButton> </div> </div> <div class="contentEditors"> <dx:ASPxGridView ID="TargetGrid" runat="server" ClientInstanceName="targetGrid" AutoGenerateColumns="false" KeyFieldName="CategoryID" DataSourceID="TargetDS" OnCustomCallback="TargetGrid_CustomCallback"> <Columns> <dx:GridViewCommandColumn ShowSelectCheckbox="True" /> <dx:GridViewDataTextColumn FieldName="CategoryName" /> <dx:GridViewDataTextColumn FieldName="Description" /> </Columns> <SettingsBehavior AllowSelectByRowClick="true" /> <ClientSideEvents SelectionChanged="function(s, e) { UpdateButtonState(); }" /> </dx:ASPxGridView> <asp:AccessDataSource ID="TargetDS" runat="server" DataFile="~/App_Data/nwindNew.mdb" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [CategoriesUpdated]"> </asp:AccessDataSource> </div> </div> </form> </body> </html>
E2636/Default.aspx.cs(vb)
C#
using DevExpress.Web; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace E2636 { public partial class Default : System.Web.UI.Page { private string[] fieldNames = new string[] { "CategoryID", "CategoryName", "Description" }; List<object> rowValues = null; protected void Page_Load(object sender, EventArgs e) { } protected void TargetGrid_CustomCallback(object sender, DevExpress.Web.ASPxGridViewCustomCallbackEventArgs e) { rowValues = new List<object>(); switch (e.Parameters) { case "addSelectedRows": rowValues = SourceGrid.GetSelectedFieldValues(fieldNames); var categoryIDs = new StringBuilder(); for (int i = 0; i < rowValues.Count(); i++) { var categoryID = (rowValues[i] as object[])[0]; if (i < rowValues.Count() - 1) categoryIDs.AppendFormat("{0}, ", categoryID); else categoryIDs.Append(categoryID); } if (categoryIDs.Length > 0) { SourceDS.DeleteCommand = string.Format("DELETE FROM [Categories] WHERE [CategoryID] IN ({0})", categoryIDs); SourceDS.Delete(); foreach (object[] rowValue in rowValues) { TargetDS.InsertCommand = string.Format( "INSERT INTO [CategoriesUpdated] ([CategoryID], [CategoryName], [Description]) VALUES ({0}, '{1}', '{2}')", rowValue[0], rowValue[1], rowValue[2]); TargetDS.Insert(); } TargetGrid.DataBind(); } break; case "addAllRows": for (int i = 0; i < SourceGrid.VisibleRowCount; i++) rowValues.Add(SourceGrid.GetRowValues(i, fieldNames)); if (rowValues.Count > 0) { SourceDS.DeleteCommand = "DELETE * FROM [Categories]"; SourceDS.Delete(); foreach (object[] rowValue in rowValues) { TargetDS.InsertCommand = string.Format( "INSERT INTO [CategoriesUpdated] ([CategoryID], [CategoryName], [Description]) VALUES ({0}, '{1}', '{2}')", rowValue[0], rowValue[1], rowValue[2]); TargetDS.Insert(); } TargetGrid.DataBind(); } break; } } protected void SourceGrid_CustomCallback(object sender, DevExpress.Web.ASPxGridViewCustomCallbackEventArgs e) { rowValues = new List<object>(); switch (e.Parameters) { case "removeSelectedRows": rowValues = TargetGrid.GetSelectedFieldValues(fieldNames); var categoryIDs = new StringBuilder(); for (int i = 0; i < rowValues.Count(); i++) { var categoryID = (rowValues[i] as object[])[0]; if (i < rowValues.Count() - 1) categoryIDs.AppendFormat("{0}, ", categoryID); else categoryIDs.Append(categoryID); } if (categoryIDs.Length > 0) { TargetDS.DeleteCommand = string.Format("DELETE FROM [CategoriesUpdated] WHERE [CategoryID] IN ({0})", categoryIDs); TargetDS.Delete(); foreach (object[] rowValue in rowValues) { SourceDS.InsertCommand = string.Format( "INSERT INTO [Categories] ([CategoryID], [CategoryName], [Description]) VALUES ({0}, '{1}', '{2}')", rowValue[0], rowValue[1], rowValue[2]); SourceDS.Insert(); } SourceGrid.DataBind(); } break; case "removeAllRows": for (int i = 0; i < TargetGrid.VisibleRowCount; i++) rowValues.Add(TargetGrid.GetRowValues(i, fieldNames)); if (rowValues.Count > 0) { TargetDS.DeleteCommand = "DELETE * FROM [CategoriesUpdated]"; TargetDS.Delete(); foreach (object[] rowValue in rowValues) { SourceDS.InsertCommand = string.Format( "INSERT INTO [Categories] ([CategoryID], [CategoryName], [Description]) VALUES ({0}, '{1}', '{2}')", rowValue[0], rowValue[1], rowValue[2]); SourceDS.Insert(); } SourceGrid.DataBind(); } break; } } protected void btnRestore_Click(object sender, EventArgs e) { File.Copy( Server.MapPath("~/App_Data/nwindNew_backup.mdb"), Server.MapPath("~/App_Data/nwindNew.mdb"), true); SourceGrid.DataBind(); SourceGrid.Selection.UnselectAll(); TargetGrid.DataBind(); TargetGrid.Selection.UnselectAll(); } } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.