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"
Talk To Other Members
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