This example demonstrates how to add a grid lookup control in multiple selection mode to the grid's edit form template.
Overview
When the ASPxGridLookup control is in multiple selection mode (the GridLookup.SelectionMode property is set to Multiple
), use the following API members to access the selected items:
- The grid's ASPxGridBase.GetSelectedFieldValues method to get the selected field values.
- The grid's ASPxGridView.Selection property to select items.
ASPx<dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="False" KeyFieldName="ID" ... >
<Columns>
<!-- ... -->
<dx:GridViewDataColumn FieldName="TagIDs">
<EditItemTemplate>
<dx:ASPxGridLookup ID="Lookup" runat="server" AutoGenerateColumns="false" DataSourceID="LookupDataSource"
KeyFieldName="ID" SelectionMode="Multiple" OnInit="Lookup_Init" TextFormatString="{1}">
<Columns>
<dx:GridViewCommandColumn ShowSelectCheckbox="true" VisibleIndex="0" />
<!-- ... -->
</Columns>
</dx:ASPxGridLookup>
</EditItemTemplate>
</dx:GridViewDataColumn>
</Columns>
<SettingsEditing EditFormColumnCount="1" Mode="PopupEditForm" PopupEditFormWidth="200" />
</dx:ASPxGridView>
C#protected void Lookup_Init(object sender, EventArgs e) {
var lookup = (ASPxGridLookup)sender;
var container = (GridViewEditItemTemplateContainer)lookup.NamingContainer;
if (container.Grid.IsNewRowEditing)
return;
var tagIDs = (int[])container.Grid.GetRowValues(container.VisibleIndex, container.Column.FieldName);
if(tagIDs != null) {
foreach(var tagID in tagIDs)
lookup.GridView.Selection.SelectRowByKey(tagID);
}
}
private int[] GetTags() {
var column = (GridViewDataColumn)Grid.Columns["TagIDs"];
var lookup = (ASPxGridLookup)Grid.FindEditRowCellTemplateControl(column, "Lookup");
var tags = lookup.GridView.GetSelectedFieldValues(lookup.KeyFieldName) as List<object>;
return tags.Select(t => (int)t).ToArray();
}
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
More Examples
- Grid View for ASP.NET MVC - How to use a grid lookup control in single selection mode to edit grid data
- Grid View for ASP.NET MVC - How to use a grid lookup control in multiple selection mode to edit grid data
Example Code
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!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>How to use ASPxGridLookup in multiple selection mode as the ASPxGridView editor</title>
</head>
<body>
<form id="form1" runat="server">
<dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="False" DataSourceID="GridDataSource"
KeyFieldName="ID" OnCustomColumnDisplayText="Grid_CustomColumnDisplayText" OnRowUpdating="Grid_RowUpdating"
OnRowInserting="Grid_RowInserting">
<Columns>
<dx:GridViewCommandColumn ShowEditButton="true" ShowNewButton="True" ShowDeleteButton="True"/>
<dx:GridViewDataColumn FieldName="ID">
<EditFormSettings Visible="False" />
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="TagIDs">
<EditItemTemplate>
<dx:ASPxGridLookup ID="Lookup" runat="server" AutoGenerateColumns="false" DataSourceID="LookupDataSource"
KeyFieldName="ID" SelectionMode="Multiple" OnInit="Lookup_Init" TextFormatString="{1}">
<GridViewStyles>
<FocusedRow BackColor="#F16A39" />
</GridViewStyles>
<Columns>
<dx:GridViewCommandColumn ShowSelectCheckbox="true" VisibleIndex="0">
</dx:GridViewCommandColumn>
<dx:GridViewDataTextColumn FieldName="ID" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Name" VisibleIndex="1">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridLookup>
</EditItemTemplate>
</dx:GridViewDataColumn>
</Columns>
<SettingsEditing EditFormColumnCount="1" Mode="PopupEditForm" PopupEditFormWidth="200" />
</dx:ASPxGridView>
<asp:ObjectDataSource ID="GridDataSource" runat="server" TypeName="DataProvider"
DataObjectTypeName="GridDataItem" SelectMethod="GetGridData" InsertMethod="InsertGrid"
UpdateMethod="UpdateGrid" DeleteMethod="DeleteGrid" />
<asp:ObjectDataSource ID="LookupDataSource" runat="server" TypeName="DataProvider"
SelectMethod="GetTags" />
</form>
</body>
</html>
C#using System;
using System.Collections.Generic;
using System.Linq;
using DevExpress.Web;
using DevExpress.Web.Data;
public partial class _Default : System.Web.UI.Page {
protected void Grid_CustomColumnDisplayText(object sender, ASPxGridViewColumnDisplayTextEventArgs e) {
if(e.Column.FieldName == "TagIDs") {
var tagIDs = (int[])e.Value;
var text = DataProvider.GetTags().Where(t => tagIDs.Contains(t.ID)).
Select(t => t.Name).DefaultIfEmpty().Aggregate((a, b) => a + ", " + b);
e.DisplayText = text ?? string.Empty;
}
}
protected void Grid_RowInserting(object sender, ASPxDataInsertingEventArgs e) {
e.NewValues["TagIDs"] = GetTags();
}
protected void Grid_RowUpdating(object sender, ASPxDataUpdatingEventArgs e) {
e.NewValues["TagIDs"] = GetTags();
}
protected void Lookup_Init(object sender, EventArgs e) {
var lookup = (ASPxGridLookup)sender;
var container = (GridViewEditItemTemplateContainer)lookup.NamingContainer;
if (container.Grid.IsNewRowEditing)
return;
var tagIDs = (int[])container.Grid.GetRowValues(container.VisibleIndex, container.Column.FieldName);
if(tagIDs != null) {
foreach(var tagID in tagIDs)
lookup.GridView.Selection.SelectRowByKey(tagID);
}
}
private int[] GetTags() {
var column = (GridViewDataColumn)Grid.Columns["TagIDs"];
var lookup = (ASPxGridLookup)Grid.FindEditRowCellTemplateControl(column, "Lookup");
var tags = lookup.GridView.GetSelectedFieldValues(lookup.KeyFieldName) as List<object>;
return tags.Select(t => (int)t).ToArray();
}
}