How to Edit FlexGrid Filters at Runtime in a WinForms DataGrid

While FlexGrid is jam-packed with cool features that can be implemented directly in the designer without writing a single line of code, one of our latest samples available on GitHub showcases the integration of our FilterEditor with FlexGrid for WinForms. This sample showcases how FilterEditor can be invoked from the context menu at runtime and how filter summaries can be displayed in the footer of the grid after filtering data, as shown in the screenshot below:

This blog aims to dive through the code and demonstrate how the above sample was laid out. Without further ado, let’s get started!

Ready to Get Started? Download ComponentOne Today!

Quick Setup

To begin, we have to drag and drop both a FlexGrid and a FilterEditor to the form. To bind the FlexGrid and FilterEditor together, simply set the DataSource property for both controls to the same object.

c1FlexGrid1.DataSource = dt;
c1FilterEditor1.DataSource = dt;

This will provide the same values for both the FlexGrid and FilterEditor controls. To link them together and apply the changes presented in the filter to the grid, we need to use the FilterEditor’s ApplyFilterAsync() method. We’ll also need some event to call the ApplyFilterAsync() method after we are done editing our filter values.

Edit Filter with Form Button

Typically, a button makes a perfect control to accomplish firing an event that we want to be applied to the grid, so we create two buttons: the first for applying the filter and the second for resetting the filter.

Below is a screenshot of the simple lines of code included in these button-click events that make the magic happen:

This is enough to add your basic filtering functionality to the FlexGrid via the FilterEditor control. The complete GitHub sample has some additional features we want to highlight, and we recommend viewing the code directly.

Edit Filter with Context Menu

To add a customized context menu to your FlexGrid, you’ll want to add the C1.Win.Command.dll to your project via NuGet. Inside the Form_Load event, you’ll need to create a C1CommandHolder object to hold the context menu commands you’ll want to add to your FlexGrid. This can be done with the following code:

C1CommandHolder ch = C1CommandHolder.CreateCommandHolder(this);                               

For this example, we’ll create a copy command, and through the Click event, we’ll be able to copy the command when the menu item is clicked. Additionally, we’ll use a query handler so that the commands are kept up to date automatically through C1Command as follows:

// Create and set up the Copy command
C1Command cmdCopy = ch.CreateCommand();
cmdCopy.Text = "&Copy";
cmdCopy.Click += new C1.Win.C1Command.ClickEventHandler(clickCopy);
cmdCopy.CommandStateQuery += new C1.Win.C1Command.CommandStateQueryEventHandler(queryCopy);                     

Next, we’ll need to create a context menu to hold the copy command and assign that context menu to the FlexGrid control. The context menu will be created when you use C1CommandHolder to create a command and assign it to the context menu. This is done through the C1CommandHolder.CreateCommand() and C1CommandHolder.SetC1ContextMenu() methods:

C1ContextMenu cm = ch.CreateCommand(typeof(C1ContextMenu)) as C1ContextMenu;

// Fill it with the links to the commands
cm.CommandLinks.Add(new C1CommandLink(cmdCopy));
ch.SetC1ContextMenu(flexGrid1, cm);                           

Lastly, you’ll want to invoke the clickCopy() method to handle the copy command action. The queryCopy() method will provide the current state of the copy command to ensure the proper value is being copied. When you click the copy command from the context menu, the value inside the FlexGrid cell will be copied to your clipboard:

private void clickCopy(object sender, C1.Win.Command.ClickEventArgs e)
    {
        this.flexGrid1.Copy();
    }
//provides the current state of the copy command
private void queryCopy(object sender, C1.Win.Command.CommandStateQueryEventArgs e)
    {
        e.Enabled = this.flexGrid1.Selection.IsValid;
    }

Here, we can see the Copy command in our context menu, with paste functionality working through the standard keyboard shortcut of Ctrl+V:

Filter Summary Footer, Checkbox Filtering, and More

In our sample provided on GitHub, features such as a checkbox that can be toggled to apply or remove the filter from the grid, as well as a filter summary set into the footer of the grid, can be seen:

In our sample, a user control is created that handles the checkbox filtering and summary panel. To see the exact code, feel free to check out the exact file here containing the checkbox filtering and filter summary footer or download the complete sample from the main GitHub page linked above. To learn more about ComponentOne controls and everything Mescius has to offer, check out our main page for more information!

Ready to Get Started? Download ComponentOne Today!