Sunday, September 18, 2011

Toggle Child Grid based on value in Parent Grid

Linked Content Area Switch Model




Given
Parent table w/Grid
ChildA table w/Grid
ChildB table w/Grid
Parent has Linked Content Area with EACH Child Grid as a separate Linked Content Section

Freeform area, Linked Content placement



onRowSelect System Event
var rowNum = {Grid.Object}._selectedRow;
var cat = {grid.Object}.getValue('G','CATEGORY',rowNum);

'
'note:if your parent component is a Detail Section, the above line would be:
'var cat = {grid.Object}.getValue('D','CATEGORY');

'
switch (cat) {

case 'A':
                document.getElementById('childa').style.display = "block";
                document.getElementById('childb').style.display = "none";
                break;

case 'B':
                document.getElementById('childa').style.display = "none";
                document.getElementById('childb').style.display = "block";
                break;

default:
                document.getElementById('childa').style.display = "none";
                document.getElementById('childb').style.display = "none";
                break;
}

Notes
In my example I have only one Grid in each LinkedContent Area, but you could have any number of Grids defined per Area.

You can also use this syntax:
var rowNum = {Grid.Object}._selectedRow;

var cat = {grid.Object}.getValue('G','CATEGORY',rowNum);
if (cat=='A')
{
document.getElementById('childa').style.display = "block";
document.getElementById('childb').style.display = "none";
}
else if (cat=='B')
{
document.getElementById('childa').style.display = "none";
document.getElementById('childb').style.display = "block";
}
else
{
document.getElementById('childa').style.display = "none";
document.getElementById('childb').style.display = "none";
}



No comments: