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.
Overview
- 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>
- 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>
- 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.JavaScriptfunction Lookup_ValueChanged(s, e) { grid.PerformCallback("FilterByCategories"); }
- 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
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
Example Code
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>
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;
}
}