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

Expand/Collapse Items

The RadTreeList control supports different modes for expanding and collapsing items. There are three available modes - on the server, on the client, or a mix of the first two. The feature is supported with all data binding modes of RadTreeList.

Configuring expand/collapse mode

In order to enable the feature you need to set the ExpandCollapseMode property of RadTreeList. You can use one of the following options:

  • Server - Items are Expanded/Collapsed on the server. This is the default setting.

  • Client - All items are loaded on the client. Expanding and collapsing is done on the client.

  • Combined - Only expanded items are loaded. By default the items are collapsed. Postback is performed only when an item is expanded for the first time. Any subsequent expand/collapse of this item is performed on the client side.

ASPNET
<telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList1"
	ExpandCollapseMode="Client">
</telerik:RadTreeList>

Server-side API

NameTypeDescription
ClientExpandedIndexespropertyCollection containing the TreeListHierarchyIndexes of the items that are expanded on the client-side. The collection is serialized back and forth to the client.
CollapseAllItems()methodCollapses all RadTreeList items.
ExpandAllItems()methodExpands all RadTreeList items.
ExpandItemToLevel(TreeListDataItem item, int level)methodExpands the specified TreeListDataItem to the specified level.
ExpandToLevel(int level)methodExpands all RadTreeList items to the specified level.

The ExpandItemToLevel method allows you to expand all child items recursively. For example:

C#
protected void Button1_Click(object sender, EventArgs e)
{
	foreach (TreeListDataItem item in RadTreeList1.Items)
	{
		//find the item you want to expand
		if (item.GetDataKeyValue("ID").ToString() == "1")
		{
			if (item.CanExpand)
			{
				RadTreeList1.ExpandItemToLevel(item, int.MaxValue);
			}
			//the collection will be modified as items expand, so the loop will throw exceptions if not stopped
			break;
		}
	}
}

Modifying ClientExpandedIndexes can cause unexpected behavior. It is recommended not to modify the collection. Nevertheless, if you need to modify it you should execute caution.

Have in mind that the ClientExpandedIndexes should be used when expand/collapse is performed on the client. If expand/collapse is done server-side you should use the ExpandedIndexes property.

Client-side API

Below is a list of the properties and methods that can be used with the expand/collapse functionality.

NameTypeDescription
get_clientExpandedpropertyReturns boolean value indicating if an item is expanded.
set_clientExpanded(value)propertySets the expanded state of an item. Note that changing the state of an item will not expand or collapse it.
toggleExpandCollapsemethodToggles the state of an item.

Item state persistance

The expanded/collapsed state of the items is persisted after postback by default.

See Also