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

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

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

5 Replies

CK chris kraft 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');
            }
        }
    }


CW Christoph Weller 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


AB Ashokkumar Balasubramanian Syncfusion Team 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. 



CW Christoph Weller July 22, 2019 02:26 PM UTC

Hello,

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

Best regards
Christoph Weller


VK Vinoth Kumar Sundara Moorthy Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon