New Features in ComponentOne FlexGrid

The 2019 v3 release of ComponentOne MVC Core Edition has added many new features. Here, we'll give an overview of all of the new FlexGrid features and enhancements.

FlexGrid - New Properties

In FlexGrid, you’ll find two new properties: LazyRender and RefreshOnEdit. These features will provide more control over the performance of FlexGrid. The AutoRowHeights property will automatically resize the rows of FlexGrid according to content, when the data or the layout of the grid changes. MultiRange, a new SelectionMode, has also been added. If the SelectionMode is set to MultiRange, you will be able to select multiple ranges of cells by pressing the Ctrl key. You can get all of the selected ranges by using the selectedRanges property of FlexGrid.

Automatically Resize Rows using AutoRowHeights

The AutoRowHeights property is a Boolean property that will automatically adjust the row height of FlexGrid whenever the grid is edited, sorted, filtered, or the layout of the grid is changed.

<c1-flex-grid auto-row-heights="true">  
……  
</c1-flex-grid>

This property is best used when data in a column needs to be wrapped. When the WordWrap property is set true for a column, the grid will automatically wrap the content at the time of creation or after editing, without changing the width of the column.

Please refer to the screenshot below:

As you can see in the screenshot above, the ‘Name’ column has wrapped the words to the next line using the AutoRowHeights property. If you edit any of the rows in the ‘Name’ column, it will automatically wrap the data.

This property is best suited for grids that have a small number of rows. Before this property, you would have used the autoSizeRows method to resize rows according to their content. This is an expensive operation and will downgrade performance.

The default value of the AutoRowHeights is false.

Selecting Multiple Ranges using the MultiRange SelectionMode

We have introduced a new SelectionMode known as MultiRange. Similar to Excel, you will be able to select multiple ranges of cells by pressing the 'Ctrl' key.

To use MultiRange as the SelectionMode, simply set its value to: C1.Web.Mvc.Grid.SelectionMode.MultiRange.

<c1-flex-grid selection-mode="MultiRange"> 
…… 
</c1-flex-grid> 

The MultiRange selection can be used to display Excel-like aggregates at the bottom of the grid. It can also be used to copy multiple selections just like Excel. For example, if you wish to copy ‘Name’ and ‘Expenses’ only, you can select both columns using the 'Ctrl' key and copy them:

You can grab all the selected cell ranges by using the newly added SelectedRanges property. This property is an instance of an array of CellRange objects. In this array, the first CellRange object is always the current selection of the grid. This property does not account for overlapping selections so you may have to be cautious while performing actions like aggregating a series.

Note that FlexGrid in MVC does not support the SelectedRanges property on the server-side because it is used to complete the selection by the user on the client-side.

Controlling Performance using LazyRender and RefreshOnEdit

The LazyRender and RefreshOnEdit properties were added to control the performance of FlexGrid. Let’s take a look at both of the properties one by one:

LazyRender

The LazyRender property is used to control how the cells are rendered in the DOM. When we scroll the grid, the cells that are in the view range are re-created, even if the data of these cells does not change. This creates unnecessary overhead for the grid and can sometimes result in bad performance. By setting this property to true, we will prevent the grid from re-creating the cells, which are already rendered in the DOM and do not require any update. You can see the difference by adding a console.log statement in the ItemFormatter of FlexGrid.

function itemFormatter(panel, row, col, cell) { 
         console.log(panel.cellType, row, col); 
         ... 

}

By adding the console.log statement, we can see the row, column, and cell type that are currently being rendered.

In Figure 4 below, the LazyRender property is set to false. When we scroll down, the ItemFormatter runs for each of the cells that are currently visible in the DOM.

Now, the value of LazyRender property is set to true. Refer to figure 5. If we scroll down, you can see in the console that only the new row (which is added to the DOM) is rendered. The cells that were already rendered are not rendered again.

You can set the value of LazyRender property using the following:

<c1-flex-grid lazy-render="false"> 
… 
</c1-flex-grid> 

The default value of LazyRender property is true.

RefreshOnEdit

Also, a Boolean type property RefreshOnEdit determines whether all of the cells in the grid should be refreshed after a cell has been edited. Before this property was included, the grid was refreshed any time a cell was edited. With a large number of data, this can reduce the performance of the grid. However, using this property, we can control whether the grid should be refreshed after editing or not. To see the difference, we used a counter variable, refreshCount and handled the OnClientRefreshed event. In the event handler, we have incremented the value of refreshCount and logged it on the console.

First, we set the value of the RefreshOnEdit property to true. In the Figure 6 below, notice that after editing the grid, the total refresh count becomes 3.

The first-time counter is incremented when the grid is rendered for the first time. The second refresh occurs when the grid restores the cell that has been edited. And, the last refresh occurs after the grid has been edited. This time it refreshes all the cells.

Now, we change the value of RefreshOnEdit to false. If we follow the same procedure as above,we can see in Figure 7 that the refresh only occurs twice.

As you can see, the first refresh occurs when the grid is created for the first time and the second refresh occurs after the cell has been edited.

You can set the value of RefreshOnEdit property to false as follows:

<c1-flex-grid refresh-on-edit="false"> 
…. 
</c1-flex-grid> 

The default value of RefreshOnEdit is true.

You can download the sample used in this article here.

The 2019 v3 release of ComponentOne MVC Core edition includes several new properties that will help improve performance in FlexGrid. The three new properties will not only help developers create better products but give the end-user more control and customization. With the recent enhancements to FlexGrid, it’s possible to automatically resize rows, select multiple ranges and control performance.

For more information about the latest release, visit the ComponentOne blog. To learn more about the most recent updates to ComponentOne MVC Core edition, visit our documentation and samples.