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. Image for the cookie policy date

Navigating thru pages not inside the same page


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 


3 Replies

RJ Rekha J Syncfusion Team 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, 

ML Markus Lembke 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


RJ Rekha J Syncfusion Team 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: 

Live Chat Icon For mobile
Up arrow icon