Quick Start: Create a Simple Filter|UI Control for ASP.NET AJAX, C#, VB.NET

Create a Simple Filter in ASP.NET AJAX

Home > How to > Filter Getting Started

Using Kettic Filter component for ASP.NET AJAX, developers can easily construct or build a strongly typed filter expression. Additionally, the created expressions can be loaded for future use, such as querying data from a data source control or being applied to another control that supports filtering.

Generally speaking, the filter control can allow you to easily input expressions for filtering criteria as well as starting a new filtering group, which offers the option to select one of the four key words: And, Or, NotAnd, NotOr). In this section, we will provide you with a step by step user guide to help you get started with Kettic Filter control integration and customization. Please read along to learn more.

For each filter expression, users can manipulate and customize the following elements:
The field which will be edited later by the filter control
The filter option or criteria to be applied, such as "GreaterThan" and "LessThan"
The value that is to be matched for the filter expression
The "cross" symbol representing deleting, which is used to remove the formerly input filter expression.

Create an ASP.NET Web Site

Make sure you have installed Microsoft Visual Studio 2010 and open it.
Open your Visual Studio file menu and then please select New, followed by Web Site.

That's it! An ASP.NET Web Site is successfully created. Read on to enable AJAX for the web page.

Add Filter Control to Page

To enable AJAX, first please drage the AjaxPanel component from Toolbox and drop to the default web page which you have created previous.
Now it is time to integrate the Filter control. Just drag the filter component from the Toolbox and drop into the AjaxPanel.

Custom Filter Properties

Now's the time to customize properties for the filter control. Switch to Design view for the default web page and click the PerFilter's SmartTag.

Click open the dropdown menu for DefaultGroupOperation and select Add.
Click the dropdown menu for Skin, a window with a batch of skin options will pop up. Please select one that you like.

After all the above customization for filter control, this is how it looks like:

ASP.NET AJAX UI Controls