Skip to main content

Interactive Grid - Displaying Master data in Detail IG Header

Recently one of the users has asked a question "Would it be possible to display selected master row data in detail interactive grid region header?". Yes, why not, it's indeed a reasonable request. However, during implementation, I have found it is little tricky to implement a solution which works in all cases and finally I have managed to get it done. I am sharing this here as it may help other APEX developers.

Master Details IG

When user selects any row using the row selector check box or when user just clicks on any row, then selectionchange event is fired. This event is fired, irrespective of whether IG is in edit mode or not. So, we can use this event to get data from selected master record.

For demo purpose, consider Interactive Grid (IG) on Department table as master and IG on Employees table as detail. And assume requirement is to display selected/current department name in Employees IG region title. 

To implement this, let's create Dynamic Action (D.A.) as below
  • Create D.A. and give it a proper name e.g. "Sel Change - Set EMP Title"
  • In "When" Section, select
    • Event: Selection Change [Interactive Grid]
    • Selection Type: Region
    • Region: Departments (In the demo, Master IG region name is "Departments")
  • True Action
    • Action: Execute JavaScript Code
    • Code: Refer below code
try {
    // Static id specfied for Departments IG: dept
    var gridView = apex.region("dept").widget().interactiveGrid("getCurrentView");
    var records = gridView.getSelectedRecords();
    // other option to get selected rows is as below from event data
    // var records = this.data.selectedRecords;
    // but, not using as this approach as this event was not passing any data before APEX 18.2, 
    // other reason is, in 19.2 (and probably in 19.1 and 18.2), above code is not returning any data when IG is in edit mode
    var model = gridView.model;
    var currDept = model.getValue(records[0], "DNAME");
    if (records.length === 1 && currDept !== "") {
        // Using standard region template for Employees IG
        // Static id specfied for Employees IG: emp
        // Department Name field is simple text field. For LOV based items, you may want to use currDept.d syntax to get display value     
        $("#emp_heading").html(currDept + " Employees");
    }
    else
        $("#emp_heading").html("Employees");

} catch (error) {
    // when "Select First Row" is disabled, then after page load, this code gives JavaScript error
    // we can get error when user un checks all the rows
    // these cases, just set generic title 
    $("#emp_heading").html("Employees");
}

This works in most of the cases. But, consider user is changing department name and moving to location field or adding new department, then, in these cases, users will not see latest department name in detail IG title immediately. So, we need another D.A. to listen to department name changes and update the Employees IG region title. 

So, let's create another D.A. as below
  • Create D.A. and give it a proper name e.g. "DNAME Change - Set EMP Title"
  • In "When" Section, select
    • Event: Change
    • Selection Type: Column(s)
    • Region: Departments (In the demo, Master IG region name is "Departments")
    • Column(s): DNAME (As we are using DNAME in Details IG title, we should listen changes on this column)
  • True Action
    • Action: Execute JavaScript Code
    • Code: Refer below code
var gridView = apex.region("emp").widget().interactiveGrid("getCurrentView");
var records = gridView.getSelectedRecords();
var currDept = $v(this.triggeringElement);
// set details IG title only when deparment name is not empty and only one row is selected
if (currDept !== "" && records.length === 1)
  $("#emp_heading").html(currDept + " Employees");
else
  $("#emp_heading").html("Employees");

That's it and here is the link for demo.

Thank you.

Comments

Popular posts from this blog

Interactive Grid - Bulk Operation on Selected Rows

What's the Problem? Let's say you have an IG on employee table and you want to update selected employees commission based on user's input. Ideally, it should be very simple, where you can write UPDATE statement in page process and select IG region as "Editable Region" under "Execution Options" of the page process. But, when you select rows and submit page, you can see that, this process won't get executed! The reason is  Selection of 'Row Selector' check-boxes is not considered as row-change. Thus selected rows are not submitted to server. So, is there any work around?  Yes! Luckily there are lot of JavaScript (JS) APIs available to work with IG. If you are not already aware, you can refer "APEX IG Cookbook"  or  JavaScript API Reference documentation. If we continue with above Employee IG example, when user selects IG rows, enters "Commission %" and clicks on "Update Commission" button, then we can writ

Interactive Grid - Conditional Enable/Disable

In this blogpost, I am going to discuss few approaches using which we can conditionally enable/disable Interactive Grid (IG) column(s) based on other column(s) values. Note:    There is a bug  30801170  in APEX 19.2/20.1 with respect to "enable/disable" dynamic actions for IG columns. Workaround for this bug is provided at the end of this blogpost . This bug has been fixed in APEX version 20.2. Client Side Only Conditions If conditions to enable/disable are simple, then we can check those conditions easily on the client side. For e.g. let's consider IG on EMP table with following SQL Query. SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO FROM EMP Let's consider the requirement as - Enable "Commission" column only when JOB is equals to 'SALESMAN' and disable "Commission" column in all other cases. This can be done declaratively using dynamic actions (DA) DA "Enable/Disable Commission - 1" Create DA and give it a prope

Oracle APEX Stylish Radio Buttons

Do you know you can convert your radio buttons into something stylish and fancy almost declaratively in Oracle APEX? If you are not aware about this, then you may find this blog post useful.  Pill Buttons You can easily convert radio buttons into pill buttons using "Template Options". Select Radio button item, and in item properties, go to  "Appearance > Template Options > Advanced". Look for option " Item Group Display " and choose the option " Display as Pill Button ". That's it. You radio buttons will be converted as cool "Pill" buttons.  Display Radio Buttons as Icons You can display icons instead of label text. For this, all you need to do is In item LOV, write "icon html" as "Display Value". e.g. icon html code <span aria-hidden="true" class="fa fa-emoji-big-eyes-smile fa-3x"></span> In item properties, set "Escape special characters" as "Off" T