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

Sample code is not working...

Thread ID:

Created:

Updated:

Platform:

Replies:

147958 Sep 29,2019 02:48 PM UTC Apr 8,2020 09:48 AM UTC Vue 9
loading
Tags: Menu
Miles Benson
Asked On September 29, 2019 02:48 PM UTC

I scaffolded a vue app as normal.
Then I dropped the sidebar menu sample code in to a .vue component file.
I added the following packages

"@syncfusion/ej2-base": "^17.2.49",
"@syncfusion/ej2-buttons": "^17.2.47",
"@syncfusion/ej2-data": "^17.2.47",
"@syncfusion/ej2-inputs": "^17.2.52",
"@syncfusion/ej2-lists": "^17.2.47",
"@syncfusion/ej2-navigations": "^17.2.49",
"@syncfusion/ej2-popups": "^17.2.47",
"@syncfusion/ej2-splitbuttons": "^17.2.47",
"@syncfusion/ej2-vue-base": "^17.2.47",
"@syncfusion/ej2-vue-buttons": "^17.2.47",
"@syncfusion/ej2-vue-lists": "^17.2.47",
"@syncfusion/ej2-vue-navigations": "^17.2.49",

The component is visible but the menu doesn't work.  I can see the following in the console log

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <ejs-menu> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <SidebarMenu> at src/components/SidebarMenu.vue
       <App> at src/App.vue
         <Root>
I've tried everything I can think of but I can't get past this point.

Any/all help would be very much appreciated.

Thanks
Miles







Ashokkumar Balasubramanian [Syncfusion]
Replied On September 30, 2019 09:53 AM UTC

Hi Miles Benson, 
 
Good day to you. 
 
We have checked your reported query to throw script error while running sidebar menu sample. We sorted out the solution for the problem to use menuPlugin and SidebarPlugin separately it will helpful for you to resolve the issue. Please refer the code snippet below. 
 
import Vue from "vue"; 
import { SidebarPlugin } from '@syncfusion/ej2-vue-navigations'; 
import { MenuPlugin } from "@syncfusion/ej2-vue-navigations"; 
import { enableRipple } from '@syncfusion/ej2-base'; 
Vue.use(SidebarPlugin); 
Vue.use( MenuPlugin); 
  
For your reference, we have prepared a sidebar menu sample. 
 
 
Please let us know, if you have any concerns. 
 
Regards, 
Ashokkumar B. 


Miles Benson
Replied On September 30, 2019 10:27 AM UTC

Hi Ashokkumar
Thank you very much.
Greatly appreciated.
Cheers
Miles


Ashokkumar Balasubramanian [Syncfusion]
Replied On September 30, 2019 10:29 AM UTC

Hi Miles Benson, 
 
Most Welcome. 
 
Please let us know, if you need any further assistance.  
 
Regards, 
Ashokkumar B. 


Miles Benson
Replied On September 30, 2019 11:36 AM UTC

Hi Ashokkumar,

A couple of tiny extra questions, if I may, please?

Your documentation/samples around menus don't actually show how to react to a menu selection.  I can attach a handler to the select event but is there an "id" that can configured to communicate which menu item the user has chosen?

Also you support a "url" property for a simple navigation menu but that always opens in a new tab - is there an additional property which controls this?

Thank you.
Miles

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On October 1, 2019 10:43 AM UTC

Hi Miles, 
 
Good day to you. 
 
Query #1: I can attach a handler to the select event but is there an "id" that can configured to communicate which menu item the user has chosen? 
 
We have checked your reported requirement “To get the menu items id chosen by the user” and it can be achievable by using the select event arguments and id property as like in the below code example. 
 
Code Snippet 
<ejs-menu id="main-menubar" items="menuItems" select="select" orientation="Vertical"></ejs-menu> 
 
export default Vue.extend({ 
    data: function() { 
        return { 
            //.. 
            menuItems: [ 
            { 
                text: "Overview", 
                id: "overview", 
                url: "https://www.google.com", 
                iconCss: "icon-globe icon", 
                items: [ 
                    //.. 
                ] 
            } //..  
            ], 
        }, 
        methods: { 
            select: function(args) { 
                alert(args.item.id); 
                //args.item.text // to get the item text 
            } 
        } 
    }); 
 
<style> 
    /* URL customization in sidebar sample*/ 
    .e-menu-wrapper ul .e-menu-item a.e-menu-text.e-menu-url { 
        color: #fff; 
    } 
</style> 
  
For your convenience, we have prepared the sample based on your requirement. Please find the link below. 
 
 
In below sample it will navigate to new page on clicking Overview item in SideBar Menu, 
 
Query #2: you support a "url" property for a simple navigation menu but that always opens in a new tab - is there an additional property which controls this? 
 
We have checked your reported requirement and the url property always opens in the same tab only, unless you have given the target as blank in beforeItemRender event. Please refer the below help link for more details. 
 
 
Before we proceed further, would like to know the following details, 
 
1. Please provide more details regarding your requirement with url property. 
 
2. Confirm whether you need to open the link in same tab? 
 
3. If possible please replicate your issue in the above sample and send back to us. 
 
Could you please check the above sample and get back to us with the requested information? Based on this we will check and provide you a better solution quickly. 
 
Regards, 
Vinoth Kumar S 


Miles Benson
Replied On October 1, 2019 05:41 PM UTC

Hi Vinoth,

Thanks for you reply.  I can't immediately replicate my problem, but I'll get back to you if I struggle again.

Thanks
Miles

Sangeetha Priya Murugan [Syncfusion]
Replied On October 2, 2019 04:09 AM UTC

Hi Miles, 
 
Thank you for your update, we will wait to hear from you. 
 
Regards, 
Sangeetha M 


Jassen Michaels
Replied On April 7, 2020 12:56 PM UTC

Vinoth,

Thanks for the code sandbox example, it helped me sort out the same issue with the Vue.use() with multiple directives. Hopefully, the SyncFusion online example can be updated to reflect that.

One question I did have was is there an example of that same 'sidebar application' using NuxtJS? All my attempts at trying to port your online example to Nuxt has not worked. The page will render but is clearly not loading in something correctly.

Thanks in advance,

Jassen

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On April 8, 2020 09:48 AM UTC

Hi Jassen, 
 
Greetings from Syncfusion support. 
 
We have looked into your query. We have prepared a simple NuxtJS sample application with EJ2 Vue Sidebar for your reference. 
 
Please, download the sample from the following link. 
 
 
If you need any further assistance on implementing Sidebar in your application, then please share us the following details. 
 
·        Your exact requirement with Sidebar and its use-case scenario in your application. 
·        If possible, can you replicate your facing problem in above sahred sample. 
 
This information would help us to check your requirement with Sidebar and to provide you the prompt solution. 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig 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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon