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: 
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: 
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: 
MESCIUS inc.