How to Add a Search Box to Filter Your WinForms Datagrid

As data becomes the backbone of modern decision-making, we commonly use datagrids to manage massive datasets. We can incorporate searching and filtering capabilities within these grids to better enable end users to explore and analyze the data.

The popular ComponentOne FlexGrid for WinForms offers several different filtering solutions. You can quickly enable built-in filtering in column headers like Excel or add filtering UI outside the datagrid using additional ComponentOne controls.

In this blog, we will demonstrate how to create a Google/Bing search box-like filtering feature using the C1FlexGridSearchPanel control. Additionally, we will create an Amazon.com-like filtering panel using the C1DataFilter control.

• Filtering the Datagrid Using a Search Box
• Filtering the Datagrid Using a Side-Bar Filter Panel

Ready to Test this Feature? Download ComponentOne Today!

Filtering the Datagrid Using a Search Box

We have a special control in our ComponentOne WinForms suite, C1FlexGridSearchPanel, which adds filtering (or searching) capabilities to the FlexGrid control. This control highlights search text and filters the records that contain that text. The search panel provides various settings that can be set according to the requirement. For example, the SearchMode property determines how the search is triggered (automatically or upon hitting the Search button). We can also set the SearchDelay property to specify the time interval after which the search will be performed automatically.

In the 2023 v1 release, we introduced a new feature in the C1FlexGridSearchPanel control called "highlight all occurrences", which makes it simple for users to discover and visualize all instances of the search word within the grid. This feature provides a convenient overview of data distribution and greatly enhances the user experience.

The steps to add a search panel to FlexGrid for WinForms are as follows:

1. Create a WinForms application and install the "C1.Win.C1FlexGrid" and "C1.Win.C1FlexGrid.SearchPanel" packages from NuGet.

2. Add a FlexGrid control and a FlexGridSearchPanel to the form designer window from the toolbox.

3. Bind the FlexGrid control to the desired data source, such as the Products table of the NWind database. We have bound FlexGrid to the data source in the form's load event handler, as shown in the following code:

private void Form1_Load(object sender, EventArgs e)
{
    var path = Environment.GetFolderPath(Environment.SpecialFolder.Personal) + @"\ComponentOne Samples\Common";
    var dataAdapter = new OleDbDataAdapter("select ProductID, ProductName, SupplierID, QuantityPerUnit, " +
        "CategoryID, UnitPrice from Products", string.Format(@"provider=Microsoft.ACE.OLEDB.12.0;data source={0}\c1nwind.mdb;", path));
    _dataTable = new DataTable();
    dataAdapter.Fill(_dataTable);
    c1FlexGrid1.DataSource = _dataTable;
}

4. Set the C1FlexGridSearchPanel property of the FlexGrid to the instance of the added C1FlexGridSearchPanel in the FlexGrid's Properties window.

5. Set the FlexGrid search panel to 'All'. This setting ensures that all instances of the searched string in a cell will be highlighted. We can also choose to highlight only the first occurrence in the cell or opt for no highlighting by selecting the appropriate "OnlyFirst" or "None" enum options.

c1FlexGridSearchPanel1.HighlightSearchResultsMode = C1.Win.C1FlexGrid.SearchHighlightMode.All;

Run the application and test the search panel functionality. Enter search terms in the search box, and the FlexGrid will automatically filter and display the matching data.

Filtering the Datagrid Using a Side-Bar Filter Panel

Data filtering in the grid enables users to efficiently explore and analyze enormous datasets by narrowing down specific information of interest, enhancing productivity and data exploration capabilities. This requirement can be achieved using the C1DataFilter control, which provides extensive filtering capabilities. It automatically generates different types of filters based on the properties of the data source.

Additionally, it allows us to create custom filters and dynamically replace the default filter editors at runtime, which empowers users to perform precise searches and retrieve the exact data they need.

To implement the data filtering feature in the FlexGrid from the above application, you can follow the steps below:

1. Install the 'C1.Win.DataFilter' package from NuGet.

