Skip to main content Skip to footer

Excel-Like Features in Wijmo FlexGrid: Highlight Cell Selections in a Grid

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 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 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


comments powered by Disqus