CODEWITHSUNDEEP
oracle-apexoracle-apex-5.1
Yash Sharma
Yash Sharma

Reputation: 374

New Buttons in Interactive Grid toolbar

I need to add a new button to existing IG toolbar, which will set a specific value in the table column and then save the record.

Is there any way to create new buttons/change the behavior of existing Interactive Grid toolbar buttons?

Upvotes: 0

Views: 5103

Answers (1)

Chaitanya Koratamaddi
Chaitanya Koratamaddi

Reputation: 261

I see you are using APEX 5.1. Yes, you can customise toolbar buttons in an interactive grid. For example, you can modify the look and feel of the Save and Add Row buttons and also add a Delete button. Select your interactive grid region and in the property editor, enter a value for Advanced > Static ID. Select Attributes > Advanced > JavaScript Initialization Code and input the following:

function(config) {
    let $ = apex.jQuery,
        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), 
        toolbarGroup = toolbarData.toolbarFind("actions3"); 
        addrowAction = toolbarData.toolbarFind("selection-add-row"), 
        saveAction = toolbarData.toolbarFind("save"); // Save button

    // adding a  "Delete" button
    toolbarGroup.controls.push({type: "BUTTON",
                                action: "selection-delete",
                                icon: "icon-ig-delete", 
                                iconBeforeLabel: true,
                                hot: true
                               });


    // Modifying the buttons
    addrowAction.icon = "icon-ig-add-row"; 
    addrowAction.iconBeforeLabel = true;
    addrowAction.hot = true;

    saveAction.iconBeforeLabel = true;
    saveAction.icon ="icon-ig-save-as"; 
    saveAction.hot = true;


    //storing the config
    config.toolbarData = toolbarData;
    return config;
}

Now run the page to see the customisation.

Here's a nice video that shows how to customise IG toolbar. https://www.youtube.com/watch?v=_PBdBAfPBfQ

Upvotes: 2

Related Questions