Custom filter for data source web parts
This article describes how to create a custom filter for data source web parts. The sample shows the custom filter with one drop-downlist (category) for document data source. It will filter the documents according the document type field “category”.
First of all, we create the document type with “
category” field. For example, we will use the sample Corporate site and
News document type. We may add the new field in:
Site manager -> Development -> Document types -> edit News -> Fields -> add a new field:
Attribute name: category
Attribute type: Text
Attribute size: 2
Allow empty value: true
Field caption: category
Field type: Textbox
Then we fill out the value for News documents. Go to:
CMSDesk -> Content -> News -> edit news documents -> Form tab -> fill out the new category field by “1”, “2” or “3”.
We prepared the site and now let’s develop the custom filter.
The custom filter is in fact an ASCX control. The most important thing is that it must inherit from
CMSAbstractBaseFilterControl class. You may take the inspiration for developing custom filter from the Product filter (
~/CMSModules/Ecommerce/Controls/Filters/ProductFilter.ascx).
Please see the attached sample code of our
Category filter. You can save the code to:
~/CMSWebParts/MyWebParts/
There is a dropdownlist with items
“1“ , “2“ and “3“ and a
Filter button. If the button is clicked it adds a query string “
category“ to the URL according the selected value in dropdownlist. It also set up the
Where condition for data source web part.
Let’s test it on the site. Go to CMSDesk and create a new test page (a blank page with Simple layout). Add the General -> Filter web part and configure it like this:
Filter name: test
Filter control path: ~/CMSWebParts/MyWebParts/CategoryFilter.ascx
Then add the Data sources -> Documents data source web part and set up the properties:
Web part control ID: DocumentDataSource
Path: /News/%
Class names: CMS.News
Filter name: test
Finally, we should add a web part for displaying, for example
Listing and viewers -> Basic repeater (or you may use the Basic datalist). Please do not forget to fill out these properties:
Data source name: DocumentDataSource
Transformation name: CMS.News.Preview
Selected item transformation: CMS.News.Default
Then you may test the filter on the live site. It displays the news according the category in the dropdownlist.
See also: Data source web parts documentation
Custom filter development with Kentico CMS
Applies to: Kentico CMS 4.0 and later