Telerik blogs

It's Q1 2011 release time for the Telerik Personal Productivity product line and we, the guys from the 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

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:

RadTreeList now matches RadGrid's data editing features

Here are the highlights:

  • InPlace, EditForms and PopUp edit modes giving you maximum flexibility in laying out your edit controls.
  • AutoGenerated, Template and WebUserControl edit form types providing either full automation or thorough customization of the edit form.
  • Automatic data operations with ASP.NET 2.0 and 3.5 data source controls.
  • Flexible server-side API for implementing custom data editing behavior - event handlers for all data editing commands - Edit, Insert, Update, PerformInsert, Delete and Cancel.
  • Validation settings - specify commands that validate and the validation group.
  • A range of column types (numeric, datetime, checkbox, template) and customization of their editing behavior.
  • Flexible column editors API allowing you to attach an arbitrary editor type - custom or built-in to any editable column.

No need to comment on most of these features. They were available in RadGrid for a very long time and now they are available in RadTreeList.

What I want to spend more time on is the last bullet point in the above list:

In RadTreeList, any column type can use any column editor

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 these properties:

  • Column - the editable column instance that will be using the column editors.
  • DefaultEditor - an instance of the default editor type for the current column.
  • CustomEditorInitializer - a delegate that returns an instance of type ITreeListColumnEditor.

The CreateColumnEditor event can be used to:

  1. Customize the default column editor for the specified column. e.DefaultEditor can be cast to the default editor type for the current column. From then you can customize the properties of the editor:
protected void RadTreeList1_CreateColumnEditor(object sender, TreeListCreateColumnEditorEventArgs e)
{
    if (e.Column.DataField == "Notes")
    {
        //cast the default editor to the appropriate editor type
        var notesEditor = (TreeListTextBoxColumnEditor)e.DefaultEditor;
        notesEditor.TextBoxControl.TextMode = TextBoxMode.MultiLine;
        notesEditor.TextBoxControl.Rows = 10;
    }
}
  1. Provide a delegate (or a lambda expression) to e.CustomColumnInitializer that will initialize and return a custom editor instance:
protected void RadTreeList1_CreateColumnEditor(object sender, TreeListCreateColumnEditorEventArgs e)
{
    if (e.Column.DataField == "TitleOfCourtesy")
    {
        //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 = new TreeListComboEditor(e.Column);
            editor.ComboBox.DataSourceID = "SqlDataSource2";
            editor.ComboBox.DataTextField = "TitleOfCourtesy";
            editor.ComboBox.DataValueField = "TitleOfCourtesy";
 
            return 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 business scenarios.

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.


About the Author

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.

Comments

Comments are disabled in preview mode.