CODEWITHSUNDEEP
asp.net-mvcjqgridcontextmenu
asolvent
asolvent

Reputation: 881

JQGrid ContextMenu - Dynamic Menus

I have a page, which is used for building queries and running them against different entities (Kind of a query builder/generic search).

The results are displayed in JQGrid, so effectively the same grid will be used for rendering results from different entities.

This results grid has to support context menus, which will differ for each entity. So I need a way to change the context menu as per the entity. Each entity may have different number of menu items in context menu and each item may respond in a different manner (sometimes an alert, sometimes an action spawning in a different tab).

Rendering different menus (through li) is not an issue but attaching the methods to the li is proving to be a challenge. Any pointers will be highly appreciated.

I am using jquery.contextmenu-ui.js .

Following is from a sample that I picked from their (JQGrid) site

function initGrid() {
    $("#EntityGrid").contextMenu('cMenu'
        ,{
        bindings: { /* I would like to avoid this and pass all the actions to one method*/
            'edit': function (t) {
                editRow();
            },
            'add': function (t) {
                addRow();
            },
            'del': function (t) {
                delRow();
            }
        },
        onContextMenu: function (event, menu) {
            var rowId = $(event.target).parent("tr").attr("id")
            var grid = $("#EntityGrid");
            grid.setSelection(rowId);
            return true;
        }
    }
    );
}

Thanks, Avinash

Upvotes: 1

Views: 927

Answers (1)

Oleg
Oleg

Reputation: 221997

You can use onShowMenu callback of contextMenu instead of static binding using bindings. In the same way the menuId used as the first parameter of contextMenu could be the id of dynamically created div with empty <ul>. The onShowMenu has the form

onShowMenu: function (e, $menu) {
    // here one can clear `<ul>` child of $menu
    // and append it with "<li>" items
    return $menu;
}

In the answer you will find an example of the code which build menu dynamically.

Upvotes: 1

Related Questions