Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxTree.

jqxTree Style
jqx-widget - applied to the jqxTree widget.
jqx-tree - applied to the jqxTree widget.
jqx-tree-dropdown-root - applied to the jqxTree root UL element.
jqx-tree-dropdown - applied to the jqxTree UL elements.
jqx-tree-item-li - applied to the jqxTree LI elements.
jqx-tree-item-u-last - applied to the last LI elements in an UL element.
jqx-tree-item - applied to a tree item.
jqx-item - applied to a tree item.
jqx-tree-item a:link - applied to the anchor element of a tree item.
jqx-tree-item a:visited - applied to the anchor element of a tree item.
jqx-tree-item a:hover - applied to the anchor element of a tree item when the mouse cursor is over the anchor.
jqx-tree-item-hover - applied to a tree item when the mouse is over the item.
jqx-fill-state-hover - applied to a tree item when the mouse is over the item.
jqx-tree-item-selected - applied to a tree item when the item is selected.
jqx-fill-state-pressed - applied to a tree item when the item is selected.
jqx-tree-item-disabled - applied to a tree item when the item is disabled.
jqx-tree-item-arrow-collapse - applied to a tree item when it has sub items and is collapsed. Displays an arrow icon next to the item.
jqx-tree-item-arrow-expand - applied to a tree item when it has sub items and is expanded. Displays an arrow icon next to the item.
jqx-tree-item-arrow-expand-hover - applied to a tree item when it has sub items and is expanded and the mouse is over the arrow icon.
jqx-tree-item-arrow-collapse-hover - applied to a tree item when it has sub items and is collapsed and the mouse is over the arrow icon.
jqx-tree-disabled - applied to the tree when it is disabled
jqx-tree-disabled a:link - applied to the anchor elements in a tree when it is disabled.
jqx-tree-disabled a:visited - applied to the anchor elements in a tree when it is disabled and the anchor is visited.
jqx-tree-disabled a:hover - applied to the anchor elements in a tree when it is disabled and mouse is over the anchor.
jqx-fill-state-disabled - applied to the Tree widget when it is disabled and to a disabled tree item.

When you create a custom style with colors and backgrounds for jqxTree, you need to do the following:

Add the above CSS classes related to jqxtree
After each CSS class, add your theme name.
For example:
jqx-tree-summer
To apply your custom style to jqxTree, you need to set its 'theme' property(option) to point to your theme name string.
```
$('#jqxTree').jqxTree({ theme: 'summer', source: source, height: '300px', width: '300px' });
```

The sample below demonstrates how to set the 'Summer' theme to jqxtree.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree Widget, Tree Menu, jqxTree, jQuery Widgets, jQuery Plugins, jQuery UI Widgets, jQuery UI" /> 
    <title id='Description'>jQuery Tree CSS Styling and Appearance Sample.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                { label: "Item 1", expanded: true, items: [
                    { label: "Item 1.1" },
                    { label: "Item 1.2", selected: true }
                ]
                },
                { label: "Item 2" },
                { label: "Item 3" },
                { label: "Item 4", items: [
                    { label: "Item 4.1" },
                    { label: "Item 4.2" }
                ]
                },
                { label: "Item 5" },
                { label: "Item 6" },
                { label: "Item 7" }
            ];
            // Create jqxTree.
            $('#jqxTree').jqxTree({ theme: 'summer', source: source, height: '300px', width: '300px' });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxTree'>
    </div>
</body>
</html>

Documentation

Styling and Appearance

jqxTree Style