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

{LinkedContentSection:CHILDA}

{LinkedContentSection:CHILDB}

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";
}