How to: Filter Table Rows Using Default Filter Templates in Dynamic Data

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

This topic shows how to filter the table rows to display without requiring from you knowledge of the data source control and of the database query details. Dynamic Data generates the UI that enables the user to choose the column values for filtering the table rows and creates the necessary query information for the data source control in the page.

Dynamic Data provides a set of filter templates, in the ~\DynamicData\Filters directory, that are used to create the UI. You can also create custom filter templates for those column types that do not have a default template.

The following figure shows the steps that Dynamic Data follows in order to implement table row filtering.

1. The DynamicFilter controls pass the user's column value to the QueryExtender control.

2. The QueryExtender control uses this 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 Row Filtering Elements

To define the UI table row filtering

1. In Visual Studio 2010 or Visual Web Developer 2010 Express, in a Dynamic Data Web site, open an ASP.NET Web page that contains a data source control to access the database and a related data-bound control to display the tables. For more information, see Walkthrough: Filtering Table Rows in Dynamic Data.

2. Before the data-bound control, add a QueryableFilterRepeater control to the page, as shown in the following example.

   <asp:QueryableFilterRepeater ID="FilterRepeater1" runat="server" >
   
   </asp:QueryableFilterRepeater> 
   

   This control provides a template for the automatic generation of filters for tables contained in the database.

3. In the ItemTemplate of the QueryableFilterRepeater control, add a DynamicFilter control.

   The following example shows the markup for a QueryableFilterRepeater control that contains a DynamicFilter control.

   <asp:QueryableFilterRepeater ID="FilterRepeater1" runat="server" >
     <ItemTemplate>
       <asp:DynamicFilter ID="DynamicFilter" 
         runat="server" />
     </ItemTemplate>
   </asp:QueryableFilterRepeater> 
   

   The DynamicFilter control automatically generates a DropDownList control for each column type that has a related default filter template. By default, only Boolean and foreign-key columns have filter templates. The DropDownList control enables the user to select column values for filtering the table rows.

4. Add a Label control. Dynamic Data uses the Label control to display a name for any column that has a related default filter template.

   The following example shows the markup for a Label that displays the names of the columns to use for data filtering.

   <asp:QueryableFilterRepeater ID="FilterRepeater1" runat="server" >
     <ItemTemplate>
       <asp:Label ID="Label1" runat="server" 
         Text='<%# Eval("DisplayName") %>' />
       <asp:DynamicFilter ID="DynamicFilter" 
         runat="server" />
     </ItemTemplate>
   </asp:QueryableFilterRepeater> 
   

   This displays a column name before the related DropDownList control for each column that has a related default filter template.

To define the data source filtering information

1. Add a QueryExtender control to the page, as shown in the following example.

   <asp:QueryExtender ID="QueryExtender1" runat="server"/>
   
   </asp:QueryExtender>
   

   The QueryExtender control enables you to filter data from a data source by using simple page markup.

2. Set the TargetControlID property of the QueryExtender control to the identifier of the data source control.

   The following example shows the markup for a QueryExtender control that points to the data source control.

   <asp:QueryExtender ID="QueryExtender1" 
       TargetControlID="LinqDataSource1" runat="server"/>
   </asp:QueryExtender>
   

3. Add a DynamicFilterExpression object as a child of the QueryExtender control.

4. Set the DynamicFilterExpression ControlID property to the identifier of the QueryableFilterRepeater control. The latter control modifies the database query for the data source.

   The following example shows the markup for a QueryExtender control that instructs Dynamic Data to query the data source so that it returns all the table rows that contains the column values selected by the user.

   <asp:QueryExtender ID="QueryExtender1" 
       TargetControlID="LinqDataSource1" runat="server">
       <asp:DynamicFilterExpression ControlID="FilterRepeater1"/> 
   </asp:QueryExtender>
   

Example

The following example uses the ForeignKey.ascx filter template to create DropDownList controls for the Products table foreign-key columns. When the user selects a value from one of these controls, the example displays only the Products rows that contain those values.

