views:

37

answers:

2

I have a tree view control that I would like to supply the background image for. My code currently looks like this:

      <asp:Image ImageUrl="~/images/mypic.gif" runat="server" Width="150px" />
      <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                ImageSet="Arrows">
                <ParentNodeStyle Font-Bold="False" />
                <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
                <SelectedNodeStyle Font-Underline="True" 
                    HorizontalPadding="0px" VerticalPadding="0px" ForeColor="#5555DD" />
                <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" 
                    HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
      </asp:TreeView>                
A: 

there is a property of the treeview CssCsss that you can give it an image via css

    <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
CssClass="classname" ImageSet="Arrows">
                    <ParentNodeStyle Font-Bold="False" />
                    <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
                    <SelectedNodeStyle Font-Underline="True" 
                        HorizontalPadding="0px" VerticalPadding="0px" ForeColor="#5555DD" />
                    <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" 
                        HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
          </asp:TreeView>

then in css

.classname { background-image: url('image path'); }

PaulStack
A: 

I would think the best way to achieve this would be to use CSS. I do not know off the top of my head what sort of html the TreeView control spits out but if it is a block element you should be able to set the background property to display your image.
An easy way to do this would be to surround your Treeview in a <div> block and set the css styling on this.

<div id="treeNav">
     <asp:TreeView .........
     </asp:TreeView>
</div>

#treeNav
{
     background-image: url(my-image.png);
}
Andy Rose