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 jqxTreeGrid.

jqx-widget - applied to the TreeGrid widget.
jqx-tree-grid-indent - applied to the TreeGrid indent elements. Adds horizontal spacing between the tree levels.
jqx-tree-grid-title - applied to the Tree column cells.
jqx-tree-grid-expand-button - applied to the expand button in the Tree column.
jqx-tree-grid-collapse-button - applied to the collapse button in the Tree column.
jqx-tree-grid-checkbox - applied to the TreeGrid checkboxes.
jqx-tree-grid-checkbox-tick - applied to the Tick element in the TreeGrid checkboxes.
jqx-tree-grid-icon - applied to the TreeGrid icon container elements.
jqx-tree-grid-icon-rtl - applied to the TreeGrid icon container elements in RTL mode.
jqx-tree-grid-icon-size - applied to the TreeGrid icon IMG elements.
jqx-grid - applied to TreeGrid container element.
jqx-grid-pager - applied to the TreeGrid Pager.
jqx-grid-header- applied to TreeGrid Columns container element.
jqx-grid-column-header - applied to a TreeGrid column.
jqx-widget-header - applied to a TreeGrid column, Toolbar, Statusbar and Groups Header.
jqx-widget-content - applied to the TreeGrid's content area.
jqx-grid-content - applied to the TreeGrid's content area.
jqx-grid-toolbar - applied to the toolbar.
jqx-grid-statusbar - applied to the statusbar.
jqx-cell - applied to the TreeGrid cells.
jqx-grid-cell - applied to the TreeGrid cells.
jqx-grid-cell-locked - applied to TreeGrid cells in a locked row.
jqx-grid-cell-sort - applied to the TreeGrid cells in the sort column.
jqx-grid-cell-filter - applied to the TreeGrid cells in the filter column.
jqx-grid-cell-alt - alternating cells style. This is applied to the cells in the alternating rows.
jqx-grid-cell-pinned - applied to the cells in a pinned column.
jqx-grid-cell-selected - applied to a selected cell.
jqx-fill-state-pressed - applied to a selected cell.
jqx-grid-cell-hover - applied to a hovered cell.
jqx-fill-state-hover - applied to a hovered cell.
jqx-grid-column-resizeline - applied to the column's resize line.
jqx-grid-column-resizestartline - applied to the column's resize start line.
jqx-fill-state-disabled - applied to the widget when it is disabled.
jqx-grid-group-drag-line - applied to the drop line indicators displayed in the grouping header.
jqx-grid-group-column-line - applied to the lines between the group columns.
jqx-right-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the right.
jqx-left-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the left.
jqx-center-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the center.

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

Add the above CSS classes related to jqxTreeGrid
After each CSS class, add your theme name.
For example:
jqx-grid-energyblue
To apply your custom style to jqxTreeGrid, you need to set its 'theme' property(option) to point to your theme's name.

The sample below demonstrates how to set the 'Energy Blue' theme to jqxTreeGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">TreeGrid with Energy Blue Theme</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.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/jqxdata.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/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var employees = [{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }];
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'EmployeeID', type: 'number' },
                    { name: 'ReportsTo', type: 'number' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Country', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' }
                ],
                hierarchy:
                {
                    keyDataField: { name: 'EmployeeID' },
                    parentDataField: { name: 'ReportsTo' }
                },
                id: 'EmployeeID',
                localData: employees
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create Tree Grid
            $("#treeGrid").jqxTreeGrid(
            {
                width: 500,
                source: dataAdapter,
                theme: 'energyblue',
                checkboxes: true,
                ready: function () {
                    $("#treeGrid").jqxTreeGrid('expandRow', '2');
                },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', width: 150 },
                  { text: 'LastName', dataField: 'LastName', width: 150 },
                  { text: 'Title', dataField: 'Title', width: 200 }
                ]
            });
        });
    </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="treeGrid">
    </div>
</body>
</html>