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
Share this article on   LinkedIn

Juraj Ondrus

Hi, I am the Technical support leader at Kentico. I'm here to help you use Kentico and get as much as possible out of it.