TreeView: How to make a node top align?

Discussion in 'ASP .Net' started by Max2006, Jul 14, 2008.

  1. Max2006

    Max2006 Guest

    Hi,

    I have a TreeView and this is my node style:

    <asp:TreeNodeStyle ForeColor = "#000000" Font-Size="9px" Font-Bold="false"
    Width="100px" NodeSpacing="3px" />

    The problem is the expand button (+) resides right at the middle of
    multi-line text. Can I make the expand button top align instead of middle
    align?

    Any help would be appreciated,
    Max
    Max2006, Jul 14, 2008
    #1
    1. Advertising

  2. Hi Max,

    From your description, you're wantting to set the TreeView Node's
    expand/collapse button(+/-) to aligh to top when the TreeNode contains text
    expanded to multiple lines, correct?

    I've performed some research on this. It seems the TreeView or TreeNode's
    built-in style settings doesn't expose the properties for us to adjust the
    vertical alignment of elements in TreeNode. Also, there hasn't any
    server-side event for us to hook the node generation.

    So far I have found a solution use some javascript code to adjust the
    vertical alignment of the table cell (<td> element) that contains the
    treeNode content(such as the +/- button and content). You can run it at
    the page's load time. Here is a sample page I've built for your reference:


    ==============================================
    <head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function adjust_treenodes()
    {
    var divs = document.getElementsByTagName("div");

    var i,j;

    for(i=0;i<divs.length;++i)
    {
    //first search for all the <div> for treeview nodes

    if(divs.id.indexOf("TreeView") != -1)
    {

    //then set the vertical alignment for each <td> nested inside the
    treenode div

    var tds = divs.getElementsByTagName("td");
    for(j=0;j<tds.length;++j) tds[j].style.verticalAlign="top";

    }
    }
    }

    </script>
    </head>
    <body onload="adjust_treenodes();">
    <form id="form1" runat="server">
    <div>

    <asp:TreeView ID="TreeView1" runat="server"
    style="vertical-align:bottom" >
    <NodeStyle Width="100px" />

    <Nodes >
    <asp:TreeNode Text="New Node1--long test multi-line test
    ..........................................." Value="New Node1">
    <asp:TreeNode Text="New Node11--long test multi-line
    test ..........................................." Value="New
    Node11"></asp:TreeNode>
    </asp:TreeNode>
    <asp:TreeNode Text="New Node2--long test multi-line test
    ..........................................." Value="New Node2">
    <asp:TreeNode Text="New Node21--long test multi-line
    test ..........................................." Value="New
    Node21"></asp:TreeNode>
    </asp:TreeNode>
    <asp:TreeNode Text="New Node3" Value="New Node3">
    <asp:TreeNode Text="New Node31" Value="New
    Node31"></asp:TreeNode>
    </asp:TreeNode>

    </Nodes>
    <LevelStyles >

    </LevelStyles>
    </asp:TreeView>

    </div>
    </form>
    </body>
    =======================================

    Hope this helps.

    Sincerely,

    Steven Cheng

    Microsoft MSDN Online Support Lead


    Delighting our customers is our #1 priority. We welcome your comments and
    suggestions about how we can improve the support we provide to you. Please
    feel free to let my manager know what you think of the level of service
    provided. You can send feedback directly to my manager at:
    .

    ==================================================
    Get notification to my posts through email? Please refer to
    http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
    ications.

    Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
    where an initial response from the community or a Microsoft Support
    Engineer within 1 business day is acceptable. Please note that each follow
    up response may take approximately 2 business days as the support
    professional working with you may need further investigation to reach the
    most efficient resolution. The offering is not appropriate for situations
    that require urgent, real-time or phone-based interactions or complex
    project analysis and dump analysis issues. Issues of this nature are best
    handled working with a dedicated Microsoft Support Engineer by contacting
    Microsoft Customer Support Services (CSS) at
    http://msdn.microsoft.com/subscriptions/support/default.aspx.
    ==================================================
    This posting is provided "AS IS" with no warranties, and confers no rights.

    --------------------
    >From: "Max2006" <>
    >Subject: TreeView: How to make a node top align?
    >Date: Mon, 14 Jul 2008 18:48:16 -0400


    >Hi,
    >
    >I have a TreeView and this is my node style:
    >
    > <asp:TreeNodeStyle ForeColor = "#000000" Font-Size="9px"

    Font-Bold="false"
    >Width="100px" NodeSpacing="3px" />
    >
    >The problem is the expand button (+) resides right at the middle of
    >multi-line text. Can I make the expand button top align instead of middle
    >align?
    >
    >Any help would be appreciated,
    >Max
    >
    >
    >
    Steven Cheng [MSFT], Jul 15, 2008
    #2
    1. Advertising

  3. Max2006

    Max2006 Guest

    Hi Steven,

    Thanks for help.

    I was hoping to have some light CSS settings to do this. Is it possible?

    Thanks again,
    Max



    "Steven Cheng [MSFT]" <> wrote in message
    news:...
    > Hi Max,
    >
    > From your description, you're wantting to set the TreeView Node's
    > expand/collapse button(+/-) to aligh to top when the TreeNode contains
    > text
    > expanded to multiple lines, correct?
    >
    > I've performed some research on this. It seems the TreeView or TreeNode's
    > built-in style settings doesn't expose the properties for us to adjust the
    > vertical alignment of elements in TreeNode. Also, there hasn't any
    > server-side event for us to hook the node generation.
    >
    > So far I have found a solution use some javascript code to adjust the
    > vertical alignment of the table cell (<td> element) that contains the
    > treeNode content(such as the +/- button and content). You can run it at
    > the page's load time. Here is a sample page I've built for your reference:
    >
    >
    > ==============================================
    > <head runat="server">
    > <title>Untitled Page</title>
    > <script type="text/javascript">
    > function adjust_treenodes()
    > {
    > var divs = document.getElementsByTagName("div");
    >
    > var i,j;
    >
    > for(i=0;i<divs.length;++i)
    > {
    > //first search for all the <div> for treeview nodes
    >
    > if(divs.id.indexOf("TreeView") != -1)
    > {
    >
    > //then set the vertical alignment for each <td> nested inside the
    > treenode div
    >
    > var tds = divs.getElementsByTagName("td");
    > for(j=0;j<tds.length;++j) tds[j].style.verticalAlign="top";
    >
    > }
    > }
    > }
    >
    > </script>
    > </head>
    > <body onload="adjust_treenodes();">
    > <form id="form1" runat="server">
    > <div>
    >
    > <asp:TreeView ID="TreeView1" runat="server"
    > style="vertical-align:bottom" >
    > <NodeStyle Width="100px" />
    >
    > <Nodes >
    > <asp:TreeNode Text="New Node1--long test multi-line test
    > .........................................." Value="New Node1">
    > <asp:TreeNode Text="New Node11--long test multi-line
    > test ..........................................." Value="New
    > Node11"></asp:TreeNode>
    > </asp:TreeNode>
    > <asp:TreeNode Text="New Node2--long test multi-line test
    > .........................................." Value="New Node2">
    > <asp:TreeNode Text="New Node21--long test multi-line
    > test ..........................................." Value="New
    > Node21"></asp:TreeNode>
    > </asp:TreeNode>
    > <asp:TreeNode Text="New Node3" Value="New Node3">
    > <asp:TreeNode Text="New Node31" Value="New
    > Node31"></asp:TreeNode>
    > </asp:TreeNode>
    >
    > </Nodes>
    > <LevelStyles >
    >
    > </LevelStyles>
    > </asp:TreeView>
    >
    > </div>
    > </form>
    > </body>
    > =======================================
    >
    > Hope this helps.
    >
    > Sincerely,
    >
    > Steven Cheng
    >
    > Microsoft MSDN Online Support Lead
    >
    >
    > Delighting our customers is our #1 priority. We welcome your comments and
    > suggestions about how we can improve the support we provide to you. Please
    > feel free to let my manager know what you think of the level of service
    > provided. You can send feedback directly to my manager at:
    > .
    >
    > ==================================================
    > Get notification to my posts through email? Please refer to
    > http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
    > ications.
    >
    > Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
    > where an initial response from the community or a Microsoft Support
    > Engineer within 1 business day is acceptable. Please note that each follow
    > up response may take approximately 2 business days as the support
    > professional working with you may need further investigation to reach the
    > most efficient resolution. The offering is not appropriate for situations
    > that require urgent, real-time or phone-based interactions or complex
    > project analysis and dump analysis issues. Issues of this nature are best
    > handled working with a dedicated Microsoft Support Engineer by contacting
    > Microsoft Customer Support Services (CSS) at
    > http://msdn.microsoft.com/subscriptions/support/default.aspx.
    > ==================================================
    > This posting is provided "AS IS" with no warranties, and confers no
    > rights.
    >
    > --------------------
    >>From: "Max2006" <>
    >>Subject: TreeView: How to make a node top align?
    >>Date: Mon, 14 Jul 2008 18:48:16 -0400

    >
    >>Hi,
    >>
    >>I have a TreeView and this is my node style:
    >>
    >> <asp:TreeNodeStyle ForeColor = "#000000" Font-Size="9px"

    > Font-Bold="false"
    >>Width="100px" NodeSpacing="3px" />
    >>
    >>The problem is the expand button (+) resides right at the middle of
    >>multi-line text. Can I make the expand button top align instead of middle
    >>align?
    >>
    >>Any help would be appreciated,
    >>Max
    >>
    >>
    >>

    >
    Max2006, Jul 15, 2008
    #3
  4. Thanks for your reply Max,

    Yes, I've also tried the CSS approach. However, it seems the cssClass we
    applied on <NodeStyle> will only be specified on the <td> which contains
    the Text content of the TreeNode, but not the <td> which contains the +/-
    expand/collapse image. that's why the css style approach not quite work
    here. BTW, have you tried using the Css control adapter for TreeView:

    #ASP.NET 2.0 CSS Friendly Control Adapters: The Walkthrough
    http://www.asp.net/cssadapters/WalkThru/Walkthrough.aspx

    this adapter toolkit can make those adpatable controls more CSS friendly
    which may open more doors on customization.

    Sincerely,

    Steven Cheng

    Microsoft MSDN Online Support Lead


    Delighting our customers is our #1 priority. We welcome your comments and
    suggestions about how we can improve the support we provide to you. Please
    feel free to let my manager know what you think of the level of service
    provided. You can send feedback directly to my manager at:
    .

    ==================================================
    This posting is provided "AS IS" with no warranties, and confers no rights.

    --------------------
    >From: "Max2006" <>
    >References: <>

    <>
    >Subject: Re: TreeView: How to make a node top align?
    >Date: Tue, 15 Jul 2008 10:21:51 -0400
    >Lines: 3
    >
    >
    >Hi Steven,
    >
    >Thanks for help.
    >
    >I was hoping to have some light CSS settings to do this. Is it possible?
    >
    >Thanks again,
    >Max
    >
    >>> </
    Steven Cheng [MSFT], Jul 16, 2008
    #4
  5. Hi Max,

    How are you doing? Have you got any further ideas on this issue or have you
    tried the CSS adapter to see whether it helps?

    Sincerely,

    Steven Cheng
    Microsoft MSDN Online Support Lead


    Delighting our customers is our #1 priority. We welcome your comments and
    suggestions about how we can improve the support we provide to you. Please
    feel free to let my manager know what you think of the level of service
    provided. You can send feedback directly to my manager at:
    .

    ==================================================
    Get notification to my posts through email? Please refer to
    http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
    ications.
    ==================================================
    This posting is provided "AS IS" with no warranties, and confers no rights.

    --------------------

    >Content-Transfer-Encoding: 7bit
    >From: (Steven Cheng [MSFT])
    >Organization: Microsoft
    >Date: Wed, 16 Jul 2008 02:45:10 GMT
    >Subject: Re: TreeView: How to make a node top align?


    >
    >Thanks for your reply Max,
    >
    >Yes, I've also tried the CSS approach. However, it seems the cssClass we
    >applied on <NodeStyle> will only be specified on the <td> which contains
    >the Text content of the TreeNode, but not the <td> which contains the +/-
    >expand/collapse image. that's why the css style approach not quite work
    >here. BTW, have you tried using the Css control adapter for TreeView:
    >
    >#ASP.NET 2.0 CSS Friendly Control Adapters: The Walkthrough
    >http://www.asp.net/cssadapters/WalkThru/Walkthrough.aspx
    >
    >this adapter toolkit can make those adpatable controls more CSS friendly
    >which may open more doors on customization.
    >
    >Sincerely,
    >
    >Steven Cheng
    >
    >Microsoft MSDN Online Support Lead
    >
    >
    >Delighting our customers is our #1 priority. We welcome your comments and
    >suggestions about how we can improve the support we provide to you. Please
    >feel free to let my manager know what you think of the level of service
    >provided. You can send feedback directly to my manager at:
    >.
    >
    >==================================================
    >This posting is provided "AS IS" with no warranties, and confers no rights.
    >
    >--------------------
    >>From: "Max2006" <>
    >>References: <>

    ><>
    >>Subject: Re: TreeView: How to make a node top align?
    >>Date: Tue, 15 Jul 2008 10:21:51 -0400
    >>Lines: 3
    >>
    >>
    >>Hi Steven,
    >>
    >>Thanks for help.
    >>
    >>I was hoping to have some light CSS settings to do this. Is it possible?
    >>
    >>Thanks again,
    >>Max
    >>
    >>>> </

    >
    >
    Steven Cheng [MSFT], Jul 18, 2008
    #5
  6. Max2006

    Max2006 Guest

    Hi Steven,

    Thank you for follow up. At this point I am going to leave the alignment as
    is to avoid complexity.
    I home we have more flexibility in future versions of TreeView.

    Thank you,
    Max


    "Steven Cheng [MSFT]" <> wrote in message
    news:...
    > Hi Max,
    >
    > How are you doing? Have you got any further ideas on this issue or have
    > you
    > tried the CSS adapter to see whether it helps?
    >
    > Sincerely,
    >
    > Steven Cheng
    > Microsoft MSDN Online Support Lead
    >
    >
    > Delighting our customers is our #1 priority. We welcome your comments and
    > suggestions about how we can improve the support we provide to you. Please
    > feel free to let my manager know what you think of the level of service
    > provided. You can send feedback directly to my manager at:
    > .
    >
    > ==================================================
    > Get notification to my posts through email? Please refer to
    > http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
    > ications.
    > ==================================================
    > This posting is provided "AS IS" with no warranties, and confers no
    > rights.
    >
    > --------------------
    >
    >>Content-Transfer-Encoding: 7bit
    >>From: (Steven Cheng [MSFT])
    >>Organization: Microsoft
    >>Date: Wed, 16 Jul 2008 02:45:10 GMT
    >>Subject: Re: TreeView: How to make a node top align?

    >
    >>
    >>Thanks for your reply Max,
    >>
    >>Yes, I've also tried the CSS approach. However, it seems the cssClass we
    >>applied on <NodeStyle> will only be specified on the <td> which contains
    >>the Text content of the TreeNode, but not the <td> which contains the +/-
    >>expand/collapse image. that's why the css style approach not quite work
    >>here. BTW, have you tried using the Css control adapter for TreeView:
    >>
    >>#ASP.NET 2.0 CSS Friendly Control Adapters: The Walkthrough
    >>http://www.asp.net/cssadapters/WalkThru/Walkthrough.aspx
    >>
    >>this adapter toolkit can make those adpatable controls more CSS friendly
    >>which may open more doors on customization.
    >>
    >>Sincerely,
    >>
    >>Steven Cheng
    >>
    >>Microsoft MSDN Online Support Lead
    >>
    >>
    >>Delighting our customers is our #1 priority. We welcome your comments and
    >>suggestions about how we can improve the support we provide to you. Please
    >>feel free to let my manager know what you think of the level of service
    >>provided. You can send feedback directly to my manager at:
    >>.
    >>
    >>==================================================
    >>This posting is provided "AS IS" with no warranties, and confers no
    >>rights.
    >>
    >>--------------------
    >>>From: "Max2006" <>
    >>>References: <>

    >><>
    >>>Subject: Re: TreeView: How to make a node top align?
    >>>Date: Tue, 15 Jul 2008 10:21:51 -0400
    >>>Lines: 3
    >>>
    >>>
    >>>Hi Steven,
    >>>
    >>>Thanks for help.
    >>>
    >>>I was hoping to have some light CSS settings to do this. Is it possible?
    >>>
    >>>Thanks again,
    >>>Max
    >>>
    >>>>> </

    >>
    >>

    >
    Max2006, Jul 18, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. wolf
    Replies:
    0
    Views:
    550
  2. Replies:
    0
    Views:
    1,443
  3. Tjerk Wolterink
    Replies:
    2
    Views:
    1,419
    Dimitre Novatchev
    Aug 24, 2006
  4. jiing
    Replies:
    0
    Views:
    2,319
    jiing
    Apr 27, 2007
  5. Homer J. Simpson

    TreeView node style - for an individual node

    Homer J. Simpson, Jul 23, 2007, in forum: ASP .Net
    Replies:
    5
    Views:
    8,886
    Homer J. Simpson
    Jul 24, 2007
Loading...

Share This Page