INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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:
  1. Customer
  2. -> Order Detail (1 to many orders)(status, date, tracking number)
  3. -> -> Items (1 to many items)(Product, color, length, quantity)
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:

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

I believe you will need to run some js to expand all the rows after the grid is rendered. Instead of the code you have, I would look into using JQuery's toggle() function:
http://api.jquery.com/toggle/

RE: Gridview with Sub Grids

(OP)
Is there a way to remove the Toggle or +/- options and just default it to expanded?

- Matt

"If I must boast, I will boast of the things that show my weakness"

RE: Gridview with Sub Grids

Yes, you will have to remove the "+/-" from your HTML and run the javascript to expand each row.

RE: Gridview with Sub Grids

(OP)
How? Sorry for my ignorance, i'm not even sure what to Google on this.

- Matt

"If I must boast, I will boast of the things that show my weakness"

RE: Gridview with Sub Grids

you already posted the code you have. You just need to modify the HTML to remove the "+/-" and create a js function to expand the rows. You can use the code you have or use the JQuery toggle() function as I have mentioned already

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close