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!
Oh.. I missed the page load stuff..
Thank you for making clearing...
Roshan
Roshan:
You're right,but the aprticular use case here is to have the rows expanded when the page first loads.
Thanks,Jim
Hello, There is no need to do lot of stuff using java script to expand the rows. You can expand all the rows easily by iterating all the rows fetching from grid object. Following is the code snippets to expand all the rows using java code on command button click:In JSP:<h:commandButton actionListener="#{Bean.onClick}" value="Expand"></h:commandButton>
In Java:public void onClick(ActionEvent event){Iterator AllGridRows = grid.getRows().iterator();RowItem currentRowItem = null;while(AllGridRows.hasNext()){currentRowItem=(RowItem) AllGridRows.next();currentRowItem.setExpanded(true);}}Hope it helps.
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.
Best,Jim
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!