Introduction (see Dynamic Data Filtering home on codeplex)
Josh Heyes created Dynamic Data Filtering because of missing features searches other that Equals and AND here are some of the filtering capabilities you can add by using Dynamic Data Filtering (Currently for Linq to SQL Dynamic Data Websites)
- Searching ranges (ListPrice > 10 AND ListPrice < 500)
- Searching in a list of possible values (Class in (‘L’, ‘M’))
- Partial text searching (Color LIKE ‘B%’)
- Not null or empty (DiscontinuedDate is not NULL)
Figure 1 – Dynamic Data Filtering sample page
Articles in this series
- Installation & Adding Dynamic Data Filtering to your site
- Working with the DynamicFilterRepeater and the DynamicFilterForm
Dynamic Data Filtering working with classic Filters and Filters from Dynamic Data Futures project. - Creating and adding custom filters
- Adding default values to filters
Note: 1 & 2 has been combined. 4. which is now 3. has been removed as this is as easy as having both sets of controls on the page :D
Installation of the Dynamic Data Filtering on codeplex.com (by Josh Heyes)
You will notice that there are several flavours of the install routine:
- Dynamic Data Filtering Installer – Just what you’d expect it installs and adds the controls to the toolbox
- Dynamic Data Filtering Assemblies Only – I think similar the above but does not add any samples etc.
- Dynamic Data Filtering Installer w/o Toolbox Installer – This one is the same as the first but as the name suggests no toolbox entries this is specifically for users with Visual Web Developer 2008 Express which due to it’s cutdownness
for some reason does not like the toolbox installed, (Josh did explain on the Forum post where I read this but I can’t remember what it was or be bothered to do a big search on the Forum) so you will have to add the controls to the toolbox yourself if you have Visual Web Developer 2008 Express.
Steps to install and use in new website
- Download the Dynamic Data Filtering release from the releases page and save and run.
Figure 2 - Dynamic Data Filtering installation progress
- Then simple enough just follow the instructions.
- Now if you have Visual Web Developer 2008 Express you will need to add the controls to the toolbox manually.
| Create a new tab in the toolbox | | |
 |  |  |
| Add Tab | Rename Tab | Browse For Controls |
| | | |
 |  |  |
| Click Browse | Navigate to Dynamic Data Filtering folder and Click Open | Check all of the Catalyst controls returned |
| | | |
 | | |
| You now see the Dynamic Data Filtering controls | | |
| Figures 3 – 9 | | |
| | | |
- If you installed the Dynamic Data Filtering Installer then you will have an extra Data tab created, just right click on it and select rename and then name it to say DD Filtering just to keep it the same.
- You’re done and ready to start using Dynamic Data Filtering.
Adding Dynamic Data Filtering to your site
Setup a Dynamic Data Website (I’m going to use a file based website because you need to do more to get it to work, and because I tend to work with file based websites), I’m going to call it DD_Filtering.
Steps to make the List page use Dynamic Data Filtering in place of the normal filtering.
- Replace the LinqDataSource with a DynamicLinqDataSource
Just drag the replacement DynamicLinqDataSource to the page. Remember to delete the LinqDataSource first before adding the DynamicLinqDataSource and also to set the ID os the DynamicLinqDataSource to the same ID as the LinqDataSource, ID=”GridDataSource”
Note: When you insert the first
Dynamic Data Filtering control the
Dynamic Data Filtering will prompt you to install the
FilterTemplate folder click
yes
Figure 10 - Install Default Filter Templates Delete the old LinqDataSource and then click on the new data source and set the EnableDelete property to true.
- Replace the FilterRepeater with DynamicFilterRepeater – This is pretty much drag the new control to the page and delete the old control. Again remember to delete the FilterRepeater before adding the DynamicFilterRepeater otherwise the DynamicFilterControl’s ID will need renaming to ID="DynamicFilter" from ID="DynamicFilter0". Also you will need to set the DataSourceID to
DataSourceID="GridDataSource".
Next we need to do some house keeping of the FilterTemplats add when we added the first Dynamic Data Filtering control, this is specifically for file based website:
Figure 11 – Remove the .designer.cs files from the FilterTemplates folder
Next you need to edit both the .ascx and .cs files to remove namespace references that are not required for a file based website and change the CodeBehind property of the control tag to CodeFile.
Here’s the quick way to do it using Visual Studio 2008 replace in files dialogue.
Cleaning up the FilterTemplates
- Got Edit->Find and Replace->Replace in Files (or type Ctrl+Shift+H) to get the Find and Rplace in files dialogue up.
Figure 12 – Find and Replace in Files dialogue - Click the … button at the end of the Look in: textbox and set the selected folder to the DynamicData\FilterTemplates folder of your current website
Figure 13 – Select the Selected folder to the DynamicData\FilterTemplates folder - Now in the Find what: textbox enter each of the find text and in the Replace with: the replace text, setting the appropriate Find options and file types in Look at these file types:
- Repeat step 3 for each row in the following table.
| Find what: | Replace with: | Find options | Look at these file types: |
| Inherits="$rootnamespace$. | Inherits=" | none | *.ascx |
| CodeBehind=" | CodeFile=" | none | *.ascx |
| namespace \$rootnamespace\$\n\{\n | | Use: Regular expressions | *.ascx.cs |
| \}\n\} | \} | Use: Regular expressions | *.ascx.cs |
So if you set your Dynamic Data Website up correctly you could run it now, but you’d see NO filters!
This is because you must attribute up the the field that you want to be filtered. So you will now need to create a partials class file for the model you are using. Again I’m using the Northwind database.
So next we need some Metadata:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using Catalyst.ComponentModel.DataAnnotations;
[MetadataType(typeof(OrderMD))]
public partial class Order
{
public class OrderMD
{
public object OrderID { get; set; }
public object CustomerID { get; set; }
public object EmployeeID { get; set; }
[Filter(FilterMode=FilterControlMode.Range)]
public object OrderDate { get; set; }
public object RequiredDate { get; set; }
public object ShippedDate { get; set; }
public object ShipVia { get; set; }
public object Freight { get; set; }
public object ShipName { get; set; }
public object ShipAddress { get; set; }
public object ShipCity { get; set; }
public object ShipRegion { get; set; }
public object ShipPostalCode { get; set; }
[Filter(FilterMode=FilterControlMode.Contains)]
public object ShipCountry { get; set; }
// EntitySets
public object Order_Details { get; set; }
// EntityRefs
[Filter(FilterMode=FilterControlMode.Equals)]
public object Customer { get; set; }
[Filter(FilterMode=FilterControlMode.Equals)]
public object Employee { get; set; }
[Filter(FilterMode=FilterControlMode.Equals)]
public object Shipper { get; set; }
}
}
Listing 1 – Metadata for the Orders table
Some explanation of the filter attribute should be given here:
| FilterControlMode |
Equivalent to: |
| Contains |
WHERE [Name] Like ‘%something%’ |
| Equals |
WHERE [Name] = ‘something’ |
| MultiSelect |
WHERE [Name] IN (‘one, two, three’) |
| Range |
WHERE [QTY] > 5 AND [QTY] < 15 |
I believe in the next release there will also be a named parameter of UIHint so you can specify custom FilterTemplates.
Josh Heyes had done a really great job with this.
