Introducing WebTreeView Modern Theme
In the past versions, WebTreeView control is typically styled by specifying the style definition explicitly in the control markup. However, this approach 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, WebTreeView 2 introduces a brand-new modern theme which was built upon unified theming framework. It's now possible to streamline the WebTreeView styles in a unified theme,enabling a consistent look-and-feel across the application.
Here's how the WebTreeView controls look like with unified modern theme.
Looks great in hi-dpi displays with SVG user interface
This section explains WebTreeView's features that might help you accomplishing your web projects.
Frame Style Variants
The frameless variant is suitable in scenario when WebTreeView is placed in a container which already has border or decorators such as in panels.
To apply a specific frame variant, i.e., treeview-frameless, simply add the style to the FrameStyle's CssClass property, see the example below.
To enable tri-state-checkbox in the WebTreeView, set EnableTriStateCheckBox property into true. Here's the code example.
You can also configure which node (parent, child, root) that you want to show by setting the ShowCheckBoxes property. If you want all the child nodes to be checked when you clicked the parent node, simply set AutoCheckChildNodes property to True.
By enabling this feature, it allows you to change the WebTreeView nodes name. Simply set the AllowNodeEditing property to Yes, see the example below.
Drag and Drop
To enable this feature, set AllowDragDrop property to true and specify DragDropSettings' properties accordingly in the WebTreeView. Look at the example below.
Complete Styles Reference
In addition to the features above, the modern theme includes complete styling for all WebTreeView elements as well as interactive elements that are visible at runtime. To see the style reference in complete details, see WebTreeView Modern Theme Style Reference.
Building on unified theming concept, the WebTreeView 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 WebTreeView 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, BackColor, BorderColor, BorderStyle and BorderWidth 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, LoadingStyle, NodeStyle, and so on.
- If you applied a WebTreeView 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 WebTreeView 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.
WebTreeView SCSS Variables
For easy customization, the WebTreeView modern theme has provided a number of variables relating to common appearance settings. The following list shows the available SCSS variables for WebTreeView.
The complete SCSS variables can be found in _variables.scss, while the WebTreeView theme source can be found in the _webtreeview.scss file located in the theme source folder.
WebTreeView 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 WebTreeView styles, see its layout definition below.