ASP.NET Treeview mit custom images

Auf Kunden Anfrage ( wir geben 12 Monate kostenlosen Support auf unsere Schulungen.) Wie kann man bei einem Treeview Steuerelement Bilder einbauen?

Grundsätzlich kann man über die Datei Web.sitemap einen Sitemap erstellen. Durch zusätzliche Attribute kann man so auch Referenzen auf Bilder erzeugen. Dazu benötigt man natürlich noch ein Sitemapdatasource Steuerelement und im Treeview eine Bindung an selbiges.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
    <siteMapNode title="Home" description="Home" url="~/Default.aspx" >
        <siteMapNode title="Products" description="Our products" url="~/Products.aspx?name=~/Get_Well/gogogo">
            <siteMapNode title="Hardware" description="Hardware choices" url="~/Hardware.aspx" ImageUrl="~/aqua1.jpg" />
            <siteMapNode title="Software " description="Software choices" imageurl="~/clock.jpg"  />
        </siteMapNode>
        <siteMapNode title="Services" description="Services we offer" url="~/Services.aspx">
            <siteMapNode title="Training" description="Training classes"
              url="~/Training.aspx" />
            <siteMapNode title="Consulting" description="Consulting services"
              url="~/Consulting.aspx" />
            <siteMapNode title="Support" description="Supports plans"
              url="~/Support.aspx" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

Leider wird dies nicht automatisch ausgewertet. Dazu nimmt man einfach das Event das gefeuert wird wenn eine Knoten erzeugt wird und tauscht das Bild aus.

Protected Sub TreeView1_TreeNodeDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs)
        Dim nodeFromSiteMap As SiteMapNode = CType(e.Node.DataItem, SiteMapNode)
        If nodeFromSiteMap("imageUrl") IsNot Nothing Then
            e.Node.ImageUrl = nodeFromSiteMap("imageUrl")
        End If
End Sub

Im Browser sieht dann unser Tree so aus.

image

Grundsätzlich lassen sich damit auch viel komplexere Szenarien abbilden um zb Checkboxen oder Buttons im Treeview einzufügen.

Kommentar schreiben