New Client-side Features in Q1 2012 for RadTreeList for ASP.NET AJAX

We are excited to announce that we have added a few long-awaited client-side features to Telerik’s

ASP.NET AJAX TreeList control in Q1 2012. The control now provides built-in support for reordering, resizing and showing and hiding columns, enhanced with various options for configuration and rich client and server-side API.

Following this I will provide some more insight on each of the new features and the cool effects you can achieve by enabling them:

Column Reordering

The column reordering supports two different ways of changing the places of two columns: 

• Swap: switches the places of the two columns (default option)
• Reorder: inserts one column before or after the other and shifts all other columns between them

This can be set through the ColumnsReorderMethod property.
The reordering can be performed either entirely on the client or through a postback in which case the order indexes of the columns are changed on the server (the default option). You can configure this through the ReorderColumnsOnClient property.

The server side API includes two methods: SwapColumns and ReorderColumns of the RadTreeList. Each of them has three overrides which enable you to pass as parameters column names, order indexes or directly the instances of the columns that you wish to reorder.

The client side API provides similar counterparts for achieving the same effect seamlessly without a postback.

We have provided 2 pairs of events that can be handled on the client: OnColumnSwapped / OnColumnsSwapping and OnColumnsReordered / OnColumnsReordering and one common server side event: OnColumnsOrderChanged whose event arguments exposes a collection of all the columns that have changed place during a postback.

Column Resizing

The resizing also comes in two flavors. In the standard case while dragging with the mouse you only change the position of the reorder indicator and the column is resized on the mouseup up after you have finished dragging. However if you set EnableRealtimeResize=”true” you will get the nice continuous effect of changing the column width while dragging with the mouse.

• Normal resize mode:

• Realtime resize mode:

More interesting is the case of resizing the first column. Since it has a special function of holding the expand / collapse buttons in the TreeList control its width is actually determined by the innermost expanded row, hence you cannot resize beyond this boundary. An example of this is shown in the screenshot above where you can see the left resizer showing the position to which the column can be resized.

The feature also includes three separate resize modes which give you great flexibility in configuring the behavior of the control while resizing:

• NoScroll - (the default mode) resizing one column automatically adjusts the widths of the other columns so that the whole control does not change width and keeps consistent layout
• AllowScroll - (applicable when you have turned on the scrolling) automatically adds scroll when necessary so that both the widths of the other columns and the TreeList stay intact
• ResizeTreeList - changes the width of the whole control together with the width of the resized column

You can use the ResizeMode property to set your preferred option of resizing.

The client side events are respectively OnColumnResizing and OnColumnResized.

Column Show / Hide

The final feature that we bring to you with this release is a nice extension to the client side API of the TreeList which gives you the ability to show and hide columns easily on the client without the need to postback.

To achieve this you can simply call the showColumn or hideColumn methods of the TreeList component and pass the index of the column for which you wish to change visibility:

Alternatively you can also call the show and hide methods directly on the column instance:

If you are eager to try out all this amazing stuff do not hesitate to check out our online demo or leave a comment below and tells us what you think of the new features.

You can also see these features in action, at the Q1 2012 What's new in ASP.NET - RadControls for ASP.NET AJAX and Telerik Extensions for ASP.NET MVC webinar. As a bonus, you also get in the draw for a Telerik Ultimate Collection license. Register now here.