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

JAVASCRIPT

$(element).ejNavigationDrawer()

Example

HTML

//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

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

// 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>

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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	Object	Instance of the navigation drawer model object.
type	string	Name of the event.
URL	string	URL of the content.
data	string	Response content.

Example

HTML

<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

Object

Instance of the navigation drawer model object.

type

string

Name of the event.

URL

string

URL of the content.

data

Object

Name	Type	Description
responseText	string	Error page content.
status	number	Error code.
statusText	string	The corresponding error description.

Example

HTML

<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	Object	Instance of the navigation drawer model object.
type	string	Name of the event.
URL	string	URL of the content.
data	string	Response content.

Example

HTML

<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

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	Object	returns the Navigation Drawer model
type	string	returns the name of the event

Example

HTML

//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

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	Object	returns the Navigation Drawer model
type	string	returns the name of the event

Example

HTML

//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

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	Object	returns the Navigation Drawer model
type	string	returns the name of the event

Example

HTML

//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>

ejNavigationDrawer

Syntax

Example

Requires

Members

ajaxSettings Object

Default Value

Example

ajaxSettings.async boolean

ajaxSettings.cache boolean

ajaxSettings.contentType string

ajaxSettings.data Object

ajaxSettings.dataType string

ajaxSettings.type string

contentId string

Default Value

Example

cssClass string

Default Value

Example

direction enum

Default Value

Example

enableListView boolean

Default Value

Example

items Array

Default Value

Example

listViewSettings Object

Example

position string

Default Value

Example

targetId string

Default Value

Example

type string

Default Value

Example

width number

Default Value

Example

isPaneOpen boolean

Default Value

Example

Methods

close()

Example

loadContent(id,url)

Example

open()

Example

toggle()

Example

Events

ajaxComplete

Example

ajaxError

Example

ajaxSuccess

Example

beforeClose

Example

open

Example

swipe

Example

ajaxSettings `Object`

ajaxSettings.async `boolean`

ajaxSettings.cache `boolean`

ajaxSettings.contentType `string`

ajaxSettings.data `Object`

ajaxSettings.dataType `string`

ajaxSettings.type `string`

contentId `string`

cssClass `string`

direction `enum`

enableListView `boolean`

items `Array`

listViewSettings `Object`

position `string`

targetId `string`

type `string`

width `number`

isPaneOpen `boolean`