<%@ Page Language="VB" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Default Table Row Filtering</title>
</head>
<body>
    <h3>Default Table Row Filtering</h3>
    <form id="form1" runat="server">
    <div>
        <asp:DynamicDataManager  ID="DynamicDataManager1" 
            runat="server">
            <DataControls>
                <asp:DataControlReference ControlID="GridView1" />
            </DataControls>
        </asp:DynamicDataManager>


        <asp:QueryableFilterRepeater ID="FilterRepeater1" runat="server">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" 
                    Text='<%# Eval("DisplayName") %> '/>
                <asp:DynamicFilter ID="DynamicFilter" runat="server" />
            </ItemTemplate>
        </asp:QueryableFilterRepeater>

        <br /> <br />

        <asp:GridView ID="GridView1" runat="server"
            DataSourceID="LinqDataSource1" AutoGenerateColumns="false"
            AllowPaging="true" AllowSorting="true">
            <Columns>
            <asp:DynamicField DataField="ProductCategory" />
            <asp:DynamicField DataField="ProductModel" />
                <asp:DynamicField DataField="Name" />
                <asp:DynamicField DataField="Color" />
                <asp:DynamicField DataField="Size" />
           </Columns>
        </asp:GridView>

        <aspX:QueryExtender ID="QueryExtender1" runat="server" 
            TargetControlID="LinqDataSource1">
            <asp:DynamicFilterExpression ControlID="FilterRepeater1" />
        </aspX:QueryExtender>

        <aspX:LinqDataSource ID="LinqDataSource1" runat="server" 
            TableName="Products" 
            ContextTypeName="AdventureWorksLTDataContext"/>


    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Default Table Row Filtering</title>
</head>
<body>
    <h3>Default Table Row Filtering</h3>
    <form id="form1" runat="server">
    <div>
        <asp:DynamicDataManager  ID="DynamicDataManager1" 
            runat="server">
            <DataControls>
                <asp:DataControlReference ControlID="GridView1" />
            </DataControls>
        </asp:DynamicDataManager>


        <asp:QueryableFilterRepeater ID="FilterRepeater1" runat="server">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" 
                    Text='<%# Eval("DisplayName") %> '/>
                <asp:DynamicFilter ID="DynamicFilter" runat="server" />
            </ItemTemplate>
        </asp:QueryableFilterRepeater>

        <br /> <br />

        <asp:GridView ID="GridView1" runat="server"
            DataSourceID="LinqDataSource1" AutoGenerateColumns="false"
            AllowPaging="true" AllowSorting="true">
            <Columns>
            <asp:DynamicField DataField="ProductCategory" />
            <asp:DynamicField DataField="ProductModel" />
                <asp:DynamicField DataField="Name" />
                <asp:DynamicField DataField="Color" />
                <asp:DynamicField DataField="Size" />
           </Columns>
        </asp:GridView>

        <aspX:QueryExtender ID="QueryExtender1" runat="server" 
            TargetControlID="LinqDataSource1">
            <asp:DynamicFilterExpression ControlID="FilterRepeater1" />
        </aspX:QueryExtender>

        <aspX:LinqDataSource ID="LinqDataSource1" runat="server" 
            TableName="Products" 
            ContextTypeName="AdventureWorksLTDataContext"/>


    </div>
    </form>
</body>
</html>

Compiling the Code

This example requires the following:

• A Dynamic Data Web site or a Dynamic Data Web application. This enables you to create a data context for the database and to create the class for the table to access. For more information, see Walkthrough: Filtering Table Rows in Dynamic Data.

• The AdventureWorksLT sample database. For more information, see How to: Connect to the AdventureWorksLT Database using an .MDF File.

See Also

Tasks

How to: Filter Table Rows Using Foreign Key in Dynamic Data

How to: Filter Table Rows Using Values from a Parent Table in Dynamic Data

Reference

DynamicFilter Web Server Control Declarative Syntax

QueryExtender Web Server Control Declarative Syntax

QueryableFilterRepeater Web Server Control Declarative Syntax