How to nest the Accordion and Tile control inside the Navigation Drawer?
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.
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.
Figure 2: Navigation Drawer with Tile controls
