Navigating thru pages not inside the same page

[Markus Lembke]

Hi,

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>

            <h2>Home</h2>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; 2016 - MWein.Server</p>

        </footer>

    </div>

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

        <e-content-template>

            <ul>

                <li data-ej-imageurl="../Images/navigationdrawer/home.png" data-ej-text="Home"

                    id="navhome"></li>

                <li data-ej-imageurl="../Images/navigationdrawer/people.png" data-ej-text="Anwender"

                    id="navpeople"></li>

                <li data-ej-imageurl="../Images/navigationdrawer/profile.png" data-ej-text="Profile"

                    id="navprofile"></li>

                <li data-ej-imageurl="../Images/navigationdrawer/photo.png" data-ej-text="Photos"

                    id="navphotos"></li>

                <li data-ej-imageurl="../Images/navigationdrawer/communities.png" data-ej-text="Communities"

                    id="navcommunities"></li>

                <li data-ej-imageurl="../Images/navigationdrawer/locations.png" data-ej-text="Location"

                    id="navlocation"></li>

                <li data-ej-imageurl="../Images/navigationdrawer/locations.png" data-ej-text="Exit"

                    id="navexit"></li>

            </ul>

        </e-content-template>

    </ej-navigation-drawer>

</div>

    <script type="text/javascript">

        function headChange(e) {

            $("#butdrawer").parent().children("h2").text(e.text);

            var url = '';

            switch (e.text) {

                case "Home":

                    url = '@Url.Action("Index", "Administration")';

                    break;

                case "Anwender":

                    url = '@Url.Action("Index", "AnwenderAdministration")';

                    break;

                case "Exit":

                    url = '@Url.Action("Index","Home", new { Area = "" })';

                    break;

            }

            if (url != ''

                && url != window.location.pathname) {

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

            }

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

        }

    </script>

<--

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 

Markus

[Rekha J]

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 0^th 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: 

http://www.syncfusion.com/downloads/support/forum/128019/ze/NavigationDrawer_selected_index_issue-2070751575.zip 

We would be happy to assist you for further queries, 

Regards, 

Rekha. 

[Markus Lembke]

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

Markus

[Rekha J]

  

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

</ej-navigation-drawer> 

 

 

For your reference, we have created a simple sample and a sample is available in: 

http://www.syncfusion.com/downloads/support/forum/128019/ze/NavigationDrawer_(2)-1909848260.zip 

Regards, 

Rekha.