This is a demonstration of different methods of selecting a row in a classic report. The selecting is done by clicking which fires a dynamic action described below. The actions are basicly a set to remove a class from the previous selected row and add the class to the current one. Set the value of a corresponding page item to the id of the selected row. And if needed actions to show the selected state of the clicked element. For the checkbox there are also actions for unchecking the checkbox (when condition = false)
The selectors used are depending on the templates used. The regions all have static id. This id is used in the selector to remove the highlight class from the previous selected row.
For the Location the dynamic action is bound to a button that is displaying a icon. The source for the button column is
'<button class="location ui-icon ui-icon-radio-on" id ="LOCATION_'||loc.location_id||'" type="button"> </button>' button
For the Country is bound to a checkbox. For the checkbox apex_item.checkbox2 is used with the following parameters:
apex_item.checkbox2(10 ,cou.country_id,'class="country"',:p43_country_id,null,'COUNTRY_'||cou.country_id) country_id
For the Department the dynamic action is bound to the row. To make it visible that the row is clickable the cursor is set to a pointer using CSS.
#DEPARTMENT table table tbody tr { cursor: pointer; }
For the Employee the dynamic action is bound to the radio item. Here the apex_item.radiogroup is used with the following parameters:
apex_item.radiogroup(1,emp.employee_id,null,null,'EMPLOYEE_'||emp.employee_id)
Select location
Element
.location
Event
jQuery Selector
Condition
Value
| Action | Fire when | Affected type | Affected |
|
|
|
Add Class
|
True
|
jQuery Selector
|
.location.ui-icon.ui-icon-bullet
|
Class
|
ui-icon-radio-on
|
|
Remove Class
|
True
|
jQuery Selector
|
.location.ui-icon.ui-icon-bullet
|
Class
|
ui-icon-bullet
|
|
Remove Class
|
True
|
jQuery Selector
|
#LOCATION .highlight
|
Class
|
highlight
|
|
Set Value
|
True
|
Item
|
P43_LOCATION_ID
|
Javascript expression
|
String(this.triggeringElement.id).split('_')[1];
|
|
Execute JavaScript Code
|
True
|
|
|
Code
|
/*Add the class highlight to the row of the triggering element.*/
$('#'+this.triggeringElement.id).closest('tr').addClass("highlight");
|
|
Add Class
|
True
|
Triggering Element
|
|
Class
|
ui-icon-bullet
|
|
Remove Class
|
True
|
Triggering Element
|
|
Class
|
ui-icon-radio-on
|
Select country
Element
.country
Event
jQuery Selector
Condition
JavaScript expression
Value
this.triggeringElement.checked
| Action | Fire when | Affected type | Affected |
|
|
|
Set Value
|
True
|
Item
|
P43_COUNTRY_ID
|
Javascript expression
|
String(this.triggeringElement.id).split('_')[1];
|
|
Execute JavaScript Code
|
True
|
jQuery Selector
|
.country
|
Code
|
/*Unselect any checkbox that is not the trigger element*/
var triggeringElement = this.triggeringElement;
$( this.affectedElements).each(function(){
if (this.id !== triggeringElement.id && this.checked){
$('#'+this.id).prop('checked',false);
}
});
|
|
Remove Class
|
True
|
jQuery Selector
|
#COUNTRY .highlight
|
Class
|
highlight
|
|
Execute JavaScript Code
|
True
|
|
|
Code
|
/*Add the class highlight to the row of the triggering element*/
$('#'+this.triggeringElement.id).closest('tr').addClass("highlight");
|
|
Execute JavaScript Code
|
False
|
|
|
Code
|
/*Remove the class on the row of the triggering element*/
$('#'+this.triggeringElement.id).closest('tr').removeClass("highlight");
|
|
Set Value
|
False
|
Item
|
P43_COUNTRY_ID
|
Static
|
|
Select department
Element
#DEPARTMENT table table tr
Event
jQuery Selector
Condition
Value
| Action | Fire when | Affected type | Affected |
|
|
|
Set Value
|
True
|
Item
|
P43_DEPARTMENT_ID
|
Javascript expression
|
$(this.triggeringElement).find('[name="f01"]').val()
|
|
Remove Class
|
True
|
jQuery Selector
|
#DEPARTMENT .highlight
|
Class
|
highlight
|
|
Add Class
|
True
|
Triggering Element
|
|
Class
|
highlight
|
Select employee
Element
[name="f01"]
Event
jQuery Selector
Condition
Value
| Action | Fire when | Affected type | Affected |
|
|
|
Set Value
|
True
|
Item
|
P43_EMPLOYEE_ID
|
Javascript expression
|
this.triggeringElement.value
|
|
Remove Class
|
True
|
jQuery Selector
|
#EMPLOYEE .highlight
|
Class
|
highlight
|
|
Execute JavaScript Code
|
True
|
|
|
Code
|
/*Add the class highlight to the row of the triggering element.*/
$(this.triggeringElement).closest('tr').addClass("highlight");
|