Introducing WebGrid Modern Theme
In the past versions, WebGrid control is typically styled by specifying the style definition explicitly in the control markup. Alternatively, you can also use the built-in default style which requires only a property set in the WebGrid control. However, both approaches apply their own styles individually and did not support reusing a common style definition. Consequently, you can't easily leverage modern CSS frameworks such as Bootstrap to create a consistent theming around your application.
To address these challenges, WebGrid 10 introduces a brand-new modern theme which was built upon unified theming framework. It's now possible to streamline the WebGrid styles in a unified theme, enabling a consistent look-and-feel across the application. For instance, the command bars, dialogs and menu elements in WebGrid share common styles with those in WebDialogBox, WebContextMenu, WebMenuBar, and WebToolBar.
At a glance, here's how the WebGrid controls look like with unified modern theme.
Redesigned from the ground-up
The new WebGrid theme was designed with these goals in mind: modern, clean, and on-par with latest UI trends in today's web applications. To achieve these goals, hundreds of WebGrid elements have been thoughtfully redesigned from the inside and out.
Building on unified theming and Bootstrap CSS framework, the new WebGrid theme now leverages larger fonts and industry-standard colors which look great in any color themes. Every element has been completely re-imagined to offer the best user experience demanded by today's users, including a much cleaner column header with subtle elevation, spacious rows and cells, and a beautiful status bar with segmented command bars.
Meticulously engineered, pixel-perfect user interface
Every WebGrid element is thoroughly crafted with pixel-precision presentation and styled with modern, timeless color palette. In addition to static elements, interactive elements such as column drag objects, resizers, inline editors, and context menu – are also completely revamped to match the modern look-and-feel.
First-class support for all major modern browsers
For the first-time since its inception, WebGrid now provides first-class support for Safari for Mac OS and Chrome, among other major browsers such as Internet Explorer 11 and Edge. Leveraging the latest web standards such as CSS3, the new WebGrid theme has been designed to work equally beautiful in all major modern browsers.
Looks great in hi-dpi displays with SVG user interface
With the new unified theme, WebGrid automatically replaces all control elements that use images with scalable vector graphic (SVG). Consequently, the WebGrid interface remains sharp when presented with zoomed settings or in high-dpi screens such as Retina or the latest 5K displays.
Blazing-fast, 4x speedier performance
WebGrid performs significantly faster when using unified theme, thanks to the streamlined CSS stylesheets and cleaner output.
The following table lists the behaviors and rendering differences between unified theming and classic styles.
|Classic Styles||Unified Theming|
|Styles are generated inline in the markup||No inline styles. All elements are styled in CSS.|
|Certain styles such as gridlines and columnsets are generated for each WebGrid instance||No styles block output per instance. All appearance aspects will match the styles defined in CSS.|
|Control resources such as icons and images are loaded physically.||No images are used. All icons will be automatically refer to SVG definitions – preloaded in CSS.|
As the result, the unified theming introduces a number of advantages over classic styling, such as:
- Less HTML output/footprint
- Significantly reduced HTTP requests
- Faster page loading
Streamlining the WebGrid styles into a unified theme that promote consistency with the rest of WebUI components, while at the same time supporting all existing features, requires major improvements to the core rendering and foundation of the control. As the result, you can modify the fundamental WebGrid settings through properties as usual, while having the styles applied perfectly.
Frame Style Variants
The modern theme sports three frame variants such as shown in the illustration below. By default, the frame with border and drop shadow will be applied.
The frameless variant is suitable in scenario when WebGrid is placed in a container which already has border or decorators such as in panels.
To apply a specific frame variant, i.e., grid-frameless, simply add the style to the FrameStyle's CssClass property, see the example below.
Customizable Grid Lines
The WebGrid modern theme supports the GridLines variant which includes horizontal, vertical, combination of both, or none. To customize the grid lines setting for a specific WebGrid instance, simply set the GridLines property as normally. At runtime, the unified theme will smartly match and apply the appropriate styles based on the specified grid lines setting. This is made possible through the use of advanced CSS3 selectors in the theme.
For example, to show vertical grid lines, simply set the GridLines property to Vertical such as shown below.
See the grid lines rendering result in the following illustration.
When using unified theming, keep in mind to avoid setting appearance-related properties in the control definition. More details are explained in the best practice section later.
In this case, the GridLines is considered a behavior property, while GridLineStyle and GridLineColor are considered appearance properties. To modify appearance and styling of the control, you should customize the theme source by either customizing the provided SCSS variables, or customizing the CSS classes explicitly. For more details, see the Customizing Theme section.
Cleaner Hierarchical UI
The user interface for hierarchical WebGrid has been completely rebuilt with cleaner and modern design. More than just re-style, the grid will be rendered differently with significantly reduced markup when unified theming is detected. Consequently, a large portion of the control, including the client interaction and scripting – has been rewritten to support the new hierarchical interface. However, to maintain full backward compatibility, the hierarchical rendering for classic styles continue to use the existing/old rendering logic.
Here's how a hierarchical WebGrid looks like.
The following list details the new hierarchical rendering logic:
- Lightweight tree structure rendering. The new rendering now uses a single div element instead of complicated tables.
- Empty tree lines are no longer rendered which significantly reducing overall page output.
- A nice L-shape connector is now rendered between parent and child table which gives better presentation to indicate the object relationship.
- Child table is now rendered in a logical section for best presentation, where the table header is now aligned perfectly to the table's body and footer.
- Consistent child table and connector rendering regardless of whether table header is visible or hidden.
Significantly Improved Usability
In WebGrid 10, many user experience aspects have been improved along with the introduction of WebGrid modern theming. Some examples of the improvements are:
- Sort indicators now remains visible in all conditions, while the column's text will be automatically clipped with text ellipsis in case the text doesn't fit.
- Filter bar indicators are perfectly aligned with larger padding, and remain aligned to the right when the column is resized.
- Editing focus is always visible and sync the scrolling state respectively.
- Cell active style and blur style are now applied corresponding to the grid's state.
- Horizontal scrollbar now appears in Safari browser when column freezing is enabled, on-par with other browsers.
The following illustration visualizes some of the usability improvements.
Support Runtime Features
The modern theme is designed to work in harmony with all existing WebGrid features. This means that you can enable or disable a feature by setting the control properties as normally. The theme should be applied appropriately without additional efforts.
In general, these are some noteworthy features that are explicitly improved for modern theme:
- Batch updates
- Self Referencing
- Client Binding
- Column Freezing
- All Built-in Editors
- WebCombo & WebInput Integration
- Custom Editors
- Slide Bar
- Numeric up down
- Calculator Editor
- WebCalendar Integration
- WebTextEditor Integration
- Pivot Chart
Complete Styles Reference
In addition to the features above, the modern theme includes complete styling for all WebGrid elements as well as interactive elements that are visible at runtime. To see the style reference in complete details, see WebGrid Modern Theme Style Reference.
Building on unified theming concept, the WebGrid modern theme is designed as part of the WebUI modern theme. This means that once you applied the WebUI modern theme, it will automatically theme the WebGrid control without additional code. To learn more how to apply the WebUI modern theme, please see Applying Unified Modern Theme in WebUI Application and Creating a New WebUI Application with Unified Modern Theme.
If you're applying the modern theme to an existing web projects, please review your existing code to comply with the following best practices:
- Remove appearance settings that are defined explicitly in the control. For instances, UseDefaultStyle, RowHeight, RowHeaderWidth, GridLineStyle and GridLineColor are examples of settings that might affect appearance.
- Remove style settings that are defined explicitly in the control. Most style settings have Style suffix and are type of either WebStyle or DynamicStyle, such as FrameStyle, FooterStyle, HeaderStyle, and so on.
- If you applied a WebGrid layout file (.isl) from code behind, the code should be no longer necessary and can be safely removed.
With unified theming concept, you no longer specify any style settings explicitly in the control markup. Written completely in developer-friendly SCSS language, all WebGrid styles are now streamlined in CSS classes contained in the theme source. This makes it easier for you to review the overall style definitions and make necessary changes to the styles.
WebGrid SCSS Variables
For easy customization, the WebGrid modern theme has provided a number of variables relating to common appearance settings. The following list shows the available SCSS variables for WebGrid.
The complete SCSS variables can be found in _variables.scss, while the WebGrid theme source can be found in the _webgrid.scss file located in the theme source folder.
WebGrid Layout Definition
In addition to the styles defined in the SCSS, one of the main component in a theme source is the component layout definition. The layout definition contains the contracts between the control and the CSS classes. The connection between the layout definition and the corresponding controls are automatically taken care by the WebUI Theme Framework at runtime.
To get a better understanding of the WebGrid styles, see its layout definition below.