DevExpress-Examples / asp-net-web-forms-grid-implement-filter-row-template

Сreate a column's filter row template, add the ASPxGridLookup control to the template, and configure the column's filter functionality.

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.

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.

   <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.

   <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.

   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.

   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

• Grid View Templates
• Filter Template

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)