3 ways to Add Custom Button In Interactive Grid Oracle APEX

3 ways to Add Custom Button In Interactive Grid Oracle APEX?

Now there are 3 ways to create custom Add, Edit, Save, and Delete buttons for an Interactive Grid in Oracle APEX and all these buttons will execute the JavaScript code to perform Add, Edit, Save, and Delete row functions.

But the question is that why we should create custom buttons when we have the default buttons enabled for an Interactive Grid in Oracle APEX? We never know what kind of a requirement can come from the client for customization and then we have to create custom button to take more control over it, To create this custom button follow these below steps:

Solution: 1

Create interactive grid using following query and set Static ID “ontoor” to the Interactive Grid Region:

Copy Code

select ROWID,
       EMPNO,
       ENAME,
       JOB,
        DEPTNO       
  from EMP
 where 1=2

Copy and paste following jQuery to region attributes in JavaScript Initialization Code:

Copy Code

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

    addrowAction.label = "Aditional Row"; // lebel Name
    addrowAction.icon = "icon-ig-add-row"; // icon added
    addrowAction.iconBeforeLabel = true;
    addrowAction.hot = true;

    saveAction.label = "Save";
    saveAction.iconBeforeLabel = true;
    saveAction.icon = "icon-ig-save-as";
    saveAction.id = "get"; // button id
    saveAction.hot = true;

    editAction.label = "Edit";
    editAction.iconBeforeLabel = true;
    //editAction.icon ="icon-ig-edit-as";
    editAction.id = "edit";
    editAction.hot = true;

 toolbarGroup.controls.push({
 	type: "BUTTON",
    action: "selection-delete",
    icon: "icon-ig-delete",      // alternative FontAwesome icon: "fa fa-trash",
    iconBeforeLabel: true,
    hot: true
});


    config.toolbarData = toolbarData;
    return config;
}

Solution: 2

Use above sql query for second solution.
Copy and paste following query to region attributes in JavaScript Initialization Code:

Copy Code

function(config) {
    let $ = apex.jQuery,
    toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),     // copy the whole toolbar
    // this is the group with the action=add row
    toolbarGroup = toolbarData.toolbarFind("actions3");

toolbarGroup.controls.push({
                type: "BUTTON",
                action: "selection-delete",
                icon: "icon-ig-delete",     // alternative FontAwesome icon: "fa fa-trash",
                iconBeforeLabel: true,
                hot: true
                 });

toolbarGroup.controls.push({
						type: "BUTTON",
						action: "selection-add-row",
						label :"Add rows",
						icon: "icon-ig-add-row",  // FontAwesome icon: "icon-ig-add-row",
						iconBeforeLabel: true,
						hot: true
                               });

 toolbarGroup.controls.push({  
						type: "BUTTON",
						action: "save",
						label :"Save",
						icon: "icon-ig-save-as",  //FontAwesome icon: "icon-ig-save-row",
						iconBeforeLabel: true,
						hot: true
						});

    config.toolbarData = toolbarData;
    return config;
}

Solution: 3

Set Region Static ID,Template and Attributes for the Interactive Grid Region:

* Advanced > Static ID: ontoor
* Appearance > Template: Standard
* Edit Enabled: Yes (Region Attributes)

Create four button using name: ADD_ROWS, SAVE, DELETE, EDIT and set button position to next.

Create dynamic action on click ADD_ROWS button and execute following script.

Copy Code

apex.region( "ontoor" ).widget().interactiveGrid( "getActions" ).invoke( "selection-add-row" );

Create dynamic action on click SAVE button and execute following script.

Copy Code

apex.region( "ontoor" ).widget().interactiveGrid( "getActions" ).invoke( "save" );

Create dynamic action on click DELETE button and execute following script.

Copy Code

apex.region( "ontoor" ).widget().interactiveGrid( "getActions" ).invoke( "selection-delete" );

Create dynamic action on click EDIT button and execute following script.

Copy Code

apex.region( "ontoor" ).widget().interactiveGrid( "getActions" ).set("edit", true);

Demo

3 ways to Add Custom Button In Interactive Grid Oracle APEX?

You might also like