We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to nest the Accordion and Tile control inside the Navigation Drawer?

Platform: JavaScript |
Control: ejNavigationDrawer |
Published Date: March 5, 2015 |
Last Revised Date: May 10, 2019

You can nest an ejAccordion or ejTile control into the Navigation Drawer by means of template feature.

Nesting Accordion control

The Navigation Drawer is always in the hidden state. You can display it while clicking the div element by setting the targetid property with the element’s id to the Navigation Drawer.

You can render the Accordion control inside the Navigation Drawer rendering element as in the following code example.

HTML

<!-- Target Element -->

<div class="header">

<div id="header">

Home

</div>

</div>

<!-- Navigation Drawer with template -->

<div data-role="ejnavigationdrawer" data-ej-targetid="header" id="tempnavpane">

<div class="defaultsample">

<div id="accordion" data-role="ejaccordion" data-ej-collapsible="true" data-ej-selecteditemindex="-1">

<h3>

<a href="#">Menu 1</a>

</h3>

<!-- add accordion contents here, to load contents under this header -->

<div id=" listview1" data-role="ejlistview">

<ul>

<li data-ej-text="SubMenu 1"></li>

<li data-ej-text="SubMenu 2"></li>

<li data-ej-text="SubMenu 3"></li>

<li data-ej-text="SubMenu 4"></li>

<li data-ej-text="SubMenu 5"></li>

</ul>

</div>

<h3>

<a href="#">Menu 2</a>

</h3>

<!-- add accordion contents here, to load contents under this header -->

<div id=" listview2" data-role="ejlistview">

<ul>

<li data-ej-text="SubMenu 1"></li>

<li data-ej-text="SubMenu 2"></li>

<li data-ej-text="SubMenu 3"></li>

<li data-ej-text="SubMenu 4"></li>

<li data-ej-text="SubMenu 5"></li>

</ul>

</div>

<h3>

<a href="#">Menu 3</a>

</h3>

<!-- add accordion contents here, to load contents under this header -->

<div id=" listview3" data-role="ejlistview">

<ul>

<li data-ej-text="SubMenu 1"></li>

<li data-ej-text="SubMenu 2"></li>

<li data-ej-text="SubMenu 3"></li>

<li data-ej-text="SubMenu 4"></li>

<li data-ej-text="SubMenu 5"></li>

</ul>

</div>

</div>

</div>

</div>

Now, when you click the target icon on the header, it opens the Navigation Drawer with Accordion control.

The following screenshot illustrates the output.

Menu

Figure 1: Navigation Drawer with Accordion control

Nesting Tile Control

The Navigation Drawer is always in the hidden state. You can display it while clicking the div element by setting the targetid property with the element’s id to the Navigation Drawer.

Refer to the following steps for nesting Tile control within Navigation Drawer.

First, create a Navigation Drawer with target element. To achieve this, refer to the following code example.

HTML

<div class="header">

<div id="header">

Home

</div>

</div>

<div data-role="ejnavigationdrawer" data-ej-targetid="header" id="tempnavpane">

<!--Place your control here-->

</div>

Next, as in the following code example, render the Tile controls inside the Navigation Drawer as a template.

HTML

<div class="defaultsample">

<div id="Div1" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/alerts.png'

data-ej-text="Alerts">

</div>

<div id="Div2" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/camera.png'

data-ej-text="Camera">

</div>

<div id="Div3" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/games.png'

data-ej-text="Games">

</div>

<div id="Div4" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/map.png'

data-ej-text="Map">

</div>

<div id="Div5" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/messages.png'

data-ej-text="Messages">

</div>

<div id="Div6" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/music.png'

data-ej-text="Music">

</div>

<div id="Div7" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/photo.png'

data-ej-text="Photo">

</div>

<div id="Div8" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/pictures.png'

data-ej-text="Pictures">

</div>

<div id="Div9" data-role="ejtile" data-ej-tilesize="medium" data-ej-imageurl='themes/images/tileview/weather.png'

data-ej-text="Weather">

</div>

</div>

Now, when you click the target icon on the header, it opens the Navigation Drawer with Tile controls.

The following screenshot illustrates the output.

Navigation Drawer

Figure 2: Navigation Drawer with Tile controls

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon