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

Navigating thru pages not inside the same page

Thread ID:





128019 Dec 27,2016 11:00 AM UTC Jan 2,2017 12:01 PM UTC ASP.NET Core 3
Tags: NavigationDrawer
Markus Lembke
Asked On December 27, 2016 11:00 AM UTC


i'm new to ASP.Net core MVC 6, so my someone can help me.

i would like to use the Navigationdrawer to navigate between pages in one Area.

Currently i've implemented it like this

<div class="container-fluid">
    <div class="e-lv">
        <div class="e-header">
            <div id="butdrawer" class="drawericon e-icon"></div>
    <div class="container body-content">
        <hr />
            <p>&copy; 2016 - MWein.Server</p>

    <ej-navigation-drawer id="navpane" direction="@NavigationDrawerDirection.Left" type="@NavigationDrawerType.Overlay" 
                          enable-list-view="true" target-id="butdrawer" content-id="container">
        <e-list-view-settings width="300" selected-item-index="0" show-header="false" mouse-up="headChange" persist-selection="true" />
                <li data-ej-imageurl="../Images/navigationdrawer/home.png" data-ej-text="Home"
                <li data-ej-imageurl="../Images/navigationdrawer/people.png" data-ej-text="Anwender"
                <li data-ej-imageurl="../Images/navigationdrawer/profile.png" data-ej-text="Profile"
                <li data-ej-imageurl="../Images/navigationdrawer/photo.png" data-ej-text="Photos"
                <li data-ej-imageurl="../Images/navigationdrawer/communities.png" data-ej-text="Communities"
                <li data-ej-imageurl="../Images/navigationdrawer/locations.png" data-ej-text="Location"
                <li data-ej-imageurl="../Images/navigationdrawer/locations.png" data-ej-text="Exit"

    <script type="text/javascript">
        function headChange(e) {

            var url = '';

            switch (e.text) {
                case "Home":
                    url = '@Url.Action("Index", "Administration")';
                case "Anwender":
                    url = '@Url.Action("Index", "AnwenderAdministration")';
                case "Exit":
                    url = '@Url.Action("Index","Home", new { Area = "" })';

            if (url != ''
                && url != window.location.pathname) {

                window.location.rel='nofollow' href = url;



So everything works fine.
I can navigate to the new url, but the selected item is lost, so after the new page is loaded, the Home is selected and it navigates to this side.

So my question is, how can i persist the selected item?

Many thanks 


Rekha J [Syncfusion]
Replied On December 28, 2016 11:57 AM UTC

Hi Markus, 
Thanks for contacting Syncfusion support. 
Query: how can i persist the selected item? 
To overcome the issue, we suggest to remove “e-selected-item-index as 0”. Because while declaring this property as 0th index, another page navigated but again first page loaded because of selected item index property. So that the selection is not maintained on navigating through other projects. 
For your convenience, we have created a simple sample that is available in: 
We would be happy to assist you for further queries, 

Markus Lembke
Replied On December 28, 2016 01:26 PM UTC

Hi Rekha,

thanks for this hint.
It works.

It lacks, regarding the current selected Listviewitem. So the user can't see, which one is currently selected.
Is there a possibility to achive that?

Best regards


Rekha J [Syncfusion]
Replied On January 2, 2017 12:01 PM UTC

Hi Markus, 
Thanks for the update. 
Currently, selection will not be maintained when the ListView pane closed in NavigationDrawer. If you need to show currently selected items, we suggest to use “e-is-pane-open” property. When e-is-pane-open property is set to true, Navigation pane opened always.So we can know which item is selected in list view.  
For your convenience, please refer the below code snippet to achieve this. 
<ej-navigation-drawer id="navpane" direction="@NavigationDrawerDirection.Left" type="@NavigationDrawerType.Overlay" enable-list-view="true" target-id="butdrawer" content-id="container" is-pane-open="true"> 
            <e-list-view-settings width="300" show-header="false" mouse-up="headChange" persist-selection="true" /> 
For your reference, we have created a simple sample and a sample is available in: 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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