Show hide Linked Grid

[KYBiggs]

When using Linked Content/Grids, I tried to hide the child grid and only display when using an Action button.

Initialze grid to Hide the child grid
I was able to hide the Child Grid using javascript on the OnGridRender event:
document.getElementById('GRID1_LCS_NEWCMA').style.visibility = 'hidden';

Display the Child
Then on the Parent grid I added an Action Button on the Parent grid to display the Child grid
The Action Button used inline jacascript:
document.getElementById('GRID1_LCS_NEWCMA').style.visibility = 'visible';

Then on the Child grid I used this action button on the Child grid to hide the Child grid
using inline javascript:
document.getElementById('GRID1_LCS_NEWCMA').style.visibility = 'hidden';

So this works but my questions are
could this not be a standard feature for linked grids?
How can I easily find the name of the child grid?
I used firebug and inspected the HTML to find what I thought was the correct grid component name of the linked child grid.

Is it always GRID1_LCS_"name of child grid"

[KYBiggs]

Re: Show hide Linked Grid

ps I got this idea by reading a post from Jay Talbott.

[njw1314]

Re: Show hide Linked Grid

This really helped me get what I wanted. I have several linked content (child grids), but in all likelihood only one or two will have to be seen for each record in the parent grid. So I wanted to hide the child grids that did not have any data.

I defined a different linked content section for each child grid. I then put all of them in the Right Freeform Edit Region of the parent with a DIV around each.
Like so:

<div id="child1" style="float:left">{LinkedContentSection:child1}</div>
<div id="child2" style="float:left">{LinkedContentSection:child2}</div>
<div id="child3" style="float:left">{LinkedContentSection:child3}</div>
<div id="child4" style="float:left">{LinkedContentSection:child4}</div>

In the onClick event of the Javascript Row Events of the parent grid I have the following:

document.getElementById('child1').style.visibility = 'hidden';
document.getElementById('child2').style.visibility = 'hidden';
document.getElementById('child3').style.visibility = 'hidden';
document.getElementById('child4').style.visibility = 'hidden';

In the onGridRender system event of each child grid I have:

// childNUMBER references the appropriate DIV; 'child1' for the first child grid and so on.
var myVar = document.getElementById('childNUMBER').innerHTML;
var pos = myVar.search('No records');
if (pos >= 0)
{
	document.getElementById('childNUMBER').style.display = 'none';
	document.getElementById('childNUMBER').style.visibility = 'hidden';
}
else
{
	document.getElementById('childNUMBER').style.display = 'inline';
	document.getElementById('childNUMBER').style.visibility = 'visible';
}

The float in the style makes all the child gird containing DIVs (for lack of a better term) wrap next to each other. When display is set to 'none', it allows the DIVs that are still displayed to slide up and go in the space where the other (not displayed) grid would have been. This means that no matter which grid(s) has data, they still show up where you would expect to see them.

Using the DIVs around the child grids leads to one slight problem that I just ignore. When putting the code to display and hide the child grids, Alpha Five says there is a Javascript error since the DIV that I reference doesn't exist in the child grid while I am editing it. But, it is only an error that will come up when editing the child grids in Alpha Five.

I'm sure this could be improved upon some, but it does the trick for me. I spent quite a bit of time to get it to work, and since it is just a "visual detail" I figured I'd post it here to save someone some time if they wanted something similar.

[frankbicknell]

Re: Show hide Linked Grid

Thanks for taking the time to post this code. It shows some additional ways in which tasks in Alpha can get done. It will definitely help me improve my app.