Customize Table Rows Filtering in Dynamic Data

  • Article

Introduction

ASP.NET Dynamic Data enables you to use page markup to filter the table rows to display and provides the UI that enables the user to enter the values needed for custom row filtering. Dynamic Data will infer the filter template for creating the UI based on the column type. By default, Boolean and foreign-key columns are used for filtering.

Custom filtering requires the following steps:

  1. Define table row filtering. Add a System.Web.DynamicData.DynamicFilter control and configure it for the desired filtering column. This allows for creating the UI that enables the user to perform table row filtering.
  2. Define data source filtering information. Add a System.Web.UI.WebControls.QueryExtender and configure it to reference the System.Web.DynamicData.DynamicFilter control. This allows for passing filtering information to the data source control on the page.

This lets you perform data filtering by using simple page markup without requiring knowledge of the data source control and of the database query details.

Multiple System.Web.DynamicData.DynamicFilter  controls can be used to allow for multiple filtering criteria.

The following figure shows the process that Dynamic Data elements follow in order to implement filtering.

These are the steps followed:

  1. The System.Web.DynamicData.DynamicFilter  control passes the user's selected value to the System.Web.UI.WebControls.QueryExtender control.
  2. The System.Web.UI.WebControls.QueryExtender control uses the value to create the query filtering information. Then it passes this information to the data source control.
  3. The data source control passes the filtering query information to the data source provider.
  4. The data source provider passes the query to the database.
  5. The database returns the filtered table rows.
  6. The data source provider sends this data back to the data source control.
  7. This control finally passes the filtered table rows to the data-bound control for display.

Dynamic Data Table Rows Filtering Elements

QueryTablesDefaultFilterTemplates

Procedures

To define table row filtering

  1. In Visual Studio, in a Dynamic Data Web site, create or open an ASP.NET Web page. The procedure assumes that a data source control to access the database and a related data-bound control to display the tables exist.
  2. Add a System.Web.DynamicData.DynamicFilter  control to the page. Set the DataField property to the name of the column that is used to filter the rows from the table. The following example shows the markup for a System.Web.DynamicData.DynamicFilter control that specifies the name of the column to use for data filtering.
 <asp:DynamicFilter ID="CategoryFilterID" DataField="ProductCategory"   runat="server"/>

Dynamic Data will infer the filter template to use based on the column type. It will throw a System.InvalidOperationException if the column type does not have an associated default filter template.

To define data source filtering information

  1. Add a System.Web.UI.WebControls.QueryExtender control to the page. Set the TargetControlID property to the ID of the data source control that you want to extend. The following example shows the markup for a System.Web.UI.WebControls.QueryExtender control that points to the extended data source control. 

    <asp:QueryExtender ID="QueryExtenderID" TargetControlID="GridDataSource" runat="server"/></asp:QueryExtender>

  2. Add a System.Web.UI.WebControls.DynamicFilterExpression object as a child of the System.Web.UI.WebControls.QueryExtende control

  3. Set the System.Web.UI.WebControls.DynamicFilterExpression ControlID property to the identifier of the System.Web.DynamicData.DynamicFilter control.The following example shows the markup for a System.Web.UI.WebControls.QueryExtende control that includes the filter to use for querying the database.

<asp:QueryExtender ID="QueryExtenderID" TargetControlID="GridDataSource" runat="server"/>

    <asp:DynamicFilterExpression ID="CategoryFilterID"/>

</asp:QueryExtender>

Example

The following example uses the ForeignKey.ascx filter template to create a System.Web.UI.WebControls.DropDownList control for the Products foreign key column ProductCategory. When the user selects a value from this control, the example displays only those Products table rows that contain that value.

Refer to the attached files.

Note:

  • Dynamic Data defaults to the Boolean filter template. You do not need to specify it. The example just shows how to apply a filter template to a specific data field, if you need to.
  • The aspX prefix is temporary for this preview. It will change to asp in the final release.

Compiling the Code

This example requires the following:

  • A Dynamic Data Web site or a Dynamic Data Web application.
  • The AdventureWorksLT sample database. ·
  • A data context object that is registered in the Global.asax file.

CustomizeTableRowFiltering_VB.zip