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.
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.
JavaScriptvar 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
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
More Examples
- Grid View for ASP.NET Web Forms - How to Delete Selected Rows in a Grid
- Grid View for ASP.NET MVC - How to copy selected rows from one grid to another in batch edit mode
Example Code
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>
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();
}
}
}