Treeview Control in Sharepoint 2010

In this post you will learn how to Programmatically use the Treeview control in Sharepoint 2010.

At First, we will create an application page in VS 2010 to contain a drop-down list bind to all the Navigation Providers in SharePoint 2010 and a TreeView Control to display the selected navigation providers in a Treeview hierarchy. Lets follow the Steps -

Steps -

1. Create a new Application Page in Vs 2010.
2. Add the below code to the aspx of the application page

<%@ Page Language="C#" AutoEventWireup="true" DynamicMasterPageFile="~masterurl/default.master"
CodeFile="NavigationProviders.aspx.cs" Inherits="NavigationProviders" CodeFileBaseClass="Microsoft.SharePoint.WebControls.LayoutsPageBase" %>

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<asp:DropDownList id="ddlNavProviders" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlNavProviders_SelectedIndexChanged" />
<asp:TreeView id="navTreeView" runat="server"></asp:TreeView>
< /asp:Content>

3. Add the Code behind – The code-behind class first initializes DropDownList with all the navigation providers defined in web.config. By selecting a navigation provider, the SiteMapDataSource pointing to the selected provider is bound to the TreeView.

using System;
using System.Web;
using System.Web.UI.WebControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
public partial class NavigationProviders : LayoutsPageBase
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Init the DropDown element with all available navigation providers
ddlNavProviders.DataSource = SiteMap.Providers;
ddlNavProviders.DataTextField = "Name";
ddlNavProviders.DataBind();
}
}

protected void ddlNavProviders_SelectedIndexChanged(object sender,EventArgs args)
{
// Bind the selected navigation provider to the TreeView
SiteMapDataSource ds = new SiteMapDataSource();
ds.Provider = SiteMap.Providers[ddlNavProviders.SelectedItem.Text];
navTreeView.DataSource = ds;
navTreeView.DataBind();
}
}