2. Add the C1DataFilter control to the designer window from the toolbox.

3. In the Form's Load event handler, set the data source of the C1DataFilter control to the same as the data source of the FlexGrid control.

c1DataFilter1.DataSource = _dataTable;

4. Set the AutoGenerateFilters property of the C1DataFilter to 'True' to create the default filters depending on the type of fields present in the data source.

5. We have modified the automatically generated filters by subscribing to the DataFilter's FilterAutoGenerating event and specified the filtering parameters, such as minimum/maximum values for the RangeFilter and checklist items for the CheckListFilter.

private void c1DataFilter1_FilterAutoGenerating(object sender, C1.DataFilter.FilterAutoGeneratingEventArgs e)
        {
            switch (e.Property.Name)
            {
                case "ProductID":
                    var prodIdFilter = (C1.Win.DataFilter.RangeFilter)e.Filter;
                    prodIdFilter.Maximum = _dataTable.AsEnumerable().Max(x => x.Field<int>("ProductID"));
                    prodIdFilter.Minimum = _dataTable.AsEnumerable().Min(x => x.Field<int>("ProductID"));
                    prodIdFilter.Increment = 1;
                    break;
                case "ProductName":
                    var productNameFilter = (C1.Win.DataFilter.ChecklistFilter)e.Filter;
                    productNameFilter.ShowSearchBox = true;
                    productNameFilter.SelectAll();
                    break;
                case "SupplierID":
                    var suppIdFilter = (C1.Win.DataFilter.RangeFilter)e.Filter;
                    suppIdFilter.Maximum = _dataTable.AsEnumerable().Max(x => x.Field<int>("SupplierID"));
                    suppIdFilter.Minimum = _dataTable.AsEnumerable().Min(x => x.Field<int>("SupplierID"));
                    suppIdFilter.Increment = 1;
                    break;
                case "QuantityPerUnit":
                    var qpuFilter = (C1.Win.DataFilter.ChecklistFilter)e.Filter;
                    qpuFilter.ShowSearchBox = true;
                    qpuFilter.SelectAll();
                    break;
                case "CategoryID":
                    var categoryIdFilter = (C1.Win.DataFilter.RangeFilter)e.Filter;
                    categoryIdFilter.Maximum = _dataTable.AsEnumerable().Max(x => x.Field<int>("CategoryID"));
                    categoryIdFilter.Minimum = _dataTable.AsEnumerable().Min(x => x.Field<int>("CategoryID"));
                    categoryIdFilter.Increment = 1;
                    break;
                case "UnitPrice":
                    var unitPriceFilter = (C1.Win.DataFilter.RangeFilter)e.Filter;
                    unitPriceFilter.Maximum = Decimal.ToDouble(_dataTable.AsEnumerable().Max(x => x.Field<decimal>("UnitPrice")));
                    unitPriceFilter.Minimum = Decimal.ToDouble(_dataTable.AsEnumerable().Min(x => x.Field<decimal>("UnitPrice")));
                    unitPriceFilter.Increment = 0.01;
                    break;
                default: break;
            }
        }

We have added some additional functionalities to our blog sample application. These include saving the filters applied to the FlexGrid and loading the saved filters as required. Check out our documentation for more information.

Furthermore, we have added an option to enable or disable the automatic filtering of FlexGrid data based on the C1DataFilter and a dedicated button that users can click to apply the filtering to the grid explicitly.

Run the application and test the data filtering functionality.

Integrate powerful searching and filtering capabilities into FlexGrid to maximize the potential of your WinForms applications, where users can easily navigate through enormous datasets, derive useful insights, and make well-informed decisions with the ability to search, highlight, and filter data. Use these powerful capabilities to transform the way consumers engage with their data.

Download a search box sample from GitHub to try it out or access our DataFilter samples.

Begin exploring the possibilities today and improve your application's data exploration and analysis capabilities. Download the latest version of ComponentOne today!

If you have any inquiries, please leave them in the comments section below. Happy Coding!