Home - Forums-.NET - FlyTreeView (ASP.NET) - Coloring Rows Based on Tree Level

FlyTreeView (ASP.NET)

Technical support and KB related to the FlyTreeView control

This forum related to following products: FlyTreeView for ASP.NET
Coloring Rows Based on Tree Level
Link Posted: 15-Sep-2009 09:12
frotorious avatar
frotorious
Total Posts:0
Joined:11/21/2024
I'm attempting to use FlyTreeView to represent a tree structure that is not a filesystem, and I am having formatting different elements to meet my needs.  I have some pretty complex questions, but hopefully I can get some help (any help is appreciated).

One thing I wanted to do that may not be possible (but someone may have some ideas for how to make it work) is to color the rows of the tree based on the level of the tree.  Additionally, I want the node itself to be a lighter shade and the area to the left of the node (the tabs) to be a darker shade.  Let me use an image to show what I mean:



Here, the colors of the rows levels alternate (blue for odd levels, green for even).  Where the two colors connect can be done by using an image for the node similar to this example:



I can make this happen easily for a single color (set the DefaultStyle and FlyTreeView to the lighter background color, and add styling to the classes used for the tab/indent tds, like td.nrf6b01-1, td.nrf6b01-2, etc. with the darker background color), but I'm not sure if it is possible to use this functionality with multiple colors, deciding which color to use dependent on the level of the row.  Maybe I can have the style set for Default rows and Selected rows differently, and make the tree think that all nodes on even levels are selected (but it seems only one node can be selected at a time)??  I don't know...  Any help would be greatly appreciated!


A few additional questions:
[list]
  • Is there a way to link together the +/- expand box with other elements, such as the node image, so that they behave the same way (clicking the image causes the node to expand or collapse)?  It seems that if there is no Navigate URL set, clicking on the node will expand it, but will not collapse it.
    • [/*:m]
  • This is a lot like the original question: is there a way to 'outline' each level in the tree with borders?  In other words, can you add a horizontal border line before each node of a different level than the previous node?  In the example picture above, the black horizontal lines would be the border, and they would meet this functionality criteria if you remove the border line between the two "Node on Level 2" lines (because the level did not change).
    • [/*:m]
  • I wanted to add some extra controls to each node (like display some additional controls to the right of each node's text).  The only way I could think of was to generate the HTML for these controls and add that HTML into the "text" field of the node.  Is there a better way?
    • [/*:m][/list:u]

    Sorry for the huge, complicated list.  Thanks for reading, and thanks for a great control! Feel free to take a stab at just one or two questions at a time
    Link Posted: 15-Sep-2009 18:51
    EvgenyT avatar
    EvgenyT
    Total Posts:0
    Joined:11/21/2024
    You can apply different styles to different node level by creating a separate FlyNodeType for each level and assigning it to nodes denending on node.Level .

    As for other tasks, you'll need to study how FlyTreeView renders HTML and its structure, internal CSS classes (with IE dev tools, or Firebug). This doesn't look like something we supposed FlyTreeView users will do, and not a trivial task, but it is possible though.
    Link Posted: 16-Sep-2009 10:10
    frotorious avatar
    frotorious
    Total Posts:0
    Joined:11/21/2024
    Thanks for the quick reply.  The FlyNodeTypes allows me to color the nodes themselves perfectly.  It does not accomplish having the darker background color to the left of each node (as pictured above), but I think I might just ditch that and settle for what I have.

    I also got the borders working in a way I like by playing around with the HTML/CSS.  I figure for the adding controls comment I made, I could just wrap everything I want into a control, and then render that HTML to the Text of the node.

    That takes care of every issue except possibly the easiest: having other elements of the HTML trigger expand/collapse in the same way as the expand/collapse button.  For example, if I wanted the FlyTreeNode's Image to function the same way as the expand/collapse button, how would this look?  In conjunction with that, is there a way to disable the functionality of expanding the node when any part of the node is clicked (this doesn't collapse the node, but will always expand it)?

    Thanks!
    Link Posted: 16-Sep-2009 20:35
    EvgenyT avatar
    EvgenyT
    Total Posts:0
    Joined:11/21/2024
    There's RowCssClass property of FlyTreeNodeStyle. It applies to the entire row.
    Also, you can play with FlyNodeType.EnableFullRowEvents to see if it helps.
    Link Posted: 22-Sep-2009 02:17
    frotorious avatar
    frotorious
    Total Posts:0
    Joined:11/21/2024
    Thanks for the help with styling: I should be able to make the tree look close enough to how I would like.

    My bigger question from the last post, however, is how to trigger the expand/collapse event for other elements of HTML on the page.  In other words, I want to make clicking other elements of the node (for instance, the Image) act in the same exact way as clicking the +/- expand box.  I do not want to use the TreeView properties ContentClickExpands and ContentClickCollapses, because I want to be able to apply this property on a node by node basis (for instance, making a link on the node's text that triggers expand/collapse, but having the rest of the node have no onclick effect).  How would creating such a link or an image with this event look?

    If I am being unclear, feel free to private-message me, as well.  Thanks a lot for your help!
    Link Posted: 22-Sep-2009 02:28
    EvgenyT avatar
    EvgenyT
    Total Posts:0
    Joined:11/21/2024
    See http://www.9rays.net/asp.net_2/treeview/miscpages/doc/ClientObjects.aspx
    you can use javascript like bellow to find a node

    function toggleNode(id)
    {
    var treeview = CFlyTreeView.getInstanceById('');
    var node = treeview.findByID(id);
    node.toggle();
    }


    and node.Text should have something like this:
    node.Text = "toggle me";
    Link Posted: 23-Sep-2009 04:48
    frotorious avatar
    frotorious
    Total Posts:0
    Joined:11/21/2024
    That's exactly what I needed!  Thanks a lot, keep up the good work.
    Share:

    Company  |  Privacy  |  Legal Information

    © 1999-2024 9Rays.Net. All rights reserved.