How to Filter DataGridView in a WinForms App

Why waste time searching through endless rows? Let filtering do the hard work for you!

DataGrids are essential for displaying and managing large sets of information, but navigating through endless rows can quickly become overwhelming. Filtering offers a simple yet powerful way to narrow down the data, enabling users to find what they need with ease.

The DataGridView control provides only basic filtering functionality, which is where ComponentOne's C1DataFilter control truly shines. It enables users to filter data effortlessly based on various criteria or conditions, and it saves you time by automatically generating the filter panel UI.

Ready to Get Started? Download ComponentOne Today!

In this blog, we'll explore how to enhance your DataGridView app by integrating the C1DataFilter and unlocking advanced filtering capabilities to deliver a smoother and more intuitive user experience. We will implement this by following the steps below:

1. Set Up a WinForms App with DataGridView and C1DataFilter
2. Set Up a DataSource and Bind with DataGridView
3. Integrate the C1DataFilter Control with DataGridView

Set Up a WinForms App with DataGridView and C1DataFilter

Let's begin by creating a new "Windows Forms App" Project targeting .NET 8 using Visual Studio 2022 and installing the following NuGet packages to the project:

• C1.Win.DataFilter
• C1.Win.Themes

Once the packages are installed, drag and drop a DataGridView control and a C1DataFilter control on the form, as shown in the image below:

Note: For the demo project, we are using C1Themes to enhance the look by applying the new "Office365Green" theme.

Set Up a DataSource and Bind with DataGridView

In this step, we will create a DataTable containing sample data to manage the inventory of various products. Let's begin by loading the data from an XML file using the code below:

internal static class DataService
{
    internal static DataTable GetData()
    {
        var table = new DataTable();
        table.ReadXml("..\\..\\..\\Data\\inventory_data.xml");
        return table;
    }
}

Now, this DataTable can be bound to the DataGridView using its DataSource property as follows:

DataTable _dataSource = DataService.GetData();
dataGridView1.DataSource = _dataSource;

Integrate the C1DataFilter Control with DataGridView

The DataGridView now displays the inventory management data. Next, we will integrate it with the C1DataFilter to provide filtering functionality by binding it to the same DataTable used for the DataGridView.

Before assigning the DataSource, we must set the AutoGenerateFilters property of the C1DataFilter to true. This ensures that filters are automatically generated based on the data types of the fields in the DataSource.

c1DataFilter1.AutoGenerateFilters = true;
c1DataFilter1.DataSource = _dataSource;

The C1DataFilter automatically generates filters, but filters can also be customized by handling the FilterAutoGenerating event. Here, we'll customize a filter to show a search box using this event:

c1DataFilter1.FilterAutoGenerating += C1DataFilter1_FilterAutoGenerating;

private void C1DataFilter1_FilterAutoGenerating(object? sender, C1.DataFilter.FilterAutoGeneratingEventArgs e)
{
    if(e.Filter is ChecklistFilter checkListFilter)
    {
        checkListFilter.ShowSearchBox = true;
    }
}

After implementing all the steps, the final application will appear as below:

Upgrade to a Grid with Built-in Excel-Like Filtering

In the previous section, we learned how to leverage the C1DataFilter control to implement powerful and customizable filtering in the standard DataGridView. While this approach offers flexibility, a built-in Excel-like filtering solution that requires no custom implementation can be a major time-saver, streamlining the development process.

This is where ComponentOne's FlexGrid control truly shines. Designed to be a lightweight yet feature-rich DataGrid, it offers built-in filtering functionality that simplifies the process of refining and analyzing data. In this section, we'll explore how you can use filtering in FlexGrid, taking your application's data interactivity to the next level.

Configure FlexGrid to Replace the DataGridView

Let's start by installing the C1.Win.FlexGrid NuGet package in our project. Once the package is installed, remove the existing DataGridView and C1DataFilter controls from the form and drag and drop the FlexGrid control onto the form to replace them.

Next, in the code-behind, set the same DataTable we used earlier with the DataGridView to the DataSource property of the C1FlexGrid. Finally, we will enable the built-in filtering feature of the FlexGrid by setting the AllowFiltering property to true.

c1FlexGrid1.DataSource = DataService.GetData();
c1FlexGrid1.AllowFiltering = true;

With this simple step completed, the final application appears as below:

You can download the sample project to see the complete implementation.

Ready to check it out? Download ComponentOne Today!

Conclusion

In this blog post, we explored the simple steps required to implement advanced filtering in a DataGridView using the C1DataFilter control. The C1DataFilter control is highly versatile and can be used with a variety of data-aware controls, including grids, lists, tree views, charts, and more. For further details, be sure to check out its official documentation.

Feel free to try it out in your projects, and don't hesitate to share your feedback or questions in the comments section below. Happy coding!