)
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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to navigate the internal pages while clicking the list item in the navigation drawer?

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

You can navigate to the internal page by using ajax. Refer to the following steps.

First, create an internal page from where you can get the content on clicking the items in the drawer. Then, render navigation drawer with mousedown event to handle the ajax post as in the following code example.

default.html

<div class="navi">

        <div id="target" class="icon-target">

            Drawer

        </div>

    </div>

    <div id="navpane">

        <ul>

            <li data-ej-text="Home"></li>

            <li data-ej-text="Profile"></li>

            <li data-ej-text="Photos"></li>

            <li data-ej-text="Location"></li>

        </ul>

    </div>

    <!-- Default Page Content-->

    <div id="render">

        This page displays the content of the item in drawer on click.

    </div>

    <script type="text/javascript">

        $(function () {

            $("#navpane").ejNavigationDrawer({ enableListView: true, targetId: "target", listViewSettings: { mouseDown: 'slideMenuClick', persistSelection: true } });

        });

   </script>

<style>

        [class*="icon-"]

        {

            background-image: url("http://js.syncfusion.com/ug/web/content/drawer/sprite.png");

        }

     .icon-target

        {

             background-position: 0 -338px;

             font-size: 34px;

             height: 48px;

             position: absolute;

             text-indent: 50px;

             top: -3px;

             width: 48px;

             z-index: 3;

         }

     .navi

        {

            background: none repeat scroll 0 0 #C4C4B4;

            color: #fff;

            height: 45px;

            padding-left: 5px;

            width: 100%;

        }

       body

         {

            background: none repeat scroll 0 0 #ece9d8;

         }

</style>

 

Now, you need to handle $.ajax() function to load the internal page content to the current page. Refer to the following code example.

[script]

function slideMenuClick(args) {

            $.ajax({

                url: "ajaxpages/" + args.text + ".html", //To get internal page url

                type: "POST",

                success: function (e, status, response) {

                    //Success handler of content loading while list click happens

                    $('#render').html(response.responseText);

                    $('#target').html(args.text);//To change the header based on the internal page content

                    $("#navpane").ejNavigationDrawer("close");

                },

                error: function (error) {

                    alert("error");

                }

            })

        }

 

Output:

 

Listview

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

Live Chat Icon For mobile
Live Chat Icon