New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Programmatic Definition

There are many cases when you need to create the RadTreeList control dynamically. In some scenarios you might want to declare it statically on the page and configure it with server-side code or build it entirely in code-behind. Both cases have some requirements that you should follow:

  • Create the RadTreeList entirely in code-behind - here you should place all the code in the Page_Init event handler. Note that the columns have to be added to the Columns collection after their properties are set.This approach for creating the TreeList should be used when creating TreeListTemplateColumns dynamically (as well as any other templates).

  • Add the RadTreeList declaration statically in the page mark-up and configure it server-side - configuration is to be done in the Page_Load event handler and only on initial load (with Not IsPostBack condition) to avoid adding the same structure twice. In contrast to the scenario above, columns have to be added to the Columns collection before their properties are set.

The samples bellow illustrate both approaches:

Create the RadTreeList entirely in code-behind on Page_Init

ASPNET
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
	<AjaxSettings>
		<telerik:AjaxSetting AjaxControlID="PlaceHolder1">
			<UpdatedControls>
				<telerik:AjaxUpdatedControl ControlID="PlaceHolder1" LoadingPanelID="RadAjaxLoadingPanel1" />
			</UpdatedControls>
		</telerik:AjaxSetting>
	</AjaxSettings>
</telerik:RadAjaxManager>
<h3>RadTreeList created entirely in code-behind on Page_Init</h3>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
	SelectCommand="SELECT [ReportsTo], [EmployeeID], [LastName], [FirstName], [HireDate], [City], [PostalCode], [Country] FROM [Employees]" />
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

Statically declared RadTreeList and configured on Page_Load

ASPNET
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />    
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
	<AjaxSettings>
		<telerik:AjaxSetting AjaxControlID="RadTreeList2">
			<UpdatedControls>
				<telerik:AjaxUpdatedControl ControlID="RadTreeList2" LoadingPanelID="RadAjaxLoadingPanel1" />
			</UpdatedControls>
		</telerik:AjaxSetting>
	</AjaxSettings>
</telerik:RadAjaxManager>
<h3>RadTreeList declared statically with structure defined on Page_Load</h3>
<telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList2" runat="server">
</telerik:RadTreeList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
	SelectCommand="SELECT [ReportsTo], [EmployeeID], [LastName], [FirstName], [HireDate], [City], [PostalCode], [Country] FROM [Employees]" />
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

Creating template columns dynamically

When creating a TreeList dynamically that contains a template column, you must create the templates dynamically in the code-behind and assign them to the ItemTemplate, EditItemTemplate, etc. properties of the column.

To create an ItemTemplate dynamically, you must define a custom class that implements the ITemplate interface. For an EditItemTemplate and InsertItemTemplate the class that you will build needs to implement IBindableTemplate. Then you can assign an instance of the class to the respective property of the TreeListTemplateColumn object.

Column templates must be added in the Page_Init event handler, so that the template controls can be added to the ViewState.

Here follows a sample implementation including both kind of templates:

ASPNET
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
	SelectCommand="SELECT [ReportsTo], [EmployeeID], [LastName], [FirstName], [HireDate], [City], [HomePhone], [Country], [Photo] FROM [Employees]"
	DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" InsertCommand="INSERT INTO [Employees] ([ReportsTo], [LastName], [FirstName] , [HomePhone]) VALUES (@ReportsTo, @LastName, @FirstName, @HomePhone)"
	UpdateCommand="UPDATE [Employees] SET [ReportsTo] = @ReportsTo, [LastName] = @LastName, [FirstName] = @FirstName , [HomePhone] = @HomePhone WHERE [EmployeeID] = @EmployeeID">
	<DeleteParameters>
		<asp:Parameter Name="EmployeeID" Type="Int32" />
	</DeleteParameters>
	<InsertParameters>
		<asp:Parameter Name="ReportsTo" Type="Int32" />
		<asp:Parameter Name="LastName" Type="String" />
		<asp:Parameter Name="FirstName" Type="String" />
		<asp:Parameter Name="HomePhone" Type="String" />
	</InsertParameters>
	<UpdateParameters>
		<asp:Parameter Name="ReportsTo" Type="Int32" />
		<asp:Parameter Name="LastName" Type="String" />
		<asp:Parameter Name="FirstName" Type="String" />
		<asp:Parameter Name="EmployeeID" Type="Int32" />
		<asp:Parameter Name="HomePhone" Type="String" />
	</UpdateParameters>
</asp:SqlDataSource>