βž•πŸŽ― Add Row with Auto Focus on specific Column in Interactive Grid in Oracle APEX

βž•πŸŽ― Add Row with Auto Focus on specific Column in Interactive Grid in Oracle APEX

1. Introduction

This article explains How to Add Row with Auto Focus on specific Column in Interactive Grid. The solution is implemented using a combination of Oracle APEX and Javascript.

2. Tools and Technologies

To achieve the desired functionality, the following technologies are used:

  • Oracle APEX
  • Javascript

3. Business Requirement

The business requires an enhanced data entry experience in the Oracle APEX Interactive Grid to improve user productivity and accuracy. When users add a new row, the system must automatically place the cursor in a predefined column, allowing immediate data entry without additional clicks or navigation. This requirement aims to reduce manual effort, minimize data entry errors, and streamline operational workflows, especially for users who frequently insert records into transactional or master data grids.

The solution should be reusable across multiple pages and components within the Oracle APEX application while maintaining security and performance standards.

4. Implementation Steps

Step 1: Go to the Page Designer

Open Oracle APEX and navigate to Application Builder then select the page that contains your Interactive Grid. After that Click on the Interactive Grid region and then under the Appearance section, add the following value in CSS Classes:

employee_report

Step 2: Create Dynamic on Intractive Grid 

Go to Page Designer β†’ Report β†’ Dynamic Action β†’ True Action(Execute Javascript). And Paste the below Javascript snippet and save the page.

apex.jQuery(document).ready(function() {
var ig$ = apex.region("employee_report").widget().interactiveGrid("getViews").grid.view$;
if (ig$) {
var activeRecordId = ig$.grid("getActiveRecordId");
if (activeRecordId) {
    var columnName = "SAL";
    ig$.grid("gotoCell", activeRecordId, columnName);
} else {
    console.log("No active record.");
}
} else {
console.log("Interactive Grid is undefined.");
}
}) ;

Step 3: Save and Run the page

5. Output

Following the above steps, you can Add Row with Auto Focus on specific Column in Interactive Grid in Oracle APEX. This ensures a smoother and more user-friendly experience.

Thanks for reading! We hope this guide helped you to Add Row with Auto Focus on specific Column in Interactive Grid in Oracle APEX.

Love coding? Me too! Let’s keep in touch – subscribe to my website for regular chats on Oracle APEX, PL/SQL,SQL JavaScript, and CSS.

Comments

No comments yet. Why don’t you start the discussion?

    Leave a Reply

    Your email address will not be published. Required fields are marked *