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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Get click event of menu bar and selected menu item (JQuery)

Thread ID:

Created:

Updated:

Platform:

Replies:

146118 Jul 21,2019 11:20 AM UTC Jul 24,2019 06:49 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: Menu Bar
Christoph Weller
Asked On July 21, 2019 11:20 AM UTC

Hi,

I have an Menu Bar and i get the event click of the menu, now i want to get the selected menu item. Now i have this :

Html:
        <div id="menu">
                <ejs-menu id="mainmenu" items="@viewModel.MainMenuItems" beforeOpen="menuBeforeOpen()">
                    <e-menu-fieldsettings id="id" parent-id="parentid"/>
                </ejs-menu>
        </div>
Javascript:
    function menuBeforeOpen() {
        document.getElementById("mainmenu").onclick = menuClick;
    }

    function menuClick() {
          // here i want to get the selected menu item
    }

How can i archive this, can it be done with JQuery ?

Best regards
Christoph Weller

chris kraft
Replied On July 21, 2019 06:23 PM UTC

I had the same goal.  I was able to accomplish it using the code below.  I have a step to verify a row is selected else show an alert.  My action is to go to a different page to edit/create the record rather than using the built in modal boxes.
    
function showAlert(title, msg) {
        ej.popups.DialogUtility.alert({
            title: title,
            content: msg,
            okButton: { text: "Ok" },
            showCloseIcon: true,
            closeOnEscape: true,
            animationSettings: { effect: 'Zoom' }
        });
    }

    function toolbarClick(args) {
        var domain = window.location.origin;
        var newURL = "";
        if ("1" + this.getSelectedRowIndexes() + "1" !== "11") {
            var selectedrowindex = this.getSelectedRowIndexes();  // get the selected row indexes.
            var selectedrecords = this.getSelectedRecords();  // get the selected records.
            var RowId = this.getSelectedRecords()[0].<fieldIdentity>;
            if (args.item.id === 'Edit') {
                newURL = "/<path>/Edit/" + RowId;
                window.location.replace(domain + newURL);
            }
            if (args.item.id == 'Add') {
                newURL = "/<path>/Create/";
                window.location.replace(domain + newURL);
            }
            if (args.item.id == 'Refresh') {
                location.reload('true');
            }
        }
        else {
            if (args.item.id == 'Edit') {
                showAlert("Warning!", "You must first select a row by clicking on it in order to edit the data.");
            }
            if (args.item.id == 'Add') {
                newURL = "/<path>/Create/";
                window.location.replace(domain + newURL);
            }
            if (args.item.id == 'Refresh') {
                location.reload('true');
            }
        }
    }

Christoph Weller
Replied On July 22, 2019 08:09 AM UTC

Hello,

Thanks for your answer, but it didn't help me. I need an solution for menu bar.

Best regards
Christoph Weller

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 22, 2019 12:16 PM UTC

Hi Christoph, 
 
Thank you for your update. 
 
We have checked your reported requirement “To get the selected menu item”and it can be be achievable by using select event as like in the below code example. 
 
CODE SNIPPETS: 
 
<ejs-menu id="mainmenu" items="ViewBag.menuItems" select="onItemSelect"> 
   </ejs-menu> 
 
<script> 
   function onItemSelect(args) { 
      alert(args.item.text + " is clicked");  // alerts the selected item text 
      console.log(args); // selected item details printed in console window 
    } 
</script> 
 
For your convenience, we have prepared the sample based on our suggestion. Please find the link below. 
 
 
Could you please check the above details and get back to us, if you need any further assistance on this? 
 
Regards, 
Ashokkumar B. 


Christoph Weller
Replied On July 22, 2019 02:26 PM UTC

Hello,

Thank you very much! That was what i'am looking for.

Best regards
Christoph Weller

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On July 24, 2019 06:49 AM UTC

Hi Christoph, 
  
You are most welcome. Please feel free to contact us if you need any further assistance on Syncfusion components. 
  
Regards, 
Vinoth Kumar 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