We are excited to announce that we have added a few long-awaited client-side features to Telerik’sASP.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:
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.
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.
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:
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:
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.
Marin Georgiev is a software developer in one of Telerik's ASP.NET AJAX Teams. Since he joined the company in 2010 he's been working on different client-side features and extending the mobile support of the controls. His interests include mobile and web development as well as integration with Sharepoint 2010.
Subscribe to be the first to get our expert-written articles and tutorials for developers!