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/App.tsx]

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from './sample-base';
import { enableRipple } from '@syncfusion/ej2-base';
export default class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    public listObj: SidebarComponent;
    private width: string = '100%';
    private type: string = 'Over';
    private data: { [key: string]: Object }[] = [
        { text: 'Home', id: 'list-01' },
        { text: 'Offers', id: 'list-02' },
        { text: 'Support', id: 'list-03' },
        { text: 'Logout', id: 'list-04' }
    ];
    render() {
        return (
            <div className="control-section">
                <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar} width={this.width} type={this.type}>
                    <div id='closebtn'>
                        <ButtonComponent cssClass='e-normal' iconCss='e-icons e-add-icon' onClick={this.toggleClick.bind(this)}></ButtonComponent>
                    </div>
                    <div className="title">Menu</div>
                    <div class='listdiv'>
                        <ListViewComponent id="listview" dataSource={this.data} fields={this.fields} showIcon={this.showIcon} onClick={this.closeClick.bind(this)}>
                        </ListViewComponent>
                    </div>
                    <div className="center-align">
                        * ListView component is placed inside the sidebar content area.
                            </div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={this.toggleClick.bind(this)} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        )
    }
    // Toggle(Open/Close) the Sidebar
    toggleClick(): void {
        this.sidebarobj.toggle();
    }
    // close the Sidebar
    closeClick(): void {
        this.sidebarobj.hide();
    }
}
  • The above code sample will give the following output in the screen.
Source
Preview
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { enableRipple } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    public listObj: SidebarComponent;
    private width: string = '100%';
    private type: string = 'Over';
    private data: { [key: string]: Object }[] = [
        { text: 'Home', id: 'list-01' },
        { text: 'Offers', id: 'list-02' },
        { text: 'Support', id: 'list-03' },
        { text: 'Logout', id: 'list-04' }
    ];
    render() {
        return (
            <div className="control-section">
                <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar} width={this.width}  type={this.type}>
                    <div id='closebtn'>
                        <ButtonComponent cssClass='e-normal' iconCss='e-icons e-add-icon' onClick={this.toggleClick.bind(this)}></ButtonComponent>
                    </div>
                    <div className="title">Menu</div>
                    <div class='listdiv'>
                        <ListViewComponent id="listview" dataSource={this.data} fields={this.fields} onClick={this.closeClick.bind(this)}>
                        </ListViewComponent>
                    </div>
                    <div className="center-align">
                        * ListView component is placed inside the sidebar content area.
                            </div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={this.toggleClick.bind(this)} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        )
    }
    // Toggle(Open/Close) the Sidebar
    toggleClick(): void {
        this.sidebarobj.toggle();
    }
    // Close the Sidebar
    closeClick(): void {
        this.sidebarobj.hide();
    }
};

ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</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 the open/close state of the Sidebar.

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

Source
Preview
index.tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SampleBase } from './sample-base';
import { enableRipple } from '@syncfusion/ej2-base';
export default class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar}>
                        <div className="title"> Sidebar content</div>
                        <div className="sub-title">
                            Click the button to close the Sidebar.
                         </div>
                        <div className="center-align">
                            <ButtonComponent onClick={this.closeClick.bind(this)} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                    </SidebarComponent>
                    <div>
                        <div className="title">Main content</div>
                        <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                        <div className="center-align">
                            <ButtonComponent onClick={this.toggleClick.bind(this)} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    // Toggle(Open/Close) the Sidebar
    toggleClick(): void {
        this.sidebarobj.toggle();
    }
    // Close the Sidebar
    closeClick(): void {
        this.sidebarobj.hide();
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

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.

Source
Preview
index.tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SampleBase } from './sample-base';
import { enableRipple } from '@syncfusion/ej2-base';
export default class App extends React.Component<{}, {}> {
    public leftsidebarobj: SidebarComponent;
    public rightsidebarobj: SidebarComponent;
    private type:string = 'Push';
    render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default" ref={Sidebar => this.leftsidebarobj = Sidebar}
                    width="200px" type={this.type}>
                        <div className="title"> Left Sidebar content</div>
                    </SidebarComponent>
                    <SidebarComponent id="default1" ref={Sidebar => this.rightsidebarobj = Sidebar}
                         width="200px" type={this.type} position="Right">
                         <div className="title"> Right Sidebar content</div>
                    </SidebarComponent>
                       <div className="e-main-content">
                            <p>Place your main content here.....</p>
                            <ButtonComponent onClick={this.leftToggle.bind(this)} id="toggle-btn" className="e-btn e-info">Toggle Sidebar1</ButtonComponent>
                           <br></br><br></br>
                            <ButtonComponent onClick={this.rightToggle.bind(this)} id="toggle-btn1" className="e-btn e-info">Toggle Sidebar2</ButtonComponent>
                        </div>
              </div>
         </div>
        )
    }
        // Toggle(Open/Close) the Sidebar1
    leftToggle(): void {
        this.leftsidebarobj.toggle();
    }
    // Toggle(Open/Close) the Sidebar2
    rightToggle(): void {
        this.rightsidebarobj.toggle();
    }
}

ReactDOM.render(<App />, document.getElementById('sample'));