Initialization

To add dhtmlxSidebar into an application, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxSidebar</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="sidebar_container"></div>
        <script>
            // creating dhtmlxSidebar
            var sidebar = new dhx.Sidebar("sidebar_container");
</script> </body> </html>

Include source files

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for the Sidebar and give it an id, e.g. "sidebar_container":

<div id="sidebar_container"></div>

Initialize Sidebar

Initialize Sidebar with the dhx.Sidebar object constructor. The constructor takes two parameters:

  • the HTML object on the page that serves as the sidebar container
  • an object with configuration properties (see the full list below). If this argument is not passed to the constructor, the settings will be default
var sidebar = new dhx.Sidebar("sidebar_container",{
    // config options
});

Configuration properties

  • width - (number) sets the width of a sidebar, 200 by default
  • collapsed - (boolean) defines that a sidebar is initialized in the collapsed state
  • minWidth - (number) sets the minimal width of a sidebar in the collapsed state, 69 by default
  • css - (string) adds style classes for the component
  • navigationType - (string) defines the action that opens sidebar items: "click" or "pointer" (default)

Load data into Sidebar

There are two handy ways of loading data, i.e. a set of controls into Sidebar:

  • from an external file with the help of the load() method of tree collection:
var sidebar = new dhx.Sidebar("sidebar_container");
sidebar.data.load("../common/dataset.json");
  • from a local source using the parse() method of tree collection:
var data = [
    {
        type: "title",
        value: "DHTML Sidebar"
    },
    {
        type: "button",
        icon: "dxi dxi-file-outline",
        value: "save"
    },
    {
        value: "Log in",
        color: "success",
        view: "flat"
    },
    {
        value: "Log out",
        color: "danger",
        view: "flat",
    }
];
 
var sidebar = new dhx.Sidebar("sidebar_container", {css: "dhx_widget--border_right" });
sidebar.data.parse(data);

Detailed information on loading data into Sidebar is given in the article Data Loading.

Back to top