We are in _desparate_ need of a way to implement an 'expand all' function for grids with masterDetail facets.
We don't have any multi-layer nestings... just a single layer. How can we solve this problem?
Is there a way to do this with a bit of custom Javascript (which I'm not afraid of)? I've tried a few things, but calling some of the same Javascript functions in [seemingly] the exact same way as the stock implementation doesn't work as I would expect.
The particular scenario where this is most needed won't typically see more than 4 or 5 rows in the parent grid, so we'd only need to expand that many rows. I can see where if there were several dozen (or hundred) rows, there'd be a significant performance hit from all the AJAX calls/traffic.
Is there a way to set the rows expanded in the Java on a GridView object, maybe? Anything...?
PLEASE HELP!
Hi:
THe best thing to do is submit a developer support request. The DS people wil help you more quickly and efficiently than anything else.
You can contact them through this page: http://es.infragistics.com/support/default.aspx#Overview
However, it sound slike you're on the right track. Since the row expand/collapse is handled via Jaascript/AJAX writing a few lines of custom code should definitely get you what you want.
What happens with the code you've tried? Have you examined it with firebug for example?
The other approach is to bind the grid to a server-side grid object and then manipulate the row states from there. this is definitely more work.
Best,Jim
Thanks, Jim. I have tried to copy the Javascript from the nested grid image's onclick event handler, and just use it stand-alone to expand the row. Here:
<img ... onclick="return ig.grid.toggleRow(THE_ROW_TO_EXPAND) />
where THE_ROW_TO_EXPAND is the id (or ClientId in JSF parlance) of the row that should expand.
So, as a POC, I tried it at the end of the page, like this:
<script type="text/javascript">alert(ig.grid.toggleRow(THE_ROW_TO_EXPAND))</script>
I discovered this code by using Firebug (which I use religiously-- couldn't live without it), and I've even put debugger points in the igf_core, igf_ui, and igf_grid JS files. I can get execution into the toggleRow() function, and can follow it through with Firebug, but there's something critical missing, and I can't figure out that something is. The execution goes through all the same things that fire when I follow after using the 'real' expansion in the actual row, but when I fire toggleRow() stand-alone, nothing happens to the row that I want expanded, even though the call is [seemingly] 100% the same.
Admittedly, my JS skillz aren't superb, so I can see a potential "DUH!?" moment coming....
Thanks for the link, though... I think we'll try that, unless you have any other tips to throw out...
Okay - I just want to verify that you are testing this with a server running behind it. The code you're invoking will do a server call back to get the new data - if the server's not there the call will fail.
If you contact Developer Support they will set up a test case and walk through it. This is probably the quickest way forward. You can contact them from this page:
http://es.infragistics.com/support/default.aspx#Overview
Thanks,Jim
Oh, yeah... absolutely. Running WebSphere locally on my development machine with IBM RAD.
I can have those same pieces (in the previous post) of Javascript on the same page, and the IG generated piece will work within the grid, and the Matt-hacked piece elsewhere on the page will do nothing (visually).... It *does* traverse all the appropriate IGF Javascript files, but in the end, the row doesn't expand.
Thanks.
Okay here's a report on a quick test I did.
I created the following JS function:
<script>function expandRows() { ig.grid.toggleRow('myForm:myGrid:_ig0'); ig.grid.toggleRow('myForm:myGrid:_ig4'); ig.grid.toggleRow('myForm:myGrid:_ig8'); }</script>
And I invoked it from a command button:
<h:commandButton value="expand" type="button"
onclick="expandRows();"></h:commandButton>
This worked fine - the only trick was finding the right numbers to use at the end (0, 4, 8). The grid assigns these automatically to all sorts of objects inside the grid, so you have to find the rights ones. The first one will always be _ig0 - after that it depends on the structure of your grid. I admit with some embarrassment, that I used trial and error to find the first one (4).
So make sure yo've got the ids right.
The only other issue I can think of is that your code is executing BEFORE the page is fully loaded. I would use a JS setTimeout call to get around this.
Hope this helps!Jim
Hey! Glad this was helpful. Your intuition about performance is right: for a grid with many rows this would not be a good solution. The user would see grid collasped and then see the rows expand one-by-one. it'd be quick but it might also be a little disconcerting.
For those situations, it'd be better to set the expanded state on the serer side. this is more work. I have a half-finished example of creating a grid dynamically that I will post to componentsforjsf.com when its done. This example addresses several questions that have come up on the forums (and elsewhere) in addition to yours. Watch for it in the Tutorials section. Hopefuly I'll have it posted early next month.
Thanks, Jim! I feel foolish for not recognizing the "page fully loaded" aspect of this... the particular implementation I was desiring called for making this happen when the page loaded, so I didn't consider proving it could work with a button or other element first.
Here's what I did for a clickable element to test the concept:
<script type="text/javascript"> function expandAll() { var eRows = document.getElementsByTagName('tr');
for (var i=0;i<eRows.length;i++) { if(/myNestedGrid:_ig\d+$/.test(eRows[i].id)){ ig.grid.toggleRow(eRows[i].id); } } return false; } </script> <f:verbatim><a href=#" onclick="return expandAll()">Expand All</a></f:verbatim>
Seems to work OK, so far. I don't know what kind of performance it would have on a very long page with lots of rows (grid view or otherwise, since I'm grabbing all the <tr> elements on the page). There's probably a more refined way of doing this, and perhaps a way to get the row ID in a better way. I'll keep playing with it, though.
Thanks for your insight!