There’s often a need to organize the columns of a grid into groups to present the data more clearly. The ComponentOne 2021v3 release unveiled FlexGrid capabilities to organize columns into logical groups known as Column Bands, which lets you create Banded Grid View using the new C1FlexGridBandedView component.
The Banded Grid View makes your data look more organized and easier to view by allowing you to manage the columns under a related column band.
Let’s say you need to show data related to Cars, you can create bands like Performance, Engine, Transmission, MPG, and group-related columns. This blog shows you how to use the C1FlexGridBandedView component and the design-time BandEditor to create BandedGridView and present your data in a more organized way.
Create a new project by following the steps below:
The Column Bands feature of the FlexGrid uses the C1FlexGridBandedView class of C1.Win.C1FlexGrid namespace of C1.Win.C1FlexGrid.BandedView assembly. To add the C1FlexGridBandedView component and bind it to the FlexGrid, follow these steps:
To create the bands at design-time, we will use the Band Editor. It allows you to create new bands and customize them at design-time. The Bands Editor has two panes, one on the left side and the other on the right side of it.
The left pane provides two tabs, Band settings, and Fields. The Band settings tab lets you customize properties like Caption, ColSpan, RowSpan, Image, and Visibility for each band.
The Fields tab lets you check or uncheck the band names. The right pane has two parts: a toolbar and a grid. The toolbar displays all band operation buttons towards the top, such as Add Band, Add Child Band, Add Parent Band, and Remove Band.
Just below the toolbar, there is a grid with all the data columns or fields. All changes post the addition, deletion, or customization of bands and are reflected in the grid area.
To open the Band Editor, click the “Edit Bands” option of the Tasks menu of the C1FlexGridBandedView component.
When the Band Editor opens for the first time, it shows a band for each field. You do not have to create one for every column. To create the layout shown in the image above, follow these steps:
A layout like the one shown below will be created:
Since the field in the performance band can be further categorized into Engine and Transmission related fields. We will create one more level of Column Bands, in this case, Engine and Transmission column band.
To create multi-level bands, we will create a column Band under another band using the steps below:
You will get a layout like the one shown below:
If a band has a child band, you can also make that Band collapsible. To make a multi-level band collapse, set the CollapseTo property to the column name of your choice.
Once all the collapsible columns are set, our layout is complete. You will get a BandedGridView like the one shown below:
To read more about FlexGrid’s Column Bands, please refer to the documentation. See Column Bands in action by checking out the ColumnBands sample.