Q1 2011 release time for the Telerik Personal Productivity product line and we, the guys
ASP.NET AJAX team are excited to share news of improvement, new functionality
and a brand new control added to the arsenal of the Telerik AJAX developer. In this
blog post, I want to talk about some major functionality one of the new players
in the AJAX control suite now sports - editing for RadTreeList.
RadTreeList for ASP.NET AJAX was introduced last quarter
(Q3 2010) and enabled hierarchical visualization of a single tabular data set. As
a databound tabular control, it is naturally compared to RadGrid, and not only because
both look visually alike. As RadGrid itself enabled its own hierarchical data scenarios
through detail tables or
nested view templates, it is appropriate to position RadTreeList in
the space of hierarchical table setups. Where detail tables in RadGrid require a
different data source to be assigned to each, RadTreeList binds to a single data
source containing a flat collection of records. Hierarchical relations are inferred
through a set of data key - parent data key relations that specify some records
as children of others. RadTreeList then builds a hierarchical, tree-like item structure
rendered in a single table.
As both RadGrid and RadTreeList deal with tables of data, we can also define a common
set of operations that can be applied to tabular data items. Paging, sorting and
selection are some of these operations and we made sure you get them from version
one. They were introduced with the first release of RadTreeList last quarter. It's
time to bring forth another major feature of RadTreeList that is indispensable from
any databound control - data editing.
Data editing does not require introduction to any developer familiar with RadGrid.
I will cut short with:
Here are the highlights:
No need to comment on most of these features. They were available in RadGrid for a very long time and now they are available
What I want to spend more time on is the last bullet point in the above list:
You can imagine the set of possibilities this feature opens up. You can have a bound
column display a datetime editor allowing your user to enter valid datetime values
even though they will be saved in a string field. Or you can implement a custom
editor displaying, say, a RadRating to provide a rating value and then you can attach
this rating editor to a numeric column or bound column. You can mix between column
types and built-in editors - attaching a TreeListCheckBoxColumnEditor
to a GridTemplateColumn, for example.
Customizing the column editing behavior in RadTreeList is very intuitive. RadTreeList
fires the CreateColumnEditor event whenever a column needs to determine
what column editors it is going to be using. The event arguments object exposes
The CreateColumnEditor event can be used to:
sender, TreeListCreateColumnEditorEventArgs e)
//cast the default editor to the appropriate editor type
var notesEditor = (TreeListTextBoxColumnEditor)e.DefaultEditor;
notesEditor.TextBoxControl.TextMode = TextBoxMode.MultiLine;
notesEditor.TextBoxControl.Rows = 10;
//provide an initializer delegate that will return a new instance of a
//custom editor type every time it is called.
e.CustomEditorInitializer = () =>
//this is a custom (user-implemented) editor type
var editor =
In the above code sample, TreeListComboEditor is a custom, user-implemented
editor type, whose full source code can be found in the RadTreeList Custom Editors online demo. Implementing a custom
column editor is a topic for another discussion that I will skip today and pay more
attention to in my next blog post. Let me just say that the simplicity, yet flexibility
of the column editors architecture in RadTreeList can be fully experienced by the
ease with which you implement a custom column editor for RadTreeList. It's fun.
A question someone may ask is why bother providing a delegate or a lambda that will
return and instance of a custom editor, when we can simply assign an instance of
a custom editor to a property in the args object. The matter of fact is, RadTreeList
creates a new column editor instance for every editable item. That is, there is
a different column editor instance in every edited item for every column. That is
why we pass an initializer - it is going to be called every time RadTreeList needs
to initialize a new editor instance for an edited item. The returned editor will
be responsible for rendering controls and transferring data between RadTreeList's
data source and the edit controls inside.
We believe this new column editor architecture greatly simplifies the way column
editors are customized in RadTreeList. This, along with many other customization
options for the editing behavior of RadTreeList, makes for a sophisticated, highly
flexible editing experience that will meet the needs of even the most demanding
Needless to say the set of common functionality between RadTreeList and RadGrid
will expand. We will bring more and more of RadGrid's features into RadTreeList
based on user feedback. We encourage you all to take part in building RadTreeList
into a powerful data control that meets your business needs. Give your thoughts
on the editing features of RadTreeList, as well as any other functionality you would
expect to see in RadTreeList.
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.