Dynamic Data samples: Extending the FilterRepeater
6/25 Update: This sample has become part of the Dynamic Data Futures project on codeplex. You can still use this code but you should check out the Futures project as it contains a lot more. The key conecpts are the same, though some names or APIs might have changed.
Note: This post is part of a series, see the list of other Dynamic Data samples.
The FilterRepeater is a control in Dynamic Data that is responsible for automatically emitting a list of filter controls that can be used to filter data rows displayed for a table. The filters work by providing a list of where parameters to the data source for each supported column type. By default Dynamic Data supports foreign key and boolean columns and renders them using a DropDownList. This and upcoming posts will talk about ways in which you can add filtering for other column types and how to modify the filter UI.
All of the code referenced here is part of the AdvancedFilterRepeaterSample solution.To run the sample open the solution in Visual Studio 2008 SP1 Beta or later and run AdvancedFilterRepeaterSite (note: it might not be the default project for the solution, so right click on Default.aspx inside the project and choose View in Browser). Navigate to the list page for the Products table where you can experiment with some new filtering options. For example, type "con" into the Categories filter. You should see an AJAX autocomplete drop-down instead of the default drop-down list.
Introduction to FilterRepeater
FilterRepeater is a specialized Repeater control that will automatically bind to a collection of filterable columns for the given request's table: if a request comes in for /Products/List.aspx, it will bind to the columns in the Products table. The table is chosen based on the route that the request matched, or it can be overridden by setting the TableName and ContextTypeName properties.
To work correctly FilterRepeater expects its ItemTemplate to have correct content. Specifically, it requires a control with a known ID ("DynamicFilter" by default) that derives from FilterUserControlBase. When databinding occurs FilterRepeater initializes an instance of the filter control with information about the column to filter.
Below is a snippet of the code that ships in the default Dynamic Data templates:
<asp:FilterRepeater ID="FilterRepeater" runat="server">
<ItemTemplate>
<asp:Label runat="server" Text='<%# Eval("DisplayName") %>' />
<asp:DynamicFilter runat="server" ID="DynamicFilter"
OnSelectedIndexChanged="OnFilterSelectedIndexChanged" />
</ItemTemplate>
<FooterTemplate><br /><br /></FooterTemplate>
</asp:FilterRepeater>
FilterRepeater version 2.0 (well, more like 1.1 really)
The DynamicDataExtensions project contains a simple extension of FilterRepeater called AdvancedFilterRepeater. It is not really that advanced (I started with that name and never bothered to change it) as it overrides only one method: GetFilteredColumns. This method is what is used as the databinding source. Below is a slightly simplified source of how it is implemented:
public class AdvancedFilterRepeater : FilterRepeater {
protected override IEnumerable<MetaColumn> GetFilteredColumns() {
return Table.Columns.Where(c => IsFilterableColumn(c)).OrderBy(column => column, new FilterOrderComparer());
}
protected bool IsFilterableColumn(MetaColumn column) {
if (column.IsCustomProperty) return false;
var filterAttribute = column.Attributes.OfType<FilterAttribute>().FirstOrDefault();
if (filterAttribute != null) return filterAttribute.Enabled;
if (column is MetaForeignKeyColumn) return true;
if (column.ColumnType == typeof(bool)) return true;
return false;
}
private class FilterOrderComparer : IComparer<MetaColumn> {
// implementation omitted for brevity
}
}
The Table property is automatically populated with the right MetaTable instance based on the table resolution rules mentioned in the previous section. The rest is a simple LINQ extension method query and some boolean logic to choose the filterable columns. The only way this deviates from the default process is the addition and handling of FilterAttribute, which is a new attribute written for the purpose of this sample. It combines the roles of UIHintAttribute and ScaffoldColumnAttribute from Dynamic Data field templates and should be applied to columns in an analogous manner. Here's the full signature:
public sealed class FilterAttribute : Attribute {
public string FilterControl { get; set; }
public int Order { get; set; }
public bool Enabled { get; set; }
}
The FilterControl property lets you specify which user control to use as the filter while the Enabled property lets you omit a given column's filter in the AdvancedFilterRepeater. The Order property let's you specify an ordering weight.
Specifying custom filter controls
The reason why the implementation of AdvancedFilterRepeater is so simple is because a lot of work is done in two other components:
- FilterFactory is the equivalent of FieldTemplateFactory for filters. It uses the information in a column's FilterAttribute to determine which filter user control to instantiate for the column. It takes the value of the attribute's FilterControl property and looks for a user control located at ~\DynamicData\Filters\{FilterControl}.ascx. If a filter attribute is not specified ~\DynamicData\Filters\Default.ascx is used, which is identical to the FilterUserControl.ascx that is part of the default Dynamic Data template.
- DelegatingFilter is a control that derives from FilterUserControlBase (which means that it is itself a filter) and delegates the filtering behavior to another filter control. It uses the FilterFactory class to determine which control to use.
In order to take advantage of AdvancedFilterRepeater and DelegatingFilter you need to replace the existing FilterRepeater in your List.aspx page template with the following code:
<asp:AdvancedFilterRepeater id="AdvancedFilterRepeater" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td valign="top"><%# Eval("DisplayName") %>:</td>
<td><asp:DelegatingFilter runat="server" ID="DynamicFilter"
OnSelectionChanged="OnFilterSelectionChanged" />
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:AdvancedFilterRepeater>
This template is pretty similar to the default one seen earlier in this post except it wraps each filtered column in a table row for cleaner formatting (yes, using tables for layout is wrong but this post is not about layouts). And of course DynamicFilter has been replaced with DelegatingFilter.
To take advantage of the custom filter controls included in the sample such as autocomplete filter or cascading filter you need to annotate your data model with FilterAttribute. Here's a snippet of how it is done in the sample:
[MetadataType(typeof(Product_MD))]
public partial class Product { }
public class Product_MD {
// Display the Category and Supplier filters using the Autocomplete.ascx filter control
[Filter(FilterControl = "Autocomplete")]
public object Category { get; set; }
[Filter(FilterControl = "Autocomplete")]
public object Supplier { get; set; }
// Display the Discontinued filter using the BooleanRadio.ascx filter control
// Make sure the Discontinued filter is displayed first
[Filter(FilterControl = "BooleanRadio", Order = 1)]
public object Discontinued { get; set; }
// Display the UnitsInStock filter using Integer.ascx filter control
[Filter(FilterControl = "Integer")]
public object UnitsInStock { get; set; }
}
When you run the application and view the list page for the Products table the appropriate filters get inserted automatically. Future posts will discuss how the more advanced filters are implemented.