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.

Can you navigate to another page or hashtag when clicking a menu item instead of loading ajax content

Thread ID:

Created:

Updated:

Platform:

Replies:

132512 Sep 5,2017 10:41 PM Sep 18,2017 05:56 AM JavaScript 8
loading
Tags: ejmNavigationDrawer
dan
Asked On September 5, 2017 10:41 PM

I want to be able to click on a drawer item and have it navigate to another page like the menu can.  I see the data-url but that seems to be for loading ajax content but not navigation.  I also looked for an onClick event and could not find one.

Thanks.

Selvamani Sankarappan [Syncfusion]
Replied On September 6, 2017 05:59 AM

Hi Dan, 
 
Thanks for contacting Syncfusion support. 
 
Forum ID – 132512: I want to be able to click on a drawer item and have it navigate to another page like the menu can.  I see the data-url but that seems to be for loading ajax content but not navigation.   
 
You can navigate to another page while clicking the list items using navigateUrl field. Please refer to the following code example: 
 
[html] 
<ul> 
        <li data-ej-text="Home" id="navhome" data-ej-navigateurl="http://search.yahoo.com/"></li> 
        <li data-ej-text="Help" id="navProfile" data-ej-navigateurl="http://www.bing.com/"></li> 
        <li data-ej-text="About" id="navPhoto" data-ej-navigateurl="https://duckduckgo.com/"></li> 
    </ul> 
 
Query: I also looked for an onClick event and could not find one. 
 
You can trigger the mouseUp event while clicking the list items. Refer to the following API link: 
 
Forum ID – 132510 : I have a navbar with three sample pages, welcome,grid, and drawer.  On page initial load if you click on drawer it is not displayed correct.  However if you then click on grid which display a sf-grid and then go back and click on drawer it works. 
 
We have checked your demo and you have referred the CSS (ej.theme.min.css & ej.widgets.core.bootstrap.min.css) file only in grid rendering page and not in the Navigation drawer page. So, the css is not applied. To overcome this issue, you need to refer the CSS file in boostrap.html page or need to refer the common page. Refer to the following code example: 
 
[boostrap.html] 
<template> 
    <require from="syncfusion-javascript/Content/ej/web/ej.widgets.core.bootstrap.min.css"></require> 
    <require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.theme.min.css"></require> 
    <require from="syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css"></require> 
<section> 
  <div id="navigationPane"> 
 
Forum ID – 132502 : Grid will not be visible but if you remove data-ej-rel='nofollow' href grid will be visible again. 
 
