How to Add a Search Box to Filter Your WinForms Datagrid

In today’s data-driven world, we commonly use datagrids to manage massive datasets. We can incorporate searching and filtering capabilities within these grids to better explore and analyze data in these grids.

To showcase the implementation, we will consider a scenario where we will be using a FlexGrid control in a WinForms application. The grid is bound to the NWind database's Products table, shipped with the ComponentOne Samples.

This blog will show you how to incorporate the searching feature in FlexGrid by using the C1FlexGridSearchPanel control as a search box. Additionally, we will utilize the C1DataFilter control to add an enhanced filtering feature to the grid, enabling users to refine the displayed data based on their preferences.

Ready to Test this Feature? Download ComponentOne Today!

Filtering the Datagrid Using a Search Panel

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 those texts. 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.

Here are the steps to add a search panel to FlexGrid for WinForms:

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. FlexGrid search panel to 'All'. This setting ensures that all instances of the searched string in a cell will be highlighted. We also have the choice 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 Data Filter

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 to the FlexGrid in the above application, you can follow these steps:

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

2. Add 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 this link for more information regarding the same.

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 the sample from here: DataGridSearchFilter.zip

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!