Wijmo5 FlexGrid Basic Tutorial (iv) "Merging cells, merging cell text styles"

Wijmo5 FlexGrid Support merging cells, this time you need to set the Allowmerging property to Wijmo.grid.AllowMerging.All. Then set allowmerging to True for the columns that need to be merged. Code reference:

Columns: [
{header: ' id ', binding: ' ID ', width:50, Isreadonly:true, allowmerging:true},
{header: ' Country ', Binding: ' Country ', width:100, allowmerging:true},

],

In this case, the automatic merge cell contents will be implemented. For merged cells, you will not select all the merged rows directly. If you want to implement this feature, you need to implement two points.
1. Set SelectionMode

By modifying SelectionMode to Wijmo.grid.SelectionMode.RowRange, you can select multiple rows.

2. Multiple elections in the SelectionChanged incident

Determines whether you select a single cell or a merged cell to change the range of the selection by using the Select method. Code reference:

if (Grid.getmergedrange (E.panel, E.row, e.col)!= null) {if (Grid.getmergedrange, E.panel, E.row
). Issinglecell = = False) {
Grid.select (Grid.getmergedrange (E.panel, E.row, E.col), True);}}
);

You can then implement the merged cells and the row selections for the merged cells.

In the previous section, we've covered how to merge cells, and this article explains how to change the style of merged cells based on the above. For the cell style, we've described it before by Itemformatter, and you can set it by merging the cell styles. The user needs to use the Getmergerange method to determine if the merged cell is, and then modify the style for the merged cells.

In a style, for example, text is centered. The horizontal position of the text is centered through the Style.textalign property, and the text is centered vertically through the CSS style. In total, the code references are as follows:

Itemformatter:function (panel, R, c, cell) {
//validate Celltype and if merge cell
if (Wijmo.grid.CellType.Cell = = Panel.celltype
) {
var range = Panel.grid.getMergedRange (panel, R, c);
if (range) {
cell.style.textAlign = ' center ';
cell.innerhtml = ' <div> ' + cell.innerhtml + ' </div> ';

Wijmo.setcss (Cell.children[0], {
position: ' relative ', Top
: ' 50% ',
Transform: ' Translatey (-50%) '
});
}
}
}