Search results

How To

Initialize the Sidebar with ListView

Any HTML element can be placed in the Sidebar content area. Sidebar supports all types of HTML structures like TreeView, ListView, etc.

In the following example, the Sidebar is rendered with ListView component in its content area.

  • Add the HTML div tag with its id attribute as default in your index.html file to initialize the Sidebar.

[src/index.html]

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Essential JS 2 Sidebar</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <meta name="description" content="Essential JS 2" />
        <meta name="author" content="Syncfusion" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

        <!--style reference from app-->
        <link href="/styles/styles.css" rel="stylesheet" />

        <!--system js reference and configuration-->
        <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
        <script src="system.config.js" type="text/javascript"></script>
    </head>

    <body>
       <div id='container'>
            <aside id="default-sidebar">
                <div class="title1">Menu</div>
                <div class="closebtn">
                        <button id="close" class="e-btn close-btn">
                            <span id="innerclose" class= "e-icons close-icon"></span>
                        </button>
                    </div>
                <div id="listcontainer">
                <div id="list"></div>
            </div>
                <div class="sub-title">
                    * ListView component is rendered in the sidebar container.
                </div>
            </aside>
            <!-- end of Sidebar element -->
            <!-- main content declaration -->
            <div>
                <div class="title2">Main content</div>
                <div class="sub-title"> Click the button to open/close the Sidebar.</div>
                <div style="padding:20px" class="center-align">
                    <button id="toggle" class="e-btn e-info">Toggle Sidebar</button>
                </div>
            </div>
        </div>
    </body>

</html>
  • Import the Sidebar component to your app.ts file, and initialize it to the #default as follows:

[src/app/app.ts]

import { Sidebar } from '@syncfusion/ej2-navigations';
import { ListView } from '@syncfusion/ej2-lists';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

// Initialize ListView component
let data: { [key: string]: Object }[] = [
    { text: 'Home', id: 'list-02' },
    { text: 'Offers', id: 'list-03' },
    { text: 'Support', id: 'list-04' },
    { text: 'Logout', id: 'list-06' }
];

let listInstance: ListView = new ListView({
    //Set defined data to dataSource property
    dataSource: data
});

//Render initialized ListView component

listInstance.appendTo('#list');

 let defaultSidebar: Sidebar = new Sidebar({
        width: '100%', type:'Over'
    });
    defaultSidebar.appendTo('#default');
    //end of Sidebar initialization

    // Toggle(Open/Close) the Sidebar
    document.getElementById('toggle').onclick = (): void => {
        defaultSidebar.toggle();
    };

    // Close the Sidebar
    document.getElementById('close').onclick = (): void => {
        defaultSidebar.hide();
    };
Source
Preview
index.js
index.html
ej.base.enableRipple(true);

// Initialize ListView component
var data = [
    { text: 'Home', id: 'list-02' },
    { text: 'Offers', id: 'list-03' },
    { text: 'Support', id: 'list-04' },
    { text: 'Logout', id: 'list-06' }
];

var listInstance = new ej.lists.ListView({
    //Set defined data to dataSource property
    dataSource: data
});
listInstance.appendTo('#list');

var defaultSidebar= new ej.navigations.Sidebar({
    type: "Over", 
    width: '100%'
});
defaultSidebar.appendTo('#default-sidebar');

document.getElementById('toggle').onclick = function() {
    defaultSidebar.toggle();
};

// Close the sidebar
document.getElementById('close').onclick = function() {
    defaultSidebar.hide();
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <aside id="default-sidebar">
            <div class="title1">Menu</div>
            <div class="closebtn">
                <button id="close" class="e-btn close-btn">
                    <span id="innerclose" class="e-icons close-icon"></span>
                </button>
            </div>
            <div id="listcontainer">
                <div id="list"></div>
            </div>
            <div class="sub-title">
                * ListView component is placed inside the sidebar content area.
            </div>
        </aside>
        <!-- end of sidebar element -->
        <!-- main content declaration -->
        <div>
            <div class="title2">Main content</div>
            <div class="sub-title"> Click the button to open/close the Sidebar.</div>
            <div style="padding:20px" class="center-align">
                <button id="toggle" class="e-btn e-info">Toggle Sidebar</button>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Open and close the Sidebar

Opening and closing the Sidebar can be achieved with built-in public methods.

  • show(): Method to open the Sidebar.
  • hide(): Method to close the Sidebar.
  • toggle(): Method to toggle between open and close states of the Sidebar.

In the following sample, toggle method has been used to show or hide the Sidebar on button click.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

var defaultSidebar= new ej.navigations.Sidebar({
    showBackdrop: false
});
defaultSidebar.appendTo('#default');
//end of sidebar initialization

// Toggle(Open/Close) the sidebar
document.getElementById('toggle').onclick = function() {
    defaultSidebar.toggle();
};

// Close the sidebar
document.getElementById('close').onclick = function() {
    defaultSidebar.hide();
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <aside id="default">
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <button id="close" class="e-btn close-btn">Close Sidebar</button>
            </div>
        </aside>
        <!-- end of sidebar element -->
        <!-- main content declaration -->
        <div>
            <div class="title">Main content</div>
            <div class="sub-title"> Click the button to open/close the Sidebar.</div>
            <div style="padding:20px" class="center-align">
                <button id="toggle" class="e-btn e-info">Toggle Sidebar</button>
            </div>
        </div>


</div><script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Multiple Sidebar

Two Sidebars can be initialized in a web page with same main content. Sidebars can be initialized on right side or left side of the main content using position property.

The HTML element with class name e-main-content will be considered as the main content and both the Sidebars will behave as side content to this main content area of a web page.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

var leftSidebar= new ej.navigations.Sidebar({
     width: "200px",
     type:'Push'
});
leftSidebar.appendTo('#default');
// end of leftSidebar initialization

var rightSidebar = new ej.navigations.Sidebar({
    width: "200px",
    position:'Right',
    type:'Push'
 });
rightSidebar.appendTo('#default1');
// end of rightSidebar initialization

// Toggle(Open/Close) the Sidebar1
document.getElementById('toggle-btn').onclick = function () {
    leftSidebar.toggle();
};
// Toggle(Open/Close) the Sidebar2
document.getElementById('toggle-btn2').onclick = function () {
    rightSidebar.toggle();
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <aside id="default">
            <div class="title"> Left Sidebar content</div>
        </aside>
        <aside id="default1">
            <div class="title">Right Sidebar content</div>
        </aside>
        <div class="e-main-content" style="font-size:16px;padding:100px" ;="">
            <p>Place your main content here.....</p>
            <button id="toggle-btn" class="e-btn">Toggle Sidebar1</button>
            <br>
            <br>
            <button id="toggle-btn2" class="e-btn">Toggle Sidebar2</button>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>