A common need for web-based reporting is to create a UI to allow the
user to apply filter criteria to a set of data. Usually, this
involves coding a fairly complicated UI, and associated code to
apply the filtering logic to a DataView. This UI
usually is fairly static, possibly containing a drop down list to
allow the user to choose which column to filter by, UI elements to
allow them to select the filter criteria, and a mechanism to transform
this data into a RowFilter to apply to a data view. This can
become tedious to code and maintain over time. I’ve created
a custom control that can do all this for you, which I’ve been
able to use to allow numerous web-based reporting
applications to be rapidly developed here at the port.
What is it?
This WebControl, DataSetFilter, builds this complicated UI on the fly, given a particular DataSet and DataTable. It does the following:
- Grabs the DataTable’s columns and each column’s type,
and generates a drop down list that the user can use to choose
the column to filter.
- Adds the appropriate operator for the
column’s type. For example LIKE is only appropriate for string
types, greater than only for numeric and DateTime types.
- Adds the appropriate value entering control. For
example, for DateTime types, it adds a calendar control, for other
types it adds a textbox.
- If multiple filters are added, it adds a boolean drop down list, to allow the next filter to be properly added.
- Finally, it raises an event when the filter has changed, so
that you can handle this event, normally applying it to your DataView,
and re-binding your DataGrid.
So, for example, here’s what it looks like when applied to Sahil’s Animal DataSet.
And to see all animals that weight greater than 15 pounds and less
than 5 pounds, we’d add two filters. Notice the Boolean drop down
list.
For DateTime values, it presents a Calendar picker.
Combine this with a standard ASP.NET DataGrid, and you’ve got a quick, but powerful reporting tool.
What do you need to code to get it to work?
There’s really not much that you need to do, just plop an instance
of the DataSetFilter on to a form, DataBind it, and handle the
FilterChanged event. Here’s all the code that you need to bind
the DataSetFilter.
public override void DataBind()
{
DataSet ds = GetData();
this.DataSetFilterControl1.DataSource = ds;
this.DataSetFilterControl1.DataMember = ds.Tables[0].TableName;
DataView dv = new DataView(ds.Tables[0]);
dv.RowFilter = DataSetFilterControl1.RowFilter;
lblFilter.Text = DataSetFilterControl1.RowFilter;
this.DataGrid1.DataSource = dv;
base.DataBind ();
}
And all that’s left to do is handle the FilterChanged event, and re-bind your DataGrid. Easy!
private void DataSetFilterControl1_FilterChanged(object sender, EventArgs e)
{
this.DataBind();
}
Okay. I want it!
You can download the example web project here.
The source code for the DataSetFilter control is here.
There’s some other stuff in my Tompkins.Web namespace to enable this
control, such as my CalendarPlus control, but everything you need
is there. There’s also support for adding parameters, which can
prompt the end user for values to be entered, in the case of a stored
filter. I’ll try to blog about how all that
works next time.
-Brendan