[.NET 2.0] How to get Selected-events from an ASP.NET 2.0 TreeView Control using a Web.SiteMap File

The new ASP.NET 2.0 TreeView control looks neat, and it's very simple to use in conjunction with a web.sitemap file. I spent some time on it yesterday but there were a few things the TreeView control and I never could agree on. For example, when using a TreeView Control in conjunction with a .sitemap file (via the SiteMapDataSource), you cannot get any selection events to fire at all because the treeview is in navigation mode.

Good news is that it is not impossible to work around it, but it took me a while to figure out, and not without some serious help from Google... The trick is to get the TreeView in selection mode instead of navigation mode. For that to happen, the NavigateUrl property for the node has to be an empty string (""). So, what you have to do is to manually edit the TreeNode DataBindings of the TreeView control and add som code to control the redirection to the right page or else you will stay on the same page forever :)

From start:

  1. Create your web.sitemap file
  2. Optionally - create your master-page where you want your treeview and breadcrumb controls to sit
  3. Drag/drop a TreeView Control onto the page
  4. Set the ExpandDepth to whatever depth you like 
  5. Choose a new datasource and select a Site Map (the control should now display your nodes from the web.sitemap file)
  6. Select to Edit TreeNode DataBindings
  7. Mark the SiteMapNode from the list of available data bidings and Add it as a selected data binding
  8. Uncheck the Auto-generate data bindings checkbox, we don't need it
  9. Edit the SiteMapNode properties:
    1. Set the TextField to 'Title'
    2. Set the ValueField to 'Url'
    3. Optionally - set any default parameters you like
  10. Finally, add the SelectedNodeChanged event for the TreeView Control and some code in that event to redirect to the right page:

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)

{

    Response.Redirect(TreeView1.SelectedNode.Value, "false");

}

This is a sample of how the TreeView code in the ASPX page could look like:

<asp:TreeView ID="TreeView1" runat="server" AutoGenerateDataBindings="False" DataSourceID="SiteMapDataSource1"

    PopulateNodesFromClient="False" ImageSet="WindowsHelp" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">

    <DataBindings>

        <asp:TreeNodeBinding DataMember="SiteMapNode" TextField="Title" ValueField="Url" />

    </DataBindings>

    <ParentNodeStyle Font-Bold="False" />

    <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />

    <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"

        VerticalPadding="0px" />

    <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px"

        NodeSpacing="0px" VerticalPadding="1px" />

</asp:TreeView>

 

Now if you try out your web site, the SelectedModeChanged event should fire. One big drawback with this piece of code is that now the treeview fires a PostBack event and you have to add the extra Response.Redirect() to get to the right page. Without the redirect the treeview won't be able to automatically detect which page you're on and render the treeview accordingly.

If you want to add a breadcrumb (SiteMapPath) to the page, just drag/drop it in there. It works out of the box.

No Comments