Sonntag, 17. Dezember 2017

Add custom menu to Interactive Grid Toolbar

if you want to include a custom menu in interactive grid, you can do it that way. In this example we will add the custom Menu in the Group actions3

1- create a variable for the actions3 Group
let $ = apex.jQuery, 
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), // copy the whole toolbar
 toolbarGroup = toolbarData.toolbarFind("actions3"); // this is the group with the action=add row

2- create a array to push your Items menu

let items_menu  = [];
 items_menu.push({type: "action", action: function(){callAlert();}, label: "custom1",  icon: "fa fa-home",  disabled:false});
 items_menu.push({type: "separator"});
 items_menu.push({type: "action", action: function(){alert(apex.region("emp").widget().interactiveGrid("getViews","grid").view$.grid("getSelectedRecords")["0"][1])},label: "custom2", hide: false, icon: "fa fa-remove"});
 items_menu.push({type: "action", action: function(){alert("custom3")}, label: "custom3", hide: false, icon: "fa fa-eye"});
 items_menu.push( {type: "separator"});
 items_menu.push({type: "action", action: function(){alert("custom4")}, label: "custom4", hide: false, icon: "fa fa-apex"});

3- create  a object, add that items Menu  and push it to the toolbarGroup array

let array_menu = {};
array_menu.items = items_menu;

toolbarGroup.controls.push({type: "MENU",
                                action: "custom-menu",
                                label: "Menu",
                                id: "menu_id",
                                icon: "fa fa-home",
                                iconBeforeLabel: true,
                                 hot: true,
 config.toolbarData = toolbarData;

4- Demo