Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS with TreeView help 1

Status
Not open for further replies.
jbenson001

jbenson001

Programmer
Jan 7, 2004
8,172
US
Hey everyone, :)

I am by no means a CSS expert, in fact, I just recently started using it. I need some help to see if this can even be done.
I have a treeview control which is only one level deep off of the master node. So basically it is a treeview of cities, when you click the "+" next to the cities, it displays the list of courses under it. The Course listing is a concatenation of 4 columns. What I would like to do is show this info in a tabular format, something like a gridview, where each alternating row(node) would be a different color, as well as aligning the text.
I haven't been able to find anything in my searchs like this and was wondering if anyone has done this or knows of an article that shows this or some CSS to accomplish what I would like.

Thanks in advance...

Jim
 
Sort by date Sort by votes
It's a bit tricky to do this with a TreeView as you can't add controls to a TreeNode. However, you could add a HTML element around each item (i.e. the 4 concatenated columns you mention) and style those accordingly.

For example,
Code: 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default6.aspx.vb" Inherits="Default6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .colA {float:left;width:100px;}
    .colB {float:left;width:100px;}
    .even{color:Red}
    .odd{color:Blue}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeView1" runat="server">
        </asp:TreeView>
    </div>
    </form>
</body>
</html>

Code: 
Partial Class Default6
    Inherits System.Web.UI.Page
    Dim tn As TreeNode

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        For i As Integer = 0 To 5
            tn = New TreeNode
            If i Mod 2 = 0 Then
                tn.Text = "<div class=""even""><div class=""colA"">Record " & i & "</div><div class=""colB"">Some other text</div></div>"
            Else
                tn.Text = "<div class=""odd""><div class=""colA"">Record " & i & "</div><div class=""colB"">Some other text</div></div>"
            End If
            TreeView1.Nodes.Add(tn)
        Next

    End Sub

End Class


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
Thanks ca8msm!!!!

I just have to tweek this a bit to get exactly what the client wants, but it definatly puts me on the right track.

Thanks so much...!!!


Jim
 
Upvote 0 Downvote
OK ca8msm another related question to this one
I have gotten it to look pretty much how they want, which is a tabular look like a grid. What I need to do now is somehow add a header row. I have tried a couple of things but it screws up the hirarchy of the tree view. Was wondering it you had any ideas on how i might be able to do it. If not, I can always go back to using nested repeaters but i like the treeview, too bad it's not a little more flexible.

Thanks again...

Jim
 
Upvote 0 Downvote
Using the previous example, you could just add another node before the loop e.g.
Code: 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        [b]' Add the header row
        tn = New TreeNode
        tn.Text = "<div class=""header""><div class=""colA"">Header 1</div><div class=""colB"">Header 2</div></div>"
        tn.SelectAction = TreeNodeSelectAction.None
        TreeView1.Nodes.Add(tn)[/b]

        For i As Integer = 0 To 5
            tn = New TreeNode
            If i Mod 2 = 0 Then
                tn.Text = "<div class=""even""><div class=""colA"">Record " & i & "</div><div class=""colB"">Some other text</div></div>"
            Else
                tn.Text = "<div class=""odd""><div class=""colA"">Record " & i & "</div><div class=""colB"">Some other text</div></div>"
            End If
            TreeView1.Nodes.Add(tn)
        Next

    End Sub
and then just add a new header style e.g.
Code: 
    .header{color:Black;font-weight:bold}


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
Yeah.. that is what I thought initially, however it screws up the hierarchy of the treeview since I have 2 loops happening:
Code: 
        Dim childNode As New TreeNode


        Dim re = New Regex("<[^>]*>")
        Dim i As Integer

        Dim ds As DataSet = GetTreeViewData()
        For Each masterRow As DataRow In ds.Tables(0).Rows
            Dim masterNode As New _
              TreeNode(masterRow("Location").ToString())
            tvCourses.Nodes.Add(masterNode)

            For Each childRow As DataRow In _
              masterRow.GetChildRows("Children")

                If i = 0 Then
                    ''test
                    ''add header to masternode before all child nodes are added
                    Dim childHeaderNode As New TreeNode
                    childHeaderNode.Text = "<table><tr><td class=""childNodeHeader"">aaaaaa</td>"
                    masterNode.ChildNodes.Add(childHeaderNode)
                End If

                'Remove the HTML from this column using the regex funtion.
                Dim sDayTime As String = re.replace(childRow("DayTime").ToString(), "")


                i += 1
                If i Mod 2 = 0 Then
                    childNode = New TreeNode
                    childNode.Text = "<td class=""even""><div class=""colA"">" + childRow("Dates").ToString() + "</div>" + _
                                      "<div class=""colA"">" + sDayTime + "</div>" + _
                                      "<div class=""colB"">" + childRow("Tuition").ToString() + "</div>" + _
                                      "<div class=""colB"">" + childRow("ContactInformation").ToString() + "</div>" + _
                                      "</td>"
                Else
                    childNode = New TreeNode
                    childNode.Text = "<td class=""odd""><div class=""colA"">" + childRow("Dates").ToString() + "</div>" + _
                                      "<div class=""colA"">" + sDayTime + "</div>" + _
                                      "<div class=""colB"">" + childRow("Tuition").ToString() + "</div>" + _
                                      "<div class=""colB"">" + childRow("ContactInformation").ToString() + "</div>" + _
                                      "</td>"
                End If


                childNode.SelectAction = TreeNodeSelectAction.None

                masterNode.ChildNodes.Add(childNode)
            Next
        Next
 
Upvote 0 Downvote
ca8msm...
figured it out.. I was missing some closing tags:
Code: 
childHeaderNode.Text = "<table><tr><td class=""childNodeHeader"">aaaaaa</td>[b]</tr></table>[/b]"

Thanks again..

Jim
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

G12Consult
  • Locked
  • Question
Help with Json
Replies
2
Views
994
gmmastros
gmmastros
weberm
  • Locked
  • Question
How do I make a page with multiple AJAX custom controls?
Replies
2
Views
926
weberm
weberm
baran121
  • Locked
  • Question
Sending data with bluetooth on webproject
Replies
1
Views
361
jbenson001
jbenson001
dvannoy
  • Locked
  • Question
Using two css files within a master page 1
Replies
4
Views
773
jbenson001
jbenson001
koklimabc
  • Locked
  • Question
Change FirstChildNode left position as same to its parent (TreeView)
Replies
1
Views
351
jbenson001
jbenson001

Part and Inventory Search

Sponsor

Back
Top