New Features in ComponentOne FlexGrid 2020 v1
Many new features and improvements have been added in the latest release of both ComponentOne ASP.NET MVC and MVC Core Edition. Here we'll look at the new features that have been added to FlexGrid control.
Sort Multiple Columns Using Sorting Type Property
Before this release, only single-column sorting was possible in FlexGrid by setting the AllowSorting property to True. In this release, a new SortingType property of type C1.Web.Mvc.Grid.AllowSorting has been added. Using this, the sorting for FlexGrid can be defined.
In the image above, FlexGrid is sorted by the Name column first and then by the Sales column. Notice how after sorting glyphs, a number is displayed, which indicates the level of sorting done on that particular column.
To implement multi column sort, set the SortingType property to AllowSorting.MultiColumn.
<c1-flex-grid sorting-type="MultiColumn">
……
</c1-flex-grid>
The default value of SortingType property is AllowSorting.SingleColumn which have the same behavior as the previous versions.
Note: the AllowSorting property of FlexGrid is now deprecated.
Pin Columns by Using AllowPinning Property
To freeze (or pin in this case), the FrozenColumns property can be used. It works well in the code-behind, but if we need to freeze columns using the UI, then this property can be set on a user action like a button click.
Also, if we want to freeze columns that are at the rear end of FlexGrid, then users would need to move the column to the start and then freeze it, but this becomes quite tedious for a grid with numerous columns.
The AllowPinning property can be used in these types of scenarios.
This is a Boolean type property that will add pins to the column headers and clicking on this pin will pin (or freeze) that column when set to true.
The ID, Start, and Product columns are pinned in the image above. To allow pinning of the columns, just set the AllowPinning property to true.
<c1-flex-grid allow-pinning="true">
……
</c1-flex-grid>
Visit the Column Pinning page for the demo.
Group Columns by Adding Hierarchical Columns
A hierarchical column is a new feature added in this release by which column groups can be created that can be expanded or collapsed.
The column grouping can be achieved by simply creating hierarchical columns while defining the columns layout.
<c1-flex-grid id="colGroupsFlexGrid" auto-generate-columns="false">
……
<c1-flex-grid-column header="Performance" align="center" collapse-to="YTD">
<c1-flex-grid-column binding="YTD" format="p2" class="main-column"></c1-flex-grid-column>
<c1-flex-grid-column binding="M1" format="p2"></c1-flex-grid-column>
<c1-flex-grid-column binding="M6" format="p2"></c1-flex-grid-column>
<c1-flex-grid-column binding="M12" format="p2"></c1-flex-grid-column>
</c1-flex-grid-column>
</c1-flex-grid>
In the above code snippet, a Performance column with four child columns has been created. Notice how the CollapseTo property is used in the Performance column. This property will determine which of the child column will be displayed when the column group is collapsed.
Initially, all the columns will be displayed in an expanded state. But you can use the IsCollapsed property to change the initial state to collapsed. Set its value to true, and that particular column will be displayed in collapsed state.
<c1-flex-grid-column header="Performance" align="center" collapse-to="YTD" is-collapsed="true">
<c1-flex-grid-column binding="YTD" format="p2" class="main-column"></c1-flex-grid-column>
<c1-flex-grid-column binding="M1" format="p2"></c1-flex-grid-column>
<c1-flex-grid-column binding="M6" format="p2"></c1-flex-grid-column>
<c1-flex-grid-column binding="M12" format="p2"></c1-flex-grid-column>
</c1-flex-grid-column>
Visit the Column Groups page for the demo.
Customize Columns Using Cell Templates
In this release, a new property is added to the ColumnBase class known as Template of type string. This property is a simple but very powerful alternative to the ItemFormatter or FormatItem event. A string which contains information on how to format the particular cell of the column can be provided to this property. For example, refer to the code snippet below:
@{
const string upTmpl = @"<div class='diff-${value > 0 ? 'up' : 'down'}'<span>${value}:${col.format}</span><span style='font-size:120%' class='wj-glyph-${value > 0 ? 'up' : 'down'}'></span></div>";
}
This is an example of a template that uses various context variables and conditions to format each of the column cells based on its data. Add this string as the template of the Column by setting the template property while defining it:
<c1-flex-grid>
…
<c1-flex-grid-column binding="Profit" header="Profit" width='*' template="@upTmpl" is-read-only="true" format="c2"></c1-flex-grid-column>
</c1-flex-grid>
There are various context variables provided which can be used to format a particular cell. Follow this link that describes each of the variable in detail.
The above template will produce an output something like this:
Notice how each cell of the Profit column is customized on the basis of the data. Negative values are displayed as red and positive values as green.
Search Using the New FlexGridSearch Control
In many cases, the data displayed in FlexGrid is too large. Therefore, in this release, new FlexGridSearch control has been added that will make searching in FlexGrid easier. This control looks just like a simple search box with a clear button.
The FlexGridSearch control can be added just like other controls. While defining, provide the id of the FlexGrid control as the grid parameter to bind FlexGrid:
<c1-flex-grid id="grid">
…
</c1-flex-grid>
<c1-flex-grid-search id="search" grid="grid" delay="500"></c1-flex-grid-search>
The default CSS class that is used to highlight the search text is ‘wj-state-match'.
But the CssMatch property can be used to override the default class.
<style>
.custom-state-match {
background: #f4b41a;
color: #143d59;
font-weight: bold;
}
</style>
<c1-flex-grid-search id="search" grid="grid" css-match="custom-state-match"></c1-flex-grid-search>
Visit the FlexGridSearch page for a demo.
Interchange Rows and Columns Using TransposedGrid
By default, FlexGrid displays the data items as rows and an item's properties in each column. In TransposedGrid, the roles are reversed. The new control, which is an extension of the original FlexGrid control, displays the data items as columns and their properties as rows.
In the image below, notice how the headers are displayed in the rows and the actual data is represented in the columns.
Adding a TransposedGrid control is very similar to adding a FlexGrid. The main difference is that in FlexGrid, we define columns to display the data but in the TransposedGrid, we define transposed grid rows (since rows and columns are interchanged):
<c1-transposed-grid id="theTransposedGrid" auto-generate-rows="false" class="product-sheet-grid" is-read-only="true" headers-visibility="Row">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-transposed-grid-row binding="Image" header=" " align="center" width="80"></c1-transposed-grid-row>
<c1-transposed-grid-row binding="Name" header="Model" align="center" word-wrap="true"></c1-transposed-grid-row>
<c1-transposed-grid-row binding="Rating" header="Rating" align="center" format="n1" width="130"></c1-transposed-grid-row>
@* other rows *@
</c1-transposed-grid>
Visit the TransposedGrid page for a demo.
Copy the Headers Using the CopyHeaders Property
Earlier, whenever a copy operation was performed on the FlexGrid control, only the cells were copied. But using the CopyHeaders property, the column and/or row headers can also be copied. This property is a type of C1.Web.Mvc.Grid.CopyHeader enumeration. Setting its value to CopyHeader. Column will copy the column headers along with the data.
This can help copy or paste the grid’s data directly to the excel without creating the header row manually.
<c1-flex-grid copy-headers="Column">
…
</c1-flex-grid>
Automatically Adjust the Width of Columns Using DefaultTypeWidth
Using the DefaultTypeWidth property, one can assign the default width based on the DataType while auto-generating the columns. This property takes an instance of IDictionary<string, int>, where the keys are the data types, like String, Number, etc. and the value is their specific width. But, while assigning it in the tags, a data type and width pair of string can be provided separated by commas.
@{
string widths = "Number,50,String,150";
}
<c1-flex-grid default-type-width="@widths" auto-generate-columns="true"></c1-flex-grid>
Note that this property only works while generating the columns automatically.
New Features in ComponentOne FlexGrid
These were the key features that were added to FlexGrid in this release. This post does not contain all of the minor bug fixes and features added to other controls. For further reading, you may go through the changelog below:
ComponentOne 2020 v1 Release Notes
Please leave us your thoughts in the comments below, and happy coding!
Ashwin Saxena