Log In
[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Collapse]Common Features
  [Expand]Data Binding Common Concepts
  [Expand]Data Source Wizard
  [Expand]Application Appearance
  [Collapse]Filtering UI Context
   [Collapse]Getting Started
     Lesson 1 - Initial Setup
     Lesson 2 - Generating Editors. Filtering Model
     Lesson 3 - Filtering Events
     Filtering UI Context Designer
     Lesson 4 - Filtering Attributes
   [Expand]Advanced Concepts
  [Expand]High DPI Support
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML Text Formatting
  [Expand]Tooltip Management
  [Expand]Saving and Restoring Layouts
   Clipboard - Copy Data and Formatting
   Version Compatibility: Default Property Values
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 2 - Generating Editors. Filtering Model

In this lesson, you will learn what the filtering Model is and how the Filtering UI Context component uses it to generate filtering editors. Additionally, the tutorial explains how to make these generated editors interact with your Data Grid and filter its data.

  1. The Filtering UI Context cannot hook up directly to your data-aware control and select data fields for which to generate filtering editors. Instead, the component requires a simple public class with properties. Such a class is called a filtering Model and looks something like this.

    Each property of this class identifies the specific data source field by name. When you supply the Filtering UI Context with a filtering Model, it uses these properties as a list of data fields that should be filtered.

    If in the previous tutorial you have bound your Data Grid to a code-first data source, you already have a data class that can be used directly as the filtering Model. Otherwise, if you have chosen to bind to other data sources (for example, a SQL database), add a new class to your project and define the required properties manually. Note that in latter case, your property names must exactly match the names of data fields that you want to filter.


    If you use an existing data class as a filtering Model and this class contains properties that you do not need to filter (e.g., IDs), it is possible to skip generating editors for such properties by using filtering attributes.

  2. Provide your Filtering UI Context with a filtering Model. To do so, use the component's smart-tag or specify the ModelType property in code.

  3. Test your filtering Model by invoking the Filtering UI Context smart-tag and clicking the 'Retrieve Fields' link. This will populate the UI provider with items according to your filtering Model. Use this to customize these elements as needed. For instance, you can modify their captions or assign images.

  4. Technically, the Filtering UI Context does not manage a data-aware control in any manner. This component only generates a filtering UI and bulids a valid filter criteria whenever end-users use these editors. You are free to modify this expression as needed (see the Criteria Language Syntax article) and apply to the desired control by doing one of the following.

    • By handling the FilterCriteriaChanged event.
    • By using the SetFilterCriteriaBinding method.
  5. Launch the application to see the current result.

    Try using the generated editors and you will notice your Data Grid filtering its data.


    To enable expanding multiple accordion elements simultaneously, set the AccordionControl.ExpandElementMode property to Multiple.

Depending on the filtering Model you have used, this initial UI can require more or fewer additional modifications. For instance, in the image above, the topmost editor for the 'Category_Name' property is empty. To fix that, you need to manually provide its look-up items. Proceed to the next lesson to learn how to do that.

Expanded See Also

How would you rate this topic?​​​​​​​