ejNavigationDrawer
11 Jul 201824 minutes to read
The Navigation Drawer is a sliding panel that displays the list of navigation options on demand. That is, by default, it is not visible but you can display it onto the left/right side of the screen by swiping or by clicking with desired target icon.
Syntax
$(element).ejNavigationDrawer()
Example
//create Navigation Drawer in Obtrusive way
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer();
});
</script>
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.navigationdrawer.js
-
module:ej.listview.js
Members
ajaxSettings Object
Specifies the ajaxSettings option to load the content to the NavigationDrawer control.
Default Value
- null
Example
<div id="container"> </div>
<div id="navigationPane">
<ul>
<li data-ej-text="Artwork"></li>
<li data-ej-text="Abstract"></li>
<li data-ej-text="2 Acrylic Mediums"></li>
<li data-ej-text="Creative Acrylic"></li>
<li data-ej-text="Modern Painting"></li>
</ul>
</div>
<script>
// Set the ajaxSettings options during initialization.
$("#navigationPane").ejNavigationDrawer({ ajaxSettings: { type: 'GET', cache: false, data: {}, dataType: "html", contentType: "html", async: true } });
</script>
ajaxSettings.async boolean
It specifies, whether to enable or disable asynchronous request.
ajaxSettings.cache boolean
It specifies the page will be cached in the web browser.
ajaxSettings.contentType string
It specifies the type of data is send in the query string.
ajaxSettings.data Object
It specifies the data as an object, will be passed in the query string.
ajaxSettings.dataType string
It specifies the type of data that you’re expecting back from the response.
ajaxSettings.type string
It specifies the HTTP request type.
contentId string
Specifies the contentId for navigation drawer, where the AJAX content need to updated
Default Value
- null
Example
// Set Navigation Drawer contentId on initialization.
//To set contentId API value
<div id="container"> </div>
<div id="navigationPane">
<ul>
<li data-ej-text="Artwork"></li>
<li data-ej-text="Abstract"></li>
<li data-ej-text="2 Acrylic Mediums"></li>
<li data-ej-text="Creative Acrylic"></li>
<li data-ej-text="Modern Painting"></li>
</ul>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer("contentId","container");
});
</script>
<script>
//Get or set the Navigation Drawer contentId, after initialization:
$(function () {
// Gets the contentId API value.
$("#navigationPane").ejNavigationDrawer("option", "contentId");
// Sets the contentId API
$("#navigationPane").ejNavigationDrawer ("option", "contentId", "container");
});
</script>
cssClass string
Sets the root class for NavigationDrawer theme. This cssClass API helps to use custom skinning option for NavigationDrawer control. By defining the root class using this API, we need to include this root class in CSS.
Default Value
- ””
Example
// Set Navigation Drawer direction on initialization.
//To set direction API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
<input id="target" type="button" text="target"/>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer("cssClass","custom-class");
});
</script>
<script>
//Get or set the Navigation Drawer cssClass, after initialization:
$(function () {
// Gets the cssClass API value.
$("#navigationPane").ejNavigationDrawer("option", "cssClass");
// Sets the cssClass API
$("#navigationPane").ejNavigationDrawer ("option", "cssClass", "custom-class");
});
</script>
direction enum
Sets the Direction for the control. See Direction
Name | Type | Default | Description |
---|---|---|---|
Left | string | left | Used to set Direction as Left |
None | string | none | Used to set Direction as None |
Right | string | right | Used to set Direction as Right |
Default Value
- left
Example
// Set Navigation Drawer direction on initialization.
//To set direction API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer("direction","left");
});
</script>
<script>
//Get or set the Navigation Drawer direction, after initialization:
$(function () {
// Gets the direction API value.
$("#navigationPane").ejNavigationDrawer("option", "direction");
// Sets the direction API
$("#navigationPane").ejNavigationDrawer ("option", "direction", "left");
});
</script>
enableListView boolean
Sets the listview to be enabled or not
Default Value
- false
Example
// Set Navigation Drawer listview on initialization.
//To set listview API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer("enableListView","false");
});
</script>
<script>
//Get or set the Navigation Drawer listview, after initialization:
$(function () {
// Gets the listview API value.
$("#navigationPane").ejNavigationDrawer("option", "enableListView");
// Sets the listview API
$("#navigationPane").ejNavigationDrawer ("option", "enableListView", "false");
});
</script>
items Array
Specifies the listview items as an array of object.
Default Value
- []
Example
// Set Navigation Drawer listview items on initialization.
//To set listview API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer({enableListview:true,items:[{text:"Item1"},{text:"Item2"},{text:"Item3"}]});
});
</script>
<script>
//Get or set the Navigation Drawer listview items, after initialization:
$(function () {
// Gets the listViewSettings API value.
$("#navigationPane").ejNavigationDrawer("option", "items");
// Sets the listViewSettings API
$("#navigationPane").ejNavigationDrawer ("option", "items", [{text:"Item1"},{text:"Item2"},{text:"Item3"}]);
});
</script>
listViewSettings Object
Sets all the properties of listview to render in navigation drawer
Example
// Set Navigation Drawer listview on initialization.
//To set listview API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer({model.listViewSettings{width:200});
});
</script>
<script>
//Get or set the Navigation Drawer listViewSettings, after initialization:
$(function () {
// Gets the listViewSettings API value.
$("#navigationPane").ejNavigationDrawer("option", "listViewSettings.width");
// Sets the listViewSettings API
$("#navigationPane").ejNavigationDrawer ("option", "listViewSettings.width", "200");
});
</script>
position string
Specifies position whether it is in fixed or relative to the page. See Position
Default Value
- normal
Example
// Set Navigation Drawer position on initialization.
//To set position API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer("position","fixed");
});
</script>
<script>
//Get or set the Navigation Drawer position, after initialization:
$(function () {
// Gets the position API value.
$("#navigationPane").ejNavigationDrawer("option", "position");
// Sets the position API
$("#navigationPane").ejNavigationDrawer ("option", "position", "fixed");
});
</script>
targetId string
Specifies the targetId for navigation drawer
Default Value
- ””
Example
// Set Navigation Drawer direction on initialization.
//To set direction API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
<input id="target" type="button" text="target"/>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer("targetId","target");
});
</script>
<script>
//Get or set the Navigation Drawer targetId, after initialization:
$(function () {
// Gets the targetId API value.
$("#navigationPane").ejNavigationDrawer("option", "targetId");
// Sets the targetId API
$("#navigationPane").ejNavigationDrawer ("option", "targetId", "left");
});
</script>
type string
Sets the rendering type of the control. See Type
Default Value
- overlay
Example
// Set Navigation Drawer type on initialization.
//To set type API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer("type","overlay");
});
</script>
<script>
//Get or set the Navigation Drawer type, after initialization:
$(function () {
// Gets the type API value.
$("#navigationPane").ejNavigationDrawer("option", "type");
// Sets the type API
$("#navigationPane").ejNavigationDrawer ("option", "type", "overlay");
});
</script>
width number
Specifies the width of the control
Default Value
- auto
Example
// Set Navigation Drawer width on initialization.
//To set width API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer("width","200");
});
</script>
<script>
//Get or set the Navigation Drawer width, after initialization:
$(function () {
// Gets the width API value.
$("#navigationPane").ejNavigationDrawer("option", "width");
// Sets the width API
$("#navigationPane").ejNavigationDrawer ("option", "width", "overlay");
});
</script>
isPaneOpen boolean
Navigation pane opened initially when isPaneOpen property is true.
Default Value
- false
Example
// Set Navigation Drawer isPaneOpen on initialization.
//To set isPaneOpen API value
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<div >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$(function () {
$("#navigationPane").ejNavigationDrawer({isPaneOpen:true});
});
</script>
<script>
//Get or set the Navigation Drawer isPaneOpen, after initialization:
$(function () {
// Gets the isPaneOpen API value.
$("#navigationPane").ejNavigationDrawer("option", "isPaneOpen");
// Sets the isPaneOpen API
$("#navigationPane").ejNavigationDrawer ("option", "isPaneOpen",false);
});
</script>
Methods
close()
To close the navigation drawer control
Example
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script >
$(function(){
$("#navigationPane").ejNavigationDrawer();
$("#navigationPane").ejNavigationDrawer("close");
});
</script >
loadContent(id,url)
To load AJAX content into NavigationDrawer container.
Example
<div class="e-header">
<div id="buttonDrawer" class="drawericon e-icon"></div>
<h2>Template Content</h2>
</div>
<div id="navigationPane">
<div id="basicAccordion" class="control_frame">
<h3><a href="#">Menu</a></h3>
<div>
<div class="selectedAccordion" data-url="#Home">Home</div>
<div class="selectedAccordion" data-url="#People">People</div>
<div class="selectedAccordion" data-url="#Profile">Profile</div>
</div>
</div>
</div>
<script >
$(function(){
$("#basicAccordion").ejAccordion({width:"100%",height:"100%"});
$("#navigationPane").ejNavigationDrawer({ targetId: "buttonDrawer", contentId: "content_container", type: "overlay", direction: "left", position: "normal" });
$(".selectedAccordion").click(function(e){
var navigationObj = $("#navigationPane").ejNavigationDrawer("instance");
navigationObj.loadContent($("#content_container") ,"/Content/NavigationDrawer/"+$(e.currentTarget).attr("data-url").replace("#","")+".html");
});
});
</script >
open()
To open the navigation drawer control
Example
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script >
$(function(){
$("#navigationPane").ejNavigationDrawer();
$("#navigationPane").ejNavigationDrawer("open");
});
</script >
toggle()
To Toggle the navigation drawer control
Example
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script >
$(function(){
$("#navigationPane").ejNavigationDrawer();
$("#navigationPane").ejNavigationDrawer("toggle");
});
</script >
Events
ajaxComplete
Event triggers after the AJAX content loaded completely.
Name | Type | Description |
---|---|---|
cancel | boolean | Set this option to true to cancel the event. |
model |
|
Instance of the navigation drawer model object. |
type | string | Name of the event. |
URL | string | URL of the content. |
data | string | Response content. |
Example
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script >
$(function(){
$("#navigationPane").ejNavigationDrawer({
ajaxComplete: function (args) { //handle the event }
}
});
});
</script >
ajaxError
Event triggers when the AJAX request failed.
</td>Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
cancel | boolean | Set this option to true to cancel the event. | ||||||||||||
model |
|
Instance of the navigation drawer model object. | ||||||||||||
type | string | Name of the event. | ||||||||||||
URL | string | URL of the content. | ||||||||||||
data |
|
|
Example
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script >
$(function(){
$("#navigationPane").ejNavigationDrawer({
ajaxError: function (args) { //handle the event }
}
});
});
</script >
ajaxSuccess
Event triggers after the AJAX content loaded successfully.
Name | Type | Description |
---|---|---|
cancel | boolean | Set this option to true to cancel the event. |
model |
|
Instance of the navigation drawer model object. |
type | string | Name of the event. |
URL | string | URL of the content. |
data | string | Response content. |
Example
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script >
$(function(){
$("#navigationPane").ejNavigationDrawer({
ajaxSuccess: function (args) { //handle the event }
}
});
});
</script >
beforeClose
Event triggers before the control gets closed.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from Navigation Drawer
|
Example
//BeforeClose event for Navigation pane
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$("#navigationPane").ejNavigationDrawer({
beforeClose: function (args) { //handle the event
}
});
$("#navigationPane").ejNavigationDrawer("close");
</script>
open
Event triggers when the control open.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from Navigation Drawer
|
Example
//Open event for Navigation pane
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$("#navigationPane").ejNavigationDrawer({
open: function (args) { //handle the event
}
});
$("#navigationPane").ejNavigationDrawer("open");
</script>
swipe
Event triggers when the Swipe happens.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from Navigation Drawer
|
Example
//Swipe event for Navigation pane
<div id="home" class="navsubpage">
<div align="center" class="content">
<h2 class="title">
Home</h2>
<p>
Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
</p>
</div>
</div>
<style>
.list {
border-bottom: 1px solid;
line-height: 50px;
text-align: center;
width:200px;
}
</style>
<div id="navigationPane" >
<div class="list"> Home </div>
<div class="list"> Communities </div>
</div>
<script>
$("#navigationPane").ejNavigationDrawer({
swipe: function (args) { //handle the event
}
});
</script>