Reasons to Migrate from TrueDBGrid to FlexGrid in Your WinForms DataGrid Application
There are many situations when we want to show our data in a tabular grid with a customized look, and for this, we have a common control named FlexGrid for all .NET and JavaScript platforms.
Although we have a few other datagrids in each platform like TrueDBGrid in WinForms, DataGrid in WPF, and GridView in WebForms, FlexGrid is the #1 grid common for all platforms.
FlexGrid (or C1FlexGrid) control is a powerful, full-featured grid. It provides all the basics plus advanced features such as outline trees, sorting, cell merging, masked editing, translated combo and image lists, and automatic data aggregation.
It can be used in bound mode, displaying data from any .NET data source, or in unbound mode, where the grid itself manages the data. That is the reason we have continued to enhance and port FlexGrid over the past several years.
FlexGrid vs TrueDBGrid for .NET 5+
Microsoft has released .NET 5 last year, which is the future of .NET. Throughout 2020 and 2021, we have been releasing .NET 5 versions for all ComponentOne WinForms controls. While we plan to support TrueDBGrid in .NET 5, we are mostly committing to FlexGrid for future enhancements, .NET 5-specific features (such as HighDPI), and future .NET 6 versions and beyond.
If you plan to migrate your application to .NET 5 or .NET 6, now is the perfect time to migrate your datagrid too.
As the subject itself suggests, in the rest of this blog, we will cover more reasons why you should move from TrueDBGrid to FlexGrid for .NET 5 and beyond. We will also guide you to solutions, such as samples and code snippets, in FlexGrid for some of the most useful features in TrueDBGrid.
Reasons to Migrate from TrueDBGrid to FlexGrid
Although both FlexGrid and TrueDBGrid are robust, simple-to-use grid controls that allow tabular data to be browsed, edited, added, removed, and manipulated. Still, there are many reasons why you should use FlexGrid over TrueDBGrid.
Styling:
In FlexGrid, you can create the CellStyle object as per your requirements and assigned that to rows, columns, and cell ranges. Styles follow a hierarchical model similar to styles in Microsoft Word or in cascading style sheets. Every property in a CellStyle object may be left unassigned.
In this case, the property's value is inherited from the parent style, which is usually the built-in CellStyleCollection.Normal style.
When you modify the properties of a CellStyle object, all cells that use that style are automatically repainted to reflect the changes. You can use the code snippet given below to apply formatting in FlexGrid using the CellStyle class.
// create style with red background
CellStyle cs = _flex.Styles.Add("red");
Style.BackColor = Color.Red;
// create style with green background
cs = _flex.Styles.Add("green");
Style.BackColor = Color.Green;
// create style with bold font
cs = _flex.Styles.Add("bold");
Style.Font = new Font("Tahoma", 8, FontStyle.Bold);
// assign red style to a column
_flex.Cols[3].Style = _flex.Styles["red"];
// assign green style to a row
_flex.Rows[3].Style = _flex.Styles["green"];
// assign bold style to a cell range
CellRange rg = _flex.GetCellRange(2, 2, 4, 4);
rg.Style = _flex.Styles["bold"];
On the other hand, in TrueDBGrid, the style object cannot be allocated directly at the cell level. You need some special events like FetchRowStyle or FetchCellStyle to manage this.
FlexGrid Styling
C1RulesManager Formatting
There are various situations where the user needs to format the data shown in the grid-based on specific conditions according to their requirements. In this scenario, the need for Conditional formatting occurs. Last year a new control, “C1RulesManager”, was added in the control suite that delivers complete runtime conditional formatting management.
This control can be attached to C1FlexGrid to provide Excel-like conditional formatting, but it will not work with C1TrueDBGrid.
To know more about C1RulesManager, please visit the blog post here.
Cell-merging
Both the controls have merging functionality, but FlexGrid offers to merge the data at each level: rows, columns, and cell range to enhance appearance or clarity. In FlexGrid, if you wanted the grid to merge cells using a case-insensitive comparison and trimming blanks, you could write a custom class that implements IComparer and assign it to the CustomComparer property.
For samples that show how to implement custom merging logic, see the CustomMerge, CustomMerge2, CustomMerge3, and CustomMerge4 product samples that show how you can create merged ranges by overriding the GetMergedRange method to customize grouping.
On the other hand, in TrueDBGrid, for cell-merging, you need to use the Merge property of the C1DisplayColumn object, using the ColumnMergeEnum. The drawback of Cell-Merging in TrueDBGrid is that if you set the Merge property to Free or Restricted for a column, it will restrict editing in the merged range.
No property or method is available to define your custom cell range to be merged in TrueDBGrid.
Multi-column Sorting
MultiColumn Sorting makes sense only if 2/more rows contain common values for some column(s). In that scenario, if we apply sorting 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 + ...etc.
In C1FlexGrid for applying MultiColumnSort, all you need to do is set AllowSorting to MultiColumn, but there is no direct feature available for this in TrueDBGrid.
In the ComponentOne 2021 v1 release, we added a new feature in FlexGrid’s Multi-column filtering functionality that allows you to sort multiple columns in a different order by simply holding the CTRL key and clicking multiple column headers.
You can define the AllowSorting property of FlexGrid as given below to apply Multi-Column sorting.
_flex.AllowSorting = C1.Win.C1FlexGrid.AllowSortingEnum.MultiColumn;
AutoSearch:
For searching the entries as the user types, FlexGrid has AutoSearch property which will search the current column as the user types, automatically moving the cursor and highlighting matches using the CellStyleCollection.Search style.
The search is case-insensitive. The search is canceled when the user presses the ESC key or moves the selection with the mouse or cursor keys. You can apply the AutoSearch property as given below:
_flex.AutoSearch = AutoSearchEnum.FromTop;
In TrueDBGrid, there is no direct feature for this, so you need to handle multiple events to achieve the same as described here.
HostControls:
FlexGrid can easily access the cell, so it is easy to associate different controls like buttons, text boxes, and even other grids into a grid cell using a custom class that puts that particular control in the cell’s bound and handle its re-positioning.
You can go through the HostControls product sample of FlexGrid to learn how you can do the same as it is not possible to access the cell in TrueDBGrid, so we cannot achieve the same with it.
Filtering:
Usually, the grid supports two types of filtering, one is Header-Based filtering, and the second one is filtering via Filter Bar. C1TrueDGrid supports both types of filters. You can add the FilterBar by defining the FilterBar property of TrueDBGrid to True.
To add Header-Based filters, you need to set the FilterDropDown property of the DataColumn to true and the FilterBar property to false.
C1FlexGrid supports Header-Based filtering, and you can add it by defining the AllowFiltering property of FlexGrid to true. Although filter rows are not built into the C1FlexGrid control, implementing them is relatively easy. We provide a FilterRow sample that shows how to do it.
FlexGrid supports customization of the Header-Based filters. Custom filters may be created to handle specialized values. For example, custom filters would be recommended to filter on colors, geographic, or custom data types.
To customize the filters in FlexGrid, you need to create two classes that inherit: IC1ColumnFilter and IC1ColumnFilterEditor.
You can check out the CustomFilters product sample that contains implementations of three custom filters used for filtering values of type Color, DateTime, and string. On the other hand, C1TrueDBGrid does not contain any API to customize the filter dropdown.
Tree Grid:
In a hierarchical data model, the data are organized into a tree-like structure. The data are stored as records that are connected records. In C1TrueDBGrid, you can show the hierarchical data in the bound mode using the DataView property as DataViewEnum.Hierarchical, but there is no way to maintain the same structure in unbound mode.
In FlexGrid, you can add hierarchical grouping to a regular data grid and display it in a Tree-like structure. The advance of this feature in FlexGrid is that you can achieve this view in bound and unbound mode both.
To learn more about this, please refer to the documentation link here.
In the 2019 v3 release of ComponentOne, FlexGrid added a new feature, Row Details, in C1FlexGrid, and you can use it to achieve the hierarchical view. For more information on Row Details, please visit the blog here.
Editor:
FlexGrid supports different editors for each cell. However, TrueDBGrid supports the editor on column level only. You cannot have a different editor on each cell in C1TrueDBGrid.
The code below uses the SetupEditor event to customize the current editor by setting two properties.
void _flex_SetupEditor(object sender, C1.Win.FlexGrid.RowColEventArgs e)
{
TextBox tb = _flex.Editor as TextBox;
if (tb != null)
{
tb.CharacterCasing = CharacterCasing.Upper;
tb.MaxLength = 12;
}
}
Show Sparklines:
FlexGrid supports displaying the Line, Column, and Winloss sparklines in columns with data of type array, list, or ObservableCollection. It also supports extended features of sparkline such as styling sparklines and displaying X-axis, markers, etc. There is no way to show the sparklines in TrueDBGrid.
Sparklines in FlexGrid
Star-Sizing:
Star-sizing is a powerful and flexible feature of FlexGrid that allows you to specify how the total width has to be distributed among columns. It allows you to extend any set of columns and specify how space should be distributed among them.
FlexGrid allows you to specify the sizing for its columns through the StarWidth property of the Column class, but there is no way to achieve the same in TrueDBGrid.
The following code illustrates the use of the StarWidth property to specify star sizing for the columns.
c1FlexGrid1.Cols[1].StarWidth = "*";
c1FlexGrid1.Cols[2].StarWidth = "2*";
c1FlexGrid1.Cols[3].StarWidth = "4*";
c1FlexGrid1.Cols[4].StarWidth = "*";
c1FlexGrid1.Cols[5].StarWidth = "*";
c1FlexGrid1.Cols[6].StarWidth = "*";
//Setting the MinWidth property to prevent the column from getting too narrow
c1FlexGrid1.Cols[1].MinWidth = 80;
Exporting and Printing:
When end-users are working on data-intensive applications, they may need to take a snapshot of their data to preserve a particular view or set of data. One way to accomplish this is to export the grid's view to some files once sorted and analyzed. Both the grids support several exporting formats.
A TrueDBGrid can be exported to Excel, HTML, PDF, RTF, and Delimited text File using ExportTo or different available methods.
Export FlexGrid to delimited text (Excel) using the SaveGrid/SaveExcel method and image using the CreateImage method. There is no direct way to export FlexGrid to PDF, but there is a workaround sample PdfExport showing how to achieve the same in FlexGrid.
Printing is an essential feature for any tool. While the Printing feature is concerned, a very frequently asked question from the customers is regarding the options to set different Printing Parameters like PageSize, Margins, Header, Footer, etc.
TrueDBGrid has PrintInfo class that specifies page layout and print job characteristics such as the name of the output device, margin settings, page headers and footers, and the number of copies to print.
In Flexgrid, there is a method called PrintGrid, which is used to print the grid data.
Since there is no build-in class for setting Printing Parameters in FlexGrid but the PrintParameters property exposes additional printing properties such as the font to use for headers and footers, and a .NET Framework PrintDocument object that can be used to select the printer, paper size, and orientation, margins, and so on.
Please refer to the documentation to learn more about printing in FlexGrid and TrueDBGrid.
Data Annotation:
Data annotation means adding meaningful metadata tags to the classes and other objects, making it easier to bridge the gap between models and views by performing data validation and displaying appropriate messages to the end-users. C1FlexGrid 2020v1 includes a column-level property called EditorValidation.
This property consists of validation rules that enhance data evaluation when applied to the columns of the grid. Still, there is no built-in class available at grid level or column level to apply the validation rules in C1TrueDBGrid.
You can learn more about Data Validation in C1FlexGrid from the blog here.
The .NET 5 version of C1FlexGrid has added missing features from the preview like GroupPanel, import, and export to Excel and CSV. And For .NET 4.5.2, C1FlexGrid is enhanced with an optional context menu on the column headers to sort, hide, and auto-size columns.
FlexGrid can do pretty much everything that TrueDBGrid can do except splits, but you can achieve the same using the Splits product sample of FlexGrid.
If you have an old application and cannot afford to make any changes to it, you need not worry as we have also planned to port C1TrueDBGrid.NET 5 by 2021 v3, i.e., till the time we have done the majority of our control porting.
If you plan to create any new application or your project is not so old that it contains a grid, we would suggest you use the choose C1FlexGrid over C1TrueDBGrid as it is easier to do customization in C1FlexGrid, and the new features will be added in C1FlexGrid only.
By the time C1TrueDBGrid is not ported to .NET 5, and you are planning to update your application to .NET 5, you can use .NET 4.5.2 controls in your application.
If you have any questions, you can leave them in the comments below.
