Split

This feature allows splitting the Grid into multiple views, either by using the cell context menu, or programmatically by calling split().

It handles splitting in 3 "directions":

• 'horizontal' - Splitting the grid into 2 sub-views, one above the other.
• 'vertical' - Splitting the grid into 2 sub-views, one to the left of the other.
• 'both' - Splitting the grid into 4 sub-views, one in each corner.

Or, by supplying a record and/or a column to split by.

The first sub-view (top, left or top-left depending on split direction) is the original grid, and the others are clones of the original. The clones share the same store, columns and selection.

Sub-views in the same column sync their scrolling horizontally, and sub-views in the same row sync their scrolling vertically.

Sub-views are separated by splitters, that can be dragged to resize the views.

Splitting a multi-region grid (two regions supported) only includes the region in which the split was performed in the split view.

Splitting works best on grids that use fixed column widths, since flexed columns will resize when the grid is split.

Splitting programmatically

The split feature assigns two methods to the owning grid:

• split() - Splits the grid into sub-views.
• unsplit() - Re-joins the sub-views into a single grid.

Use them to split programmatically in your app.

// Split horizontally (eg. at the row in the center of the grid)
await grid.split({ direction : 'horizontal' });

// Split both ways by a specific column and record
await grid.split({
   atRecord : grid.store.getById(10),
   atColumn : grid.columns.get('city')
});

// Remove splits, returning to a single grid
grid.unsplit();

Splitting using the cell context menu

The feature also adds a new sub-menu to the cell context menu, allowing the user to split (or un-split) the grid. See the API documentation for the CellMenu feature for more information on how to customize the sub-menu.

Accessing a sub-view

The sub-views are accessed by index. The original grid is at index 0, and the others are as shown below. For 'horizontal' splits:

For 'vertical' splits:

For 'both' splits:

The subViews property returns an array containing all sub-views, including the original. Note that the property is also exposed on the owning Grid. Access a specific sub-view by index (see illustrations above). For example to access the bottom right sub-view in a 'both' split:

await grid.split({ direction : 'both' });
const bottomRight = grid.subViews[3];
await bottomRight.scrollRowIntoView(100);

Troubleshooting

The splits are inserted into a container element (which has the .b-split-container CSS class), replacing the original grid. If it does not render correctly out of the box, you should make sure that any CSS rules you have that apply size to the grid also applies to the container element.

For example if you use a CSS flex rule to size the grid:

.b-grid {
    // Size grid using flex
    flex : 3;
}

Then you should also apply the same rule to the container element:

.b-grid,
.b-split-container {
    flex : 3;
}

This feature is disabled by default.