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

[dan]

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]

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: 

 https://help.syncfusion.com/api/js/ejlistview#events:mouseup 

 

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]

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]

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]

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

[dan]

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]

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: 

https://help.syncfusion.com/js/icon/ej-icons 

 

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: 

http://aureliajq.syncfusion.com/#/samples/navigationdrawer/basic-use 

 

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]

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]

Hi Dan, 

 

Sorry for the inconvenience. We will modify and update our documentation. You can follow the below documentation to add the icons: 

 

https://help.syncfusion.com/js/icon/ej-icons  

 

Please let us know if you need further assistance. 

 

Regards, 

 

Selvamani S.