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 1 - Initial Setup

In this tutorial, you will perform initial application setup and build the UI that fits the Filtering UI Context component.

  1. Create a new Windows Forms application and drop a Data Grid control onto your main form, then bind it to the required data source. Refer to the Binding to Data section to see detailed tutorials on binding the Data Grid to various data sources.

  2. Switch the grid to the WinExplorer View. Unlike other grid views, this view has no built-in visual elements to filter grid data at runtime.

  3. Add a Dock Manager component, which allows you to build a layout of docked, tabbed, auto-hidden or floating panels. Use the component's smart-tag to add a docked panel to the form's right. This panel will contain editors with which end-users will be able to filter your grid data.

  4. The Filtering UI Context cannot generate editors and place them just anywhere. The component needs an appropriate control that will host these generated editors. Thus, add the Accordion Control to the dock panel, remove the automatically created accordion element and set the control's Dock property to Fill.


    A control that hosts editors generated by a Filtering UI Context component is called UI provider. Besides the Accordion Control, the Filtering UI Context supports the following providers.

    • Layout Control.
    • Any custom control that implements the DevExpress.Utils.Filtering.IFilteringUIProvider inteface.

  5. Add a Filtering UI Context to your form and invoke its smart-tag. Under the UI Provider section you will see links that add a new Accordion Control or Layout Control, and the combo box that allows you to choose an existing UI provider.

    Since you already have an Accordion Control in your dock panel, you can use it as the UI provider for the Filtering UI Context.

After you have set up the form layout, proceed to the next lesson to learn how to generate filtering editors.

Expanded See Also

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