Hey Everyone!
I'm building a Sales Order page that has three layers to each sales order:
[ol 1]
[li]Customer[/li]
[li]-> Order Detail (1 to many orders)(status, date, tracking number)[/li]
[li]-> -> Items (1 to many items)(Product, color, length, quantity)[/li]
[/ol]
I found a simple example to follow that shows how to do it with Gridviews and TemplateFields w/ Gridviews: Link
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:
[ol 1]
[li]Customer[/li]
[li]-> Order Detail (1 to many orders)(status, date, tracking number)[/li]
[li]-> -> Items (1 to many items)(Product, color, length, quantity)[/li]
[/ol]
I found a simple example to follow that shows how to do it with Gridviews and TemplateFields w/ Gridviews: Link
It uses a + and - button to expand each of the sub rows using Javascript:
JavaScript:
[/indent]<script type="text/javascript" src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>[/URL]
<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.
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