With the advent of the 2021 v1 release of ComponentOne WinForms, two new features, Column Header Context Menu and Advanced Multi-Column Sorting, have been introduced in FlexGrid for WinForms API. With these features, end-users have the accessibility to hide, group, and sort C1FlexGrid data as per their requirements.

This article focuses on the highlights of these features and how they work to enhance the user experience.

Try ComponentOne Studio

Download the latest version of ComponentOne Studio Enterprise

Download Now!

Column Header Context Menu

The Column Header Context Menu enables end-users to manipulate a column by right-clicking on the column header to select the context menu option. To enable this feature, the C1FlexGrid control provides the ColumnContextMenuEnabled property in the C1FlexGridBase class. You can initialize this property using the code below:

//Opens the context menu when user performs right click on column header
_flex.ColumnContextMenuEnabled = true;

By default, this context menu has the following options, which are used to process the data.

AutoSize: This menu option is used to adjust the column width according to the data of the clicked column.

AutoSizeAllColumns: This menu option is used to adjust the column width according to the data of all the columns at once.

GroupByThisColumn: This menu option is used to apply the grouping based on the data of the particular clicked column. You can group columns simply by right-clicking a column header and selecting the Group by This Column option from the context menu at runtime.

UnGroup: This menu option is used to clear the grouping from the grid.

SortAscending/SortDescending: These menu options are used to sort the data of the particular column in ascending or descending order as per the selection.

HideThisColumn: This menu option is used to hide the particular column from the C1FlexGrid.

In addition to these standard menu options, you can also add your own menu options and control their functionalities. To add your own menu item, handle the ColumnContextMenuOpening event of C1FlexGridBase class and add the items in the ContextMenuStrip object to the ColumnContextMenuOpeningEventArgs of the event.

To handle the functionality of the clicked item, handle the ItemClicked event of the ContextMenuStrip and check the ClickedItem text for the particular item’s action.

See the code below to implement:

bool temp = true;
private void C1FlexGrid1_ColumnContextMenuOpening(object sender, C1.Win.C1FlexGrid.ColumnContextMenuOpeningEventArgs e)

        {
           e.ContextMenuStrip.Items.Add("Show Filter Option");
           e.ContextMenuStrip.Items.Add("Show Conditional Formatting Option");
            if (temp)
            {
                e.ContextMenuStrip.ItemClicked += ContextMenuStrip_ItemClicked;
                temp = false;
            }
        }

  private void ContextMenuStrip_ItemClicked(object sender, ToolStripItemClickedEventArgs e)
        {
            if(e.ClickedItem.Text == "Show Filter Option")
            { 
              //Filter options
            }
            if (e.ClickedItem.Text == "Show Conditional Formatting Option")
            {
               //Conditional Formatting Options
            }
        }

Note: Use a temporary Boolean variable to create the handler of the ItemClicked event of the ContextMenuStrip once. Otherwise, it will be called multiple times from the second click onwards.

In the attached sample, we added two extra context menu items used to provide end-users with the ability to apply conditional formatting using C1RulesManager and apply it to filters based on multiple criteria with C1FilterEditor.

To learn more about these controls, check out these blogs: Introducing UI-based Rules Manager in WinForms and Introduction to FilterEditor in DataFilters for WinForms.

The GIF below shows how the above menu items work at runtime in C1FlexGrid control.

new flexgrid feature

Advanced Multi-column Sorting

The C1FlexGrid control allows users to sort the grid by column by simply clicking the column header to toggle the sorting states to ascending and descending. Sorting is enabled by default in C1FlexGrid via the AllowSorting property of C1FlexGridBase. Use the AllowSortingEnum enumeration to utilize the different sorting functionalities offered by C1FlexGrid. The AllowSortingEnum enumeration allows you to choose whether to auto-sort columns, single column, multiple columns, column ranges, or prevent sorting.

MultiColumn Sorting makes sense only if 2 or more rows contain common values for some column(s). In that scenario, if we apply to sort on the first column, then the data would seem to be unaffected (since for that column, rows contain the same values). Therefore we would then need to sort the data on the first column + second column + and so on.

Before the 2021 v1 release, C1FlexGrid offered multicolumn sorting for users to sort a range of columns by clicking on the column header of the rightmost column in the range. You can achieve the same functionality by setting the AllowSorting property to AllowSortingEnum.ColumnRange.

In the 2021 v1 release, the new feature in FlexGrid’s Multi-column sorting functionality allows users to sort multiple columns in a different order. Define the AllowSorting property of FlexGrid (below) to achieve advanced multi-column sorting.

_flex.AllowSorting = C1.Win.C1FlexGrid.AllowSortingEnum.MultiColumn;

We added one more member in the AllowSortEnum enumeration–Auto. This provides both default single-column and multi-column sorting functionalities to achieve the multi-column sorting. To use, simply hold the CTRL key and clicking multiple column headers.

See the GIF below to learn how sorting works in the C1FlexGrid control.

column sorting

Note: When the grid is used in bound mode, the sorting is performed by the C1.Win.C1FlexGrid.C1FlexGridBase.DataSource object. If the data source object does not support sorting, the AllowSorting property has no effect. In unbound mode, you can also sort data using the Sort method.

We hope you like this new C1FlexGrid control feature. Download ComponentOne today and try it yourself!

Happy coding!

This post does not contain all 2021 v1 features and improvements, such as minor bug fixes and features added to other controls. To learn more, check out the ComponentOne 2021 v1 Release Notes.

Try ComponentOne Studio

Download the latest version of ComponentOne Studio Enterprise

Download Now!