Gridview with Sub Grids
Gridview with Sub Grids
(OP)
Hey Everyone!
I'm building a Sales Order page that has three layers to each sales order:
It uses a + and - button to expand each of the sub rows using Javascript:
However, I want them expanded by default. I've tried doing this by removing the style for the subgrids (Style="display: none"). But now it doesn't align nicely underneath the parent row(s).
It has some CSS along with it.
Is there a way to take the above Javascript and apply it to the grid during databind? Or is there some Javascript I could write that would default to expanded?
- Matt
"If I must boast, I will boast of the things that show my weakness"
I'm building a Sales Order page that has three layers to each sales order:
- Customer
- -> Order Detail (1 to many orders)(status, date, tracking number)
- -> -> Items (1 to many items)(Product, color, length, quantity)

It uses a + and - button to expand each of the sub rows using Javascript:
CODE --> Javascript
[/indent]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $("[src*=plus]").live("click", function () { $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>") $(this).attr("src", "/Content/Images/minus.png"); }); $("[src*=minus]").live("click", function () { $(this).attr("src", "/Content/Images/plus.png"); $(this).closest("tr").next().remove(); }); </script>
However, I want them expanded by default. I've tried doing this by removing the style for the subgrids (Style="display: none"). But now it doesn't align nicely underneath the parent row(s).

It has some CSS along with it.
CODE --> CSS
<style type="text/css"> .Grid td { background-color: #dde5ec; color: black; font-size: 10pt; line-height:200% } .Grid th { background-color: #2c3e50; color: White; font-size: 10pt; line-height:200% } .ChildGrid td { background-color: #eee !important; color: black; font-size: 10pt; line-height:200%; } .ChildGrid th { background-color: #6C6C6C !important; color: White; font-size: 10pt; line-height:200% } .Child2Grid td { background-color: #eee !important; color: black; font-size: 10pt; line-height:200%; } .Child2Grid th { background-color: #6C6C6C !important; color: White; font-size: 10pt; line-height:200% } </style>
Is there a way to take the above Javascript and apply it to the grid during databind? Or is there some Javascript I could write that would default to expanded?
- Matt
"If I must boast, I will boast of the things that show my weakness"
RE: Gridview with Sub Grids
http://api.jquery.com/toggle/
RE: Gridview with Sub Grids
- Matt
"If I must boast, I will boast of the things that show my weakness"
RE: Gridview with Sub Grids
RE: Gridview with Sub Grids
- Matt
"If I must boast, I will boast of the things that show my weakness"
RE: Gridview with Sub Grids