Question TreeNode question?

[raysefo]

Hi,

I m new to VB.NET. I m using VS.NET 2010 with SQL Server. Here is the deal. On my master page a have a menu;

<asp:TreeNode Text="Requests" Value="Request"></asp:TreeNode>

What i want to do is,

when user enters this page, query DB ( select ) and if there are requests (lets say 3)
then after this TreeNode i want to put this query result 3. And i want this TreeNode shiny or something like this.

How can i do it?
Thanks in advance.

Best Regards.

 

[raysefo]

TreeView

Hi,

I have a treeview like below;

<asp:TreeView ID="TreeView1" runat="server" CssClass="Menu" EnableTheming="True">
                    <HoverNodeStyle CssClass="HoverNode_content" />
                    <Nodes>
                       
                        <asp:TreeNode Text="Requests" Value="New Node"></asp:TreeNode>
                        <asp:TreeNode Text="Approved" Value="New Node"></asp:TreeNode>
                        <asp:TreeNode Text="Not Approved" Value="New Node"></asp:TreeNode>
                    </Nodes>
                    <NodeStyle CssClass="DefaultNode_content" />
                    <SelectedNodeStyle CssClass="SelectedNode_content" />
                </asp:TreeView>

in the code part, i m getting a value from db which indicates the number of not approced requests. What i want to is to put this number beside treeNode not approved.

How can i manage this?

thanks in advance.

Best Regards

 

[kulrom]

Try this:

TreeView1.Nodes(2).Text = "DBValue" & " Not Approved"

Of course you should replace the string DbValue with a real DbValue

 

[kulrom]

Very bad explanation. Would you mind if i ask you to explain it better? I am here to help but please don't make me guess.

 

[raysefo]

well,

On Page_Load there is a SQL connection which queries DB and gets a number.(I have no difficulty to query db.) Lets say it 3. Is this clear so far? The point is, how should i put this number, which is 3 in this example, on the aspx page that contians the treeview.Lets say there is a node on the treeview named "Pending For Approval" and i would like to put this number 3 (queried from db) beside the node like below;

eg.
Pending Approvals (3)

I hope this is more clear.

 

[kulrom]

I would put the query into Integer function e.g.

Private Function DbValue() As Integer
   Dim returnvalue as integer = 0
   Dim connection as New SqlConnetion("connectionstring")
   Dim command as SqlCommand = connection.CreateCommand
   ' etc. etc.
   
   return returnvalue
End Function

Now just say as i previously explained:

TreeView1.Nodes(index).Text = TreeView1.Nodes(index).Text & " " & DbValue.ToString()

 

[raysefo]

thanks so much, it worked.

Another question is, how to change the color of this node???

 

[kulrom]

Just select the node that you want to modify:

TreeView1.Nodes(index).Text = TreeView1.Nodes(index).Text & " (" & DbValue.ToString() & ")"
TreeView1.Nodes(index).Selected = True
TreeView1.SelectedNodeStyle.ForeColor = Drawing.Color.Red

 

[raysefo]

thanks kulrom, you are great.

 

[raysefo]

I have a problem,

if i want to change color of more than one node like below; it only colors the last one. How can i do it for all of them?

If GetPendingApprovals(manager) > 0 Then
TreeView1.Nodes(3).Text = "Pending Approvals (" & GetPendingApprovals(manager) & ")"
TreeView1.Nodes(3).Selected = True
TreeView1.SelectedNodeStyle.ForeColor = Drawing.Color.Red
TreeView1.SelectedNodeStyle.Font.Bold = True

End If
If GetApproved(manager) > 0 Then
TreeView1.Nodes(2).Text = "Approved(" & GetApproved(manager) & ")"
TreeView1.Nodes(2).Selected = True
TreeView1.SelectedNodeStyle.ForeColor = Drawing.Color.Blue
TreeView1.SelectedNodeStyle.Font.Bold = True
End If

 

[JohnH]

Based on this article: DotNetSlackers: Customizing TreeNodes with RenderPreText and RenderPostText
Creating individual TreeNode CSS styles, VB.Net translation, you can put this in a class file in App_Code folder:

Namespace CustomTree

    Public Class StylableTreeNode
        Inherits TreeNode

        Protected Overrides Sub RenderPreText(ByVal writer As System.Web.UI.HtmlTextWriter)
            writer.AddAttribute(HtmlTextWriterAttribute.Class, CssClass)
            writer.RenderBeginTag(HtmlTextWriterTag.Div)
            MyBase.RenderPreText(writer)
        End Sub

        Protected Overrides Sub RenderPostText(ByVal writer As System.Web.UI.HtmlTextWriter)
            writer.RenderEndTag()
            MyBase.RenderPostText(writer)
        End Sub

        Public Property CssClass As String
    End Class


    Public Class StylableNodesTreeView
        Inherits TreeView
        Protected Overrides Function CreateNode() As System.Web.UI.WebControls.TreeNode
            Return New StylableTreeNode()
        End Function
    End Class

End Namespace

Build and the StylableNodesTreeView control should appear in Toolbox under project Components tab. Add one control to page. Page source may look like this afterwards:

<cc1:StylableNodesTreeView ID="StylableNodesTreeView1" runat="server">
</cc1:StylableNodesTreeView>

It also added a @Register directive to the page:

<%@ Register assembly="WebApplication1" namespace="WebApplication1.CustomTree" tagprefix="cc1" %>

Now you can customize it, perhaps it becomes this:

<cc1:StylableNodesTreeView ID="StylableTreeView1" runat="server" CssClass="Menu" EnableTheming="True">
            <HoverNodeStyle CssClass="HoverNode_content" />
            <Nodes>                       
                <cc1:StylableTreeNode Text="Requests" Value="New Node"></cc1:StylableTreeNode>
                <cc1:StylableTreeNode Text="Approved" Value="New Node" CssClass="node2"></cc1:StylableTreeNode>
                <cc1:StylableTreeNode Text="Not Approved" Value="New Node" CssClass="node3"></cc1:StylableTreeNode>                                               
            </Nodes>
            <NodeStyle CssClass="DefaultNode_content" />
            <SelectedNodeStyle CssClass="SelectedNode_content" />
</cc1:StylableNodesTreeView>

Note that if you use the TreeView Node Editor in Designer it will add default TreeNode items and not StylableTreeNode items, but you can change them to StylableTreeNode afterwards. To get Designer support for the custom node types you probably have to write your own UITypeEditor.

Now you can in source view select each node and apply a CssClass, above example has this set for 'node2' and 'node3'. Then you can add css style directives for these classes, this can also be done using the 'Add Style' dialog in Format menu.