APEX

Hi!

I am trying to create a Delete Button in the Toolbar of an Interactive Grid and I could really use some help. I am using this code that creates the button just fine but the functionality is not as good as it keeps deleting all the existing rows of the Interactive Grid and I just want it to delete the selected ones.

function(config) {
   let $ = apex.jQuery,
       toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), 
       toolbarGroup = toolbarData.toolbarFind("actions3");
   // New Button in the ToolBar
   toolbarGroup.controls.push({
       type: "BUTTON",
       id: "delete",
       label: "Delete row",
       icon: "fa fa-trash", // Trash icon
       iconBeforeLabel: true,
       disabled: false,
       action: "delete-selected-row" 
   });
   // Define the action
   config.initActions = function(actions) {
       actions.add({
           name: "delete-selected-row",
           label: "Delete Selected Row",
           action: function(event, focusElement) {
               var region = apex.region("BOLSA_IG"),
                   view = region.call("getCurrentView");
               if (view.internalIdentifier === "grid") {
                   var selectedRecords = view.view$.grid("getSelectedRecords"); // Obtain selected rows
                   if (selectedRecords.length > 0) {
                       // Iterate over the selected records and delete each one
                       selectedRecords.forEach(function(record) {
                           region.call("getActions").invoke("selection-delete", {
                               records: [record]
                           });
                       });
                   }
               }
           }
       });
   }
   // Assign the updated toolbar back to settings
   config.toolbarData = toolbarData;
   return config;
}

I use the function in the Initialization JavaScript Funtion in the advanced configuration of the interactive grid.

This is how it looks in the app

Thank you very much!