Select a row and the detailed information is displayed.
In this demo a row is selected by clicking the radio button. For other methods see the demo Select row
Upon clicking the button several things happen.
- First the id corresponding with the selected row is set as value of a page item.
Onchange of that item the corresponding detail report is refreshed and after the refresh the first row is automatic selected.
- Secondly the class displaying the icon is changed to show a a bullet icon. At the same time the previous selected row get the icon of an open radio.
- And finally the selected row is highlighted while the previous selected row is returned to normal.
Select the row and refresh the detail.
This is the main, working part. The changing of the appearances described below to visualize which row is selected. This section describes how to get the detail to show the data of the selected master. And the detail of the detail should show the data of the first detail.
HTML of the button where 1500 is the location id.
<button type="button"
id="LOCATION_1500"
class="location ui-icon ui-icon-radio-on">
</button>
A row is selected by clicking the (radio)button this sets the value of a page item to the idea of the row. This is done with a dynamic action on click of the button with action setValue type Javascript expression with the following code.
String(this.triggeringElement.id).split('_')[1];
This takes the id of the button, splits it on the underscore and returns the second part, which is the id of the location. Since the button is in a column you have to use a jQuery selector to bind the dynamic action. The selector used is .location. Make sure to you select Dynamic for the Event Scope.
Onchange of the page item a dynamic action of type Refresh is fired with as affected element the department region.
The department region has a dynamic action that is fired on "After refresh" of the region. The action is of type execute javascript code with:
$('#'+this.triggeringElement.id)
.find('[id^="'+this.triggeringElement.id+'"]')
.filter('button')
.first()
.trigger('click');
This gets the jQuery object of the triggering element. Then finds the button the id of the buttons starts with the id of the triggering element.
Of all the buttons found get the first. And trigger the click event. This select the first row of the departments and sets of everything that happens upon clicking of a button.
Changing the appearance of the button
An unselected row has a button with the class ui-icon-radio-on this shows an open circle. The button of a selected row should show a closed circle. This is done with the class ui-bullet.
I have chosen for this two icons because used together they look like a unselected and selected radio option of a radio group. Of course you can use any icon combination you want.
To switch the classes we first need to add the ui-icon-radio-on class to the button that now has the ui-bullet class.(1)
Then remove the ui_bullet class from that button.(2)
Then add the ui_bullet icon(3) to the triggering button and remove the ui-icon-radio-on.(4)
| No | Action | Class | Affected element type | Affected element |
|---|
| 1 | Add class | ui-radio-on | jQuery selector | .location.ui-icon.ui-bullet |
| 2 | Remove class | ui-bullet | jQuery selector | .location.ui-icon.ui-bullet |
| 3 | Add class | ui-bullet | triggering element | |
| 4 | Remove classs | ui-radio-on | triggering element | |
Changing the appearance of the row
To change the appearance of the row first the highlight class needs to be removed of the previous selected row. And then added it to the newly selected row.
The removing of the highlight row is done with the affected element jQuery selector #LOCATION .highlight
You can't set the highlight class to the current row with a addClass action because the class needs to be set to a parent of the triggering element. There is no way to define the affected element as parent of the triggering element. Use a action of type execute javascript instead. The code is
$('#'+this.triggeringElement.id)
.closest('tr')
.addClass("highlight");
Bonus and Tips
The rows don't look selected upon page load even when the page items are set. To accomplice this a dynamic action on page load is used with the following javascript code.
/*Set the looks of the selected location*/
if (apex.item('P41_LOCATION_ID').getValue() !== "") {
$('#LOCATION_'+apex.item('P41_LOCATION_ID').getValue()).removeClass('ui-icon-radio-on').addClass('ui-icon-bullet').closest('tr').addClass('highlight');
}
/*Set the looks of the selected department*/
if (apex.item('P41_DEPARTMENT_ID').getValue() !== "") {
$('#DEPARTMENT_'+apex.item('P41_DEPARTMENT_ID').getValue()).removeClass('ui-icon-radio-on').addClass('ui-icon-bullet').closest('tr').addClass('highlight');
}
/*Set the looks of the selected employee*/
if (apex.item('P41_EMPLOYEE_ID').getValue() !== "") {
$('#EMPLOYEE_'+apex.item('P41_EMPLOYEE_ID').getValue()).removeClass('ui-icon-radio-on').addClass('ui-icon-bullet').closest('tr').addClass('highlight');
}
To get the code for the department and employee change location to department c.q. employee.
Don't forget to set the page item used in the source of the detail regions as item to be submitted.