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

[Christoph Weller]

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]

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]

Hello,

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

Best regards

Christoph Weller

[Ashokkumar Balasubramanian]

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. 

 

Sample Link:  https://www.syncfusion.com/downloads/support/directtrac/146118/ze/WebApplication1-1938610688 

 

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]

Hello,

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

Best regards

Christoph Weller

[Vinoth Kumar Sundara Moorthy]

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