Excel-like Appearance and Behavior

One of the most important goals we have for the FlexGrid control is ease of use, for developers and for end-users. An important strategy we use for achieving this goal is to use Microsoft Excel as a model. Excel presents a mature and extremely well-researched model that is familiar to most users.

For example, the FlexGrid is one of the few grids available that supports Excel-style range selection and clipboard copy/paste behavior by default. In the latest release of the FlexGrid (build 72), we added two Excel-like features that had been on our to-do list for quite a while, and that became more important because of our work on the FlexSheet control. The two features are:

Highlight Rows and Column Headers with showSelectedHeaders

The showSelectedHeaders property causes the FlexGrid to highlight row and/or column headers that correspond to the current selection, like Excel does.

As usual, this feature does not involve any style-related properties. Instead, it causes the grid to add a ‘wj-multi-selected’ class to the appropriate cell headers, and the styling is done with CSS.

The image below shows the effect of the showSelectedHeaders property:

Wijmo FlexGrid: Highlight Rows and Column Headers

showSelectedHeader highlights rows and columns

Notice how the headers above and to the left of the selection have a darker background and a thick border with the selection color. The wijmo.css file defines the appearance of the selected headers with these rules:

.wj-flexgrid .wj-header.wj-state-multi-selected {
/* Selected headers */
background-color: #e4e4e4;
color: #444;
font-weight: bold;
}
.wj-flexgrid .wj-colheaders .wj-header.wj-state-multi-selected {
/* Selected column headers */
border-bottom: 2px solid #0085c7;
}
.wj-flexgrid .wj-rowheaders .wj-header.wj-state-multi-selected {
/* Selected row headers */
border-right: 2px solid #0085c7;
}

The showSelectedHeaders property is of type HeadersVisibility, so you can select whether to highlight row or column headers independently.

Highlight Selections with a Rectangle with showMarquee

The showMarquee property causes the FlexGrid to add a rectangular element to highlight the current selection, like Excel does.

The marquee element has a ‘wj-marquee’ class and its appearance is defined in CSS. By default, the marquee is represented by a 2-pixel border with a 1-pixel padding.

Notice that when the marquee is enabled, the active cell is displayed using a normal style rather than the ‘wj-state-selected’ style.

The image below shows the effect of the showMarquee property:

Wijmo FlexGrid: Add Rectangular Elements to Highlight Current Selection with showMarquee

Highlight current selections with a rectangular with showMarquee

Notice how the bottom-right cell in the selection (the current cell) is no longer marked as selected.

The wijmo.css file defines the appearance of the marquee with this rule:

.wj-flexgrid .wj-marquee {
/* Selection Marquee */
position: absolute;
box-sizing: content-box;
border: 2px solid #0085c7;
}

For comparison, here is a screenshot of an Excel sheet showing the same data:

Wijmo FlexGrid: Excel's version of showMarquee

Excel's version of showMarquee