Sizing and Styling Controls

Wijmo 5 controls rely on CSS for styling, appearance, and sizing.

Because of this, Wijmo 5 controls don't have properties such as "width," "height," or "background." Styling and layout is handled using CSS. If you are used to .NET controls, including WinForms and XAML, this may feel a little strange at first. But once you get used to CSS, you will find that it is very easy and extremely powerful. You can easily style all instances of a control type, or style a specific control, all with a few lines of extremely re-usable CSS.

Sizing Controls

The size and position of the controls are determined by the hosting element, which follows the usual HTML/CSS rules. For example, the CSS rule below stipulates that elements with class "grid" should have their height calculated automatically to fit the grid content, up to a limit of 300 pixels:

.grid {
    height: auto;
    max-height: 300px;
}

The fiddle below shows how this rule affects two FlexGrid controls. The first grid has only a few items, so it is resized to fit its content (like a regular HTML table). The second grid has a lot more items, so its height is automatically set to 300 pixels and it becomes scrollable.

The first grid has only five elements to show. Since that requires less than 300 pixels, the grid shows all elements and doesn't need scrollbars. The second grid contains 10,000 items. That exceeds 300 pixels, so the grid becomes scrollable.

Styling Controls

Control styling follows the same logic as sizing. Use CSS to override fonts, colors, margins, padding, and pretty much any visual aspect of any part of the controls.

For example, this fiddle shows how you can modify the appearance of the FlexGrid control using CSS:

Notice how now the grids now have a plain black and white look. To do this, we change the CSS and specify the styles for elements within the grid. Wijmo controls assign class names to their constituent elements, which enables easy and flexible styling.

For example, the CSS below creates cell elements (elements with class "wj-cell" contained in elements with class "grid") with no border and a white background:

.grid .wj-cell {
    border: none;
    background-color: #fff;
}

Code-based Styling

Although the Wijmo 5 controls rely on CSS for layout and sizing, there are a few situations where you may want to use code to get total control of some aspects of a control.

For example, the FlexGrid calculates the row heights based on the font being used to render the control. But you may want to override that CSS-based setting and specify the exact row heights yourself. You can do this by setting the following properties:

// set the height of rows in the scrollable area
flex.rows.defaultSize = 34;
// set the height of rows in the column header area
flex.columnHeaders.rows.defaultSize = 40;

This is shown in the fiddle below, which also uses CSS to achieve a very specific, customized look for the grid. The fiddle uses the "initialized" event to get a reference to the FlexGrid control. This is a convenient way to get a reference to the control when it is created with markup.