Controls / TreeView / Editing

New to Telerik UI for WinForms? Download free 30-day trial

Custom Editors

By default RadTreeView uses a text box editor for editing the node Text. However, you might want to replace the default editor with your own. When an editor is invoked the EditorRequired event fires allowing the editor instance to be replaced by a custom one.

Below you will find an example on how to implement a custom editor and use it with RadTreeView.

In this example we will implement an editor, showing a US state name with text and its abbreviation in a drop down next to the text.

WinForms RadTreeView Custom Editors

Our editor and its element will derive from BaseTextBoxEditor and BaseTextBoxEditorElement respectively.

In the EditorElement we will add a RadDropDownListElement. The DropDownList will be bound to the same data source as the RadTreeView control for the purpose of the example follows the EditorElement:

public class CustomRadTreeViewEditorElement : BaseTextBoxEditorElement
{
    private RadDropDownListElement dropDownList;
    private DockLayoutPanel dockPanel;
    public RadDropDownListElement DropDownList
    {
        get { return this.dropDownList; }
    }
    protected override void OnLoaded() //use OnLoaded as here the text editor will exist
    {
        base.OnLoaded();
        if (this.Children.Contains(this.TextBoxItem))
        {
            this.dropDownList = new RadDropDownListElement();
            this.dropDownList.DropDownStyle = RadDropDownStyle.DropDownList;
            this.dropDownList.MinSize = new Size(55, 0);
            this.dockPanel = new DockLayoutPanel();
            this.dockPanel.LastChildFill = true;
            this.Children.Add(this.dockPanel);
            this.dockPanel.Children.Add(this.dropDownList);
            DockLayoutPanel.SetDock(this.dropDownList, Telerik.WinControls.Layouts.Dock.Right);
            this.Children.Remove(this.TextBoxItem);
            this.dockPanel.Children.Add(this.TextBoxItem);
        }
    }
}

The EditorElement encapsulates the visual appearance of the element, we will need the actual editor which will encapsulate the functionality:

public class CustomRadTreeViewEditor : BaseTextBoxEditor
{
    protected override RadElement CreateEditorElement()
    {
        return new CustomRadTreeViewEditorElement();
    }
    public new CustomRadTreeViewEditorElement EditorElement
    {
        get { return base.EditorElement as CustomRadTreeViewEditorElement; }
    }
    public override bool EndEdit()
    {
        this.EditorElement.DropDownList.SelectedValueChanged -= DropDownList_SelectedIndexChanged;
        return base.EndEdit();
    }
    public override void BeginEdit()
    {
        base.BeginEdit();
        TreeNodeElement nodeElement = this.OwnerElement as TreeNodeElement;
        this.EditorElement.DropDownList.BindingContext = new BindingContext();
        this.EditorElement.DropDownList.DataSource = nodeElement.TreeViewElement.DataSource;
        this.EditorElement.DropDownList.DisplayMember = nodeElement.TreeViewElement.ValueMember;
        this.EditorElement.DropDownList.ValueMember = nodeElement.TreeViewElement.DisplayMember;
        this.EditorElement.DropDownList.SelectedIndex = this.EditorElement.DropDownList.FindStringExact(nodeElement.Data.Value.ToString());
        this.Value = nodeElement.Data.Text;
        this.EditorElement.DropDownList.SelectedIndexChanged += DropDownList_SelectedIndexChanged;
    }
    void DropDownList_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
    {
        TreeNodeElement nodeElement = this.OwnerElement as TreeNodeElement;
        nodeElement.Data.Value = this.EditorElement.DropDownList.Items[e.Position].Text;
        this.Value = this.EditorElement.DropDownList.Items[e.Position].Value;
    }
}

Now all that is left is to drag a RadTreeView to a form, populate it with data and enable the custom editor.

public EditingNodes()
{
    InitializeComponent();
    DataTable table = new DataTable();
    table.Columns.Add("Abbreviation");
    table.Columns.Add("State");
    table.Rows.Add("AL", "Alabama");
    table.Rows.Add("AK", "Alaska");
    table.Rows.Add("AZ", "Arizona");
    table.Rows.Add("AR", "Arkansas");
    table.Rows.Add("CA", "California");
    table.Rows.Add("CO", "Colorado");
    table.Rows.Add("CT", "Connecticut");
    this.Controls.Add(this.radTreeView1);
    this.radTreeView1.AllowEdit = true;
    this.radTreeView1.DataSource = table;
    this.radTreeView1.DisplayMember = "State";
    this.radTreeView1.ValueMember = "Abbreviation";
    this.radTreeView1.EditorRequired += TreeViewEditorRequired;
}
private void TreeViewEditorRequired(object sender, TreeNodeEditorRequiredEventArgs e)
{
    e.EditorType = typeof(CustomRadTreeViewEditor);
}
In this article
Related articles
Not finding the help you need? Improve this article