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.
Unfortunately, activation email could not send to your email. Please try again.

Navigating thru pages not inside the same page

Thread ID:

Created:

Updated:

Platform:

Replies:

128019 Dec 27,2016 06:00 AM Jan 2,2017 07:01 AM ASP.NET Core 3
loading
Tags: NavigationDrawer
Markus Lembke
Asked On December 27, 2016 06:00 AM

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 [Syncfusion]
Replied On December 28, 2016 06:57 AM

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, 
Regards, 
Rekha. 


Markus Lembke
Replied On December 28, 2016 08:26 AM

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 [Syncfusion]
Replied On January 2, 2017 07:01 AM

  
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: 
Regards, 
Rekha. 


CONFIRMATION

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.

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.

;