jqueryoracle-apex

Adding a Toggle to an Interactive Grid Toolbar


I have been looking around at various ways to customize an interactive grid tool bar. All of the documentation claims that a toggle item is supported, but don't include the jQuery syntax required and I can't seem to implement one successfully. When I include the code attached at the bottom to Initialization JavaScript Function section of my interactive grid's region settings, I get the following error c.get is not a function

Any assistance would be greatly appreciated.

function(config) {
    let $           = apex.jQuery,
      toolbarData   = $.apex.interactiveGrid.copyDefaultToolbar(),
      toolbarGroup  = toolbarData.toolbarFind("actions4");
  
    toolbarGroup.controls.push({type: "TOGGLE",
                            action: "toggle-comment"
                           });
    config.initActions = function(actions){
    actions.add({
        name: "toggle-comment",
        action: function(event, focusElement) {
            if (focusElement.value == true) {
                gridView = apex.region("criteria-list").call("getViews").grid;
                gridView.view$.grid("showColumn", "COMMENT_TEXT");
            } else {
                gridView = apex.region("criteria-list").call("getViews").grid;
                gridView.view$.grid("hideColumn", "COMMENT_TEXT");
            };
        }
    });
    }
    config.toolbarData = toolbarData;
    return config;
}


Solution

  • The 'c' in c.get comes from the minified JavaScript file. To get a more speaking error message, what will help you is to put the page in debug mode (INFO). In debug mode, the original script will be loaded. And the message will become: 'lAction.get is not a function'. For toggle action, a get and a set function is expected. So APEX can know the state of the toggle. This state you have to maintain. It can be done like this:

    function(config) {
        let $           = apex.jQuery,
          toolbarData   = $.apex.interactiveGrid.copyDefaultToolbar(),
          toolbarGroup  = toolbarData.toolbarFind("actions4");
      
        toolbarGroup.controls.push({type: "TOGGLE",
                                action: "toggle-comment"
                               });
        config.initActions = function(actions){
            actions.add({
                name: "toggle-comment",
                label: "Show/Hide Comments",
                showColumn: true,  // state of the toggle; initially true
                set: function(showColumn) {
                    this.showColumn = showColumn;
                    gridView = apex.region("criteria-list").call("getViews").grid;
                    gridView.view$.grid(this.showColumn ? "showColumn" : "hideColumn", "COMMENT_TEXT");                
                },
                get: function()
                {
                    return this.showColumn;
                }
            });
        }
        config.toolbarData = toolbarData;
        return config;
    }