Initializing Sidebar

Sidebar source files

First, you need to include Sidebar's js/css files on a page. In order to use dhtmlxSidebar as a separate component, you need to include its source files on the page. There are two source files you should use:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxsidebar.css">
    <script src="codebase/dhtmlxsidebar.js"></script>
</head>

But if you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
    <script src="codebase/dhtmlx.js"></script>
</head>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Constructor

var mySidebar = new dhtmlXSideBar({
 
    parent:         "sidebarObj",   // id/object, container for sidebar 
    skin:           "dhx_skyblue",  // string, sidebar skin, optional
    template:       "details",      // string, used template, "details" by default
    icons_path:     "icons/",       // string, path to the folder with icons
    single_cell:    true,           // boolean, true to enable the single cell mode
    bubble:         6,              // number, marker to show number of notifications 
    width:          200,            // number, width of the left part
    header:         true,           // boolean, true to enable the header
    autohide:       false,          // boolean, true to autohide the navigation bar 
    xml:            "sidebar.xml",  // string, path to xml config, optional
    json:           "sidebar.json", // string, path to json config, optional
    onload:         function(){},   // function, callback for xml/json, optional
    items: [
        // items config
        {
            id:         "a1",       // item id
            text:       "Text",     // item text
            icon:       "a1.png",   // icon used for the item
            selected:   true        // boolean, true to select an item
        },
        // separator config
        {
            id:         "sep1",     // separator id
            type:       "separator" // item type, mandatory
        },
        {...},  // other items, if any
        {...}
 
    ]
 
});

The order of loading (if several params specified at a time) is: json, xml,items.

Full-screen initialization

Generally, to create a full-screen sidebar on a page, use the code as in:

<html>
<head>
<style>
    /* important to set width/height to 100% for fullscreen init */
    html, body {
        width:      100%;
        height:     100%;
        margin:     0px;
        padding:    0px;
        overflow:   hidden;
    }
</style> <script>
    var mySidebar;
    function doOnLoad() {
        mySidebar = new dhtmlXSideBar({
            parent: document.body,  // parent container
            items: [...]            // items and other config
        });
    }
</script> </head> <body onload="doOnLoad();">   </body> </html>

It's also possible to set offsets for Sidebar in the full screen mode.

Init in an HTML element

To initialize dhtmlxSidebar in an HTML element, do the following:

1) create an HTML element where the sidebar will be placed later, don't forget to specify width and height:

<div id="sidebarObj" style="position: relative; width: 400px; height: 300px;"></div>

2) create a dhtmlXSideBar object and place it into the HTML object that you've just created:

var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",   // id of parent container
    ...                     // other config
});

Init in a window

To create a sidebar in a window, do the following:

1) create a dhtmlXWindows object:

var dhxWins = new dhtmlXWindows();
var sidebarWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

  • w1 - the id of the window;
  • 20, 20 - the left and the top positions of the window;
  • 600, 400 - the width and the height of the window.

2) call the attachSidebar() method to render sidebar in the window:

var mySidebar = new sidebarWin.attachSidebar({
    // sidebar config
});

Init in a cell

To create a new sidebar in a cell of a layout, do the following:

1) create a dhtmlXLayoutObject object:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach sidebar to a cell of layout by the attachSidebar() method:

var mySidebar = myLayout.cells("a").attachSidebar();
// or with more extended config
var mySidebar = myLayout.cells("a").attachSidebar({
    // sidebar config
});

JSON structure

JSON structure is needed for json init. In this case Sidebar can load config and partially data from an external json file.

It is used for the following init:

var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    json: "sidebar.json",
    onload: function(){
        console.log("JSON has been loaded and items are rendered. Ready to work.");
    }
});
// or
var mySidebar = new dhtmlXSideBar("sidebarObj");
mySidebar.loadStruct("sidebar.json");


sidebar.json

{   
    items: [
        {id: "recent", text: "Recent", icon: "recent.png", selected: true},
        {type: "separator"},
        {}, // more items, if any
        {}
    ]
}

Related sample:  Init from json

XML structure

XML struct is needed for xml init. In this case sidebar can load config and partially data from an external xml file.

It is used for the following init:

var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    xml: "sidebar.xml",
    onload: function(){
        console.log("XML has been loaded and items are rendered. Ready to work.");
    }
});
// or
var mySidebar = new dhtmlXSideBar("sidebarObj");
mySidebar.loadStruct("sidebar.xml");


sidebar.xml

<?xml version="1.0" encoding="UTF-8"?>
<sidebar>
    <item id="recent" text="Recent" icon="recent.png" selected="true"/>
    <item type="separator"/>
    ... more items, if any
</sidebar>

Related sample:  Init from xml

Recommended init way

<html>
<head>
<script>
    var mySidebar;
    function doOnLoad() {
        mySidebar = new dhtmlXSideBar({
            // config here
        });
    }
 
</script>
</head>
<body onload="doOnLoad();">
 
</body>
</html>
Back to top