Skip to end of metadata
Go to start of metadata

WebTreeView 2 brings you a brand-new elegant look through full support for the new WebUI Unified Theming. With the new WebTreeView Unified Theming, designing your web projects is more visually appealing than ever before.

This page explains the concepts, features, benefits and the best practices when using WebTreeView unified theme in your web projects.

If you're not familiar with WebUI unified theming, please refer to Unified Theming and WebUI Modern Theme.

On this page:

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

Features

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.

Tri-State-CheckBox

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.

Node Editing

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.

Applying Theme

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 new to the unified theming concept or unfamiliar with WebUI modern theme, please visit Unified Theming and New WebUI Modern Theme respectively. These two pages provide comprehensive details you need to know to understand how WebUI modern theme works.

Best Practices

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, BackColorBorderColor, 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.

In conclusion, you should avoid defining settings that might affect appearance such as explicit styles, since all styles are defined externally and streamlined in the CSS stylesheets. Defining appearance-related settings might introduce conflict with the theme definition and produce unexpected results.
As the result, your WebTreeView control definition should look much cleaner and simpler. The following example shows a simple WebTreeView control that should be themed perfectly.

Customizing Theme

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.

Customizing the WebTreeView theme source requires you to copy the source to your projects and configure a SCSS compiler. For more information how to customize WebUI theme source, please see Customizing WebUI Modern Theme.

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.

For more information how to customize SCSS variables and ensure the output is properly generated, see Customizing SCSS Variables.

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.

webtreeview.isl

For complete visualization details of WebTreeView modern theme, please refer to WebTreeView Modern Theme Style Reference.