Example E4521
Visible to All Users

Grid View for ASP.NET Web Forms - How to implement a filter row template and use ASPxGridLookup as an editor

This example demonstrates how to create a column's filter row template, add the ASPxGridLookup control to the template, and configure the column's filter functionality.

FilterRowTemplate

Overview

  1. Create the Grid View control, populate it with columns, and bind it to a data source. Set the grid's ShowFilterRow property to true to show the filter row.
    ASPx
    <dx:ASPxGridView runat="server" ID="Grid" AutoGenerateColumns="False" DataSourceID="ProductsDataSource" ClientInstanceName="grid" OnCustomCallback="Grid_CustomCallback" EnableViewState="false"> <Columns> <dx:GridViewDataTextColumn FieldName="CategoryName"> <!-- ... --> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="ProductName" /> <dx:GridViewDataTextColumn FieldName="ProductSales" /> <dx:GridViewDataDateColumn FieldName="ShippedDate" /> </Columns> <Settings ShowFilterRow="true" /> </dx:ASPxGridView>
  2. Specify a column's FilterTemplate property, add an ASPxGridLookup editor to the template, populate the editor with columns, and bind it to a data source.
    ASPx
    <dx:GridViewDataTextColumn FieldName="CategoryName"> <FilterTemplate> <dx:ASPxGridLookup runat="server" ID="Lookup" AutoGenerateColumns="False" KeyFieldName="CategoryID" DataSourceID="CategoriesDataSource" SelectionMode="Multiple" TextFormatString="{0}"> <Columns> <dx:GridViewCommandColumn ShowSelectCheckbox="true" /> <dx:GridViewDataTextColumn FieldName="CategoryName" /> <dx:GridViewDataBinaryImageColumn FieldName="Picture"> <PropertiesBinaryImage ImageWidth="48" /> </dx:GridViewDataBinaryImageColumn> </Columns> <ClientSideEvents ValueChanged="Lookup_ValueChanged" /> </dx:ASPxGridLookup> </FilterTemplate> </dx:GridViewDataTextColumn>
  3. Handle the editor's client-side ValueChanged event. In the handler, call the grid's client-side PerformCallback method to send a callback to the server.
    JavaScript
    function Lookup_ValueChanged(s, e) { grid.PerformCallback("FilterByCategories"); }
  4. Handle the grid's server-side CustomCallback event. In the handler, create custom filter criteria based on the edit value and call the grid's ApplyFilterToColumn method to apply the filter criteria to the grid.
    C#
    protected void Grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) { if(e.Parameters == "FilterByCategories") { var column = Grid.DataColumns["CategoryName"]; var lookup = Grid.FindFilterCellTemplateControl(column, "Lookup") as ASPxGridLookup; if(lookup != null) Grid.ApplyFilterToColumn(column, CreateCriteria(lookup, column.FieldName)); } } protected CriteriaOperator CreateCriteria(ASPxGridLookup gridLookup, string fieldName) { var values = gridLookup.GridView.GetSelectedFieldValues(fieldName); return values.Count > 0 ? new InOperator(fieldName, values) : null; }

Files to Review

Documentation

Example Code

WebSite/Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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> <script type="text/javascript"> function Lookup_ValueChanged(s, e) { grid.PerformCallback("FilterByCategories"); } </script> </head> <body> <form id="form1" runat="server"> <div style="max-width: 960px"> <dx:ASPxGridView runat="server" ID="Grid" AutoGenerateColumns="False" DataSourceID="ProductsDataSource" ClientInstanceName="grid" OnCustomCallback="Grid_CustomCallback" EnableViewState="false"> <Columns> <dx:GridViewDataTextColumn FieldName="CategoryName"> <FilterTemplate> <dx:ASPxGridLookup runat="server" ID="Lookup" AutoGenerateColumns="False" DataSourceID="CategoriesDataSource" KeyFieldName="CategoryID" SelectionMode="Multiple" TextFormatString="{0}"> <Columns> <dx:GridViewCommandColumn ShowSelectCheckbox="true" /> <dx:GridViewDataTextColumn FieldName="CategoryName" /> <dx:GridViewDataBinaryImageColumn FieldName="Picture"> <PropertiesBinaryImage ImageWidth="48" /> </dx:GridViewDataBinaryImageColumn> </Columns> <ClientSideEvents ValueChanged="Lookup_ValueChanged" /> </dx:ASPxGridLookup> </FilterTemplate> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="ProductName" /> <dx:GridViewDataTextColumn FieldName="ProductSales" /> <dx:GridViewDataDateColumn FieldName="ShippedDate" /> </Columns> <Settings ShowFilterRow="true" /> </dx:ASPxGridView> <asp:AccessDataSource ID="ProductsDataSource" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT * FROM [ProductReports]" /> <asp:AccessDataSource ID="CategoriesDataSource" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT * FROM [Categories]" /> </div> </form> </body> </html>
WebSite/Default.aspx.cs(vb)
C#
using DevExpress.Data.Filtering; using DevExpress.Web; public partial class _Default : System.Web.UI.Page { protected void Grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) { if(e.Parameters == "FilterByCategories") { var column = Grid.DataColumns["CategoryName"]; var lookup = Grid.FindFilterCellTemplateControl(column, "Lookup") as ASPxGridLookup; if(lookup != null) Grid.ApplyFilterToColumn(column, CreateCriteria(lookup, column.FieldName)); } } protected CriteriaOperator CreateCriteria(ASPxGridLookup gridLookup, string fieldName) { var values = gridLookup.GridView.GetSelectedFieldValues(fieldName); return values.Count > 0 ? new InOperator(fieldName, values) : null; } }

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.