Using DataFilter with FlexGrid
In This Topic
FlexGrid provides built-in filtering support with the help of column filters. However, consider a scenario where you want a filtering UI similar to the one seen in different e-commerce websites where a grid displaying the product listing shows only few attributes such as the product image, product name and product price. Although, the user is allowed to filter the product listing by many other attributes such as brand, category, price etc. It is not possible to set such kind of filters from column filters in data grid controls. Hence, this walkthrough explains how you can use the DataFilter control to filter FlexGrid content using a filtering UI similar to any online store’s website.
The following image shows a list of cars filtered by a specific brand, category and price in FlexGrid using the DataFilter control.
To create an application for filtering a car list by brand, category, and price, complete the following steps:
Step 1: Setting up the application UI
- Create a new Windows Forms App.
- To create separate panels for placing controls, drag and drop the MS SplitContainer from the Toolbox onto your form.
- To add an icon or a logo representing a company or business, drag and drop the MS PictureBox control from the Toolbox onto Panel1 of the SplitContainer control. Set its Dock property to Top and add an image to the control using its Image property.
- To show different filtering criterias such as brand, category, etc., drag and drop the DataFilter control from the Toolbox onto Panel1 of the SplitContainer control. Set its Dock property to Bottom.
- To display a list of cars, drag and drop the FlexGrid control from the Toolbox onto Panel2 of the SplitContainer control. Set its Dock property to Fill.
Back to Top
Step 2: Creating data source for FlexGrid and DataFilter
- Define a method, for example CreateDataSource, to create datasource for the FlexGrid and DataFilter controls.
Note that _carsTable is declared as a global variable of type DataTable.
Note: DataBinding is also possible in the DataFilter control using the
DataEngine library. Please refer the DataFilterAndDataEngine sample in \Documents\ComponentOne Samples\WinForms\v4.5.2\DataFilter\CS
- Invoke the method from the Form’s Load event handler to generate the data for FlexGrid and DataFilter controls.
Back to Top
Step 3: Configuring FlexGrid control
- To bind the FlexGrid control to a data source and set its properties, add the following code to the Form Load event handler.
Note that in order to filter the data-aware control, FlexGrid, using the DataFilter control, both the controls must share a common data source.
- To display the car image and information in a cell, add unbound columns to the FlexGrid control, for example, we have added three unbound columns to the FlexGrid control and subscribed the GetUnboundValue event to populate these columns with data.
Note that _colCount is defined as a global variable with value equal to 3.
- To populate the unbound columns with car data along with the images, add the following code to the GetUnboundValue event handler.
Note that the GetUnboundValue event handler uses the ‘GetImagesFromByteArray’ method to retrieve the car images stored as OLE objects in the Access database.
- Define the GetImagesFromByteArray’ method using the following code.
Back to Top
Step 4: Configuring DataFilter control
- To automatically generate the filters, set the AutoGenerateFilters property of DataFilter to true in the Form Load event handler.
- To define the filtering criterias such as the minimum /maximum values for the RangeFilter and the checklist items for the CheckListFilter, subscribe to the FilterAutoGenerating event in the Form_Load event.
- Add the following code to the FilterAutoGenerating event handler to customize the automatically generated filters.
- To handle the FilterChanged event and reset the FlexGrid to display the car information appropriately, subscribe to the FilterChanged event.
Note that on applying the filter to the FlexGrid, the grid is rendered with the default settings. So, the FilterChanged event needs to be handled.
- Add the following code to the FilterChanged event handler to reset FlexGrid to display the car information.
- In the Form_Load event, bind the DataFilter control to the same datasource which was assigned to the FlexGrid control.
- Run the application and observe how the cars data with image appear in the FlexGrid control while all the car attribute filters are added to the DataFilter control.
Now, you can change the filter values in the DataFilter UI and see how the FlexGrid renders the filtered data.
Back to Top
Note: The above mentioned sample codes are only supported in WinForms .NET Framework.