You have given the data-ej-rel='nofollow' href="#syncfusion". But, did not find the rel='nofollow' href id(#syncfusion) in that page. So, this issue has occurred. If you want to load the synfusion.html page, you can use the navigateUrl field. Refer to the following code example: 
 
[nav-bar.html] 
<div id="navigationPane"> 
        <ul> 
            <li data-ej-text="Home"></li> 
            <li data-ej-text="Profile"></li> 
            <li data-ej-text="Photos"></li> 
            <li data-ej-text="Location" data-ej-navigateurl="../#/syncfusion"></li> 
        </ul> 
    </div> 
 
 
Also, need to refer the CSS file in nav-bar.html page 
[nav-bar.html] 
 
<template> 
            <require from="syncfusion-javascript/Content/ej/web/ej.widgets.core.bootstrap.min.css"></require> 
            <require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.theme.min.css"></require> 
            <require from="syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css"></require> 
            <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> 
                <div class="navbar-brand icon-target" id="target"></div> 
                <div class="navi"> 
                    <div id="target" class="icon-target"> Drawer</div> 
                </div> 
 
Please let us know if you need any further assistance. 
 
Regards, 
 
Selvamani S. 


dan
Replied On September 6, 2017 08:27 AM

Thank you so much.

Is there documentation listing additional properties like the navigateUrl?

I looked in the api for menu and listview and did not see it.


Again thank you very much for your help.


dan
Replied On September 6, 2017 05:40 PM

Forum ID – 132510 

Regarding the navigation drawer you fixed the problem regarding display and navigation, but now it will not automatically close when you select a menu item.

Thanks


dan
Replied On September 6, 2017 06:31 PM

In addition icons are not working.  data-ej-imageclass="e-home" no icon is displayed


dan
Replied On September 6, 2017 07:54 PM

Regarding the mouseUp click event it does not seem to be firing.  This may be an Aurelia issue.  I am not using the aurelia-syncfusion-bridge


attached() {
$("#navigationDrawer").ejNavigationDrawer({ targetId: "target", type: "overlay", direction: "left", enableListView: true, listViewSettings: { width: 200, selectedItemIndex: 0, mouseUp: "slideMenuClick", persistSelection: false }, position: "normal" });
}
slideMenuClick(e) {
alert('test')
}


Thanks and sorry for taking up so much of your time.


Selvamani Sankarappan [Syncfusion]
Replied On September 7, 2017 07:21 AM

Hi Dan, 
 
Thanks for the update. 
 
Query 1: Is there documentation listing additional properties like the navigateUrl? I looked in the api for menu and listview and did not see it. 
 
Sorry for the inconvenience. We will modify and update our documentation. 
 
Query 2: In addition icons are not working.  data-ej-imageclass="e-home" no icon is displayed 
 
You need to use the e-icon e-home instead of use the e-home class with prefix as e-icon. Refer to the following code example: 
 
[html] 
<div id="navigationPane"> 
        <ul> 
            <li data-ej-text="Home" data-ej-imageclass='e-icon e-home'></li> 
            <li data-ej-text="Profile"></li> 
            <li data-ej-text="Photos"></li> 
            <li data-ej-text="Location" data-ej-navigateurl="../#/syncfusion"></li> 
        </ul> 
    </div> 
 
Refer to the following documentation for further clarification: 
 
Query 3: Regarding the mouseUp click event it does not seem to be firing.  This may be an Aurelia issue.  I am not using the aurelia-syncfusion-bridge 
 
You have rendered the component using JQuery at attached () function. So, it’s does not trigger the outside functions. To overcome this issue, you can write the necessary code on rendering. Refer to the following code example: 
 
[nav-bar.js] 
 
attached() { 
           $("#navigationPane").ejNavigationDrawer({enableListView: true, targetId: "target", 
               listViewSettings: { width: 200, selectedItemIndex: 0,  
                   mouseUp: function(e) { 
                       alert("mouseUp event is triggered"); 
                   },  
                   persistSelection: false } 
           }); 
    } 
 
If you need to render the Navigation Drawer component at using Aurelia feature, refer to the following demo: 
 
Query 4 : Regarding the navigation drawer you fixed the problem regarding display and navigation, but now it will not automatically close when you select a menu item. 
 
Based on your application structure, the list view does not close after selecting the list items. So, you can close the listview at manually using close method in mouseUp event. Refer to the following code example: 
 
[nav-bar.js] 
 
attached() { 
           $("#navigationPane").ejNavigationDrawer({enableListView: true, targetId: "target", 
               listViewSettings: { width: 200, selectedItemIndex: 0,  
                   mouseUp: function(e) { 
                       alert("mouseUp event is triggered"); 
                       var obj = $("#navigationPane").ejNavigationDrawer("instance"); 
                       obj.close(); 
                   },  
                   persistSelection: false } 
           }); 
    } 
 
Please let us know if you need any further assistance. 
 
Regards, 
 
Selvamani S. 


dan
Replied On September 15, 2017 12:14 PM

Everything is working thanks but I do have a question about the documentation,

Query 2: In addition icons are not working.  data-ej-imageclass="e-home" no icon is displayed 

In the https://help.syncfusion.com/js/navigationdrawer/getting-started page of the navigation drawer you have the data-ej-imageClass set to icon-home as in 
<li data-ej-imageclass="icon-home" data-ej-text="Home"></li>

The above does not work as you pointed out, am I reading the docs wrong?

Thanks

Selvamani Sankarappan [Syncfusion]
Replied On September 18, 2017 05:56 AM

Hi Dan, 
 
Sorry for the inconvenience. We will modify and update our documentation. You can follow the below documentation to add the icons: 
 
 
Please let us know if you need further assistance. 
 
Regards, 
 
Selvamani S. 


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.

;