Articles in this section
Category / Section

How to configure editing behavior in WinForms TreeNavigator?

3 mins read

Configure editing behavior

In TreeNavigator, there is no direct option for Label Editing functionality as like in TreeViewAdv. But it can be achieved with below steps.


Step 1: Implement custom TreeMenuItem inherited from TreeMenuItem control.

It is necessary to create a custom TreeMenuItem, which is inherited from the TreeMenuItem control, and implement a boolean option named "LabelEdit" to enable or disable the editing behavior.


C#

/// <summary>
/// Advanced TreeMenuItemAdv class
/// </summary>
public class TreeMenuItemAdv : TreeMenuItem
{
  public TreeMenuItemAdv()
  {
    /// <summary>
    /// Hold whether it can be Label Edit
    /// </summary>
    private bool m_LabelEdit = true;
    /// <summary>
    /// Gets / Sets whether it can be Label Edit
    /// </summary>
    public bool LabelEdit
    {
      get { return m_LabelEdit; }
      set { m_LabelEdit = value; }
    }
  }
}

Step 2:  Implement required events.

It is necessary to provide an edit option in the cases below.


1. Using Mouse [by performing double click on TreeMenuItem]

2. Using Keyboard [by pressing F2 key on Keyboard]

This can be achieved by handling below events.

Event

Description

Usage

MouseDoubleClick

 

This even will occur when Mouse double click is performed. 

This event helps to display the TextBox when the user double-clicks on the TreeMenuItem, allowing the user to provide input for the TreeMenuItem in this TextBox.

OnKeyDown

 

This event will occur when “Key” is pressed.

This event helps to display the TextBox when the user presses the F2 button, allowing the user to provide input for the TreeMenuItem in this TextBox. It applies the user-provided input as the TreeMenuItem text when the Enter key is pressed and hides the TextBox.

SelectionChanging

 

This event will occur before TreeMenuItem is selected.

This event helps to apply the user-provided input as TreeMenuItem text in the TextBox and hide the TextBox when another TreeMenuItem is selected.

C#

/// <summary>
/// This will be raised when double click occurs.
/// </summary>
private void TreeMenuItemAdv_MouseDoubleClick(object sender, MouseEventArgs e)
{
  if(e.Button == MouseButtons.Left && LabelEdit)
  {
    this.textBox = new System.Windows.Forms.TextBox();
    this.Controls.Add(textBox);
    this.textBox.Location = new System.Drawing.Point(0, 0);
    this.textBox.Name = "textBox";
    this.textBox.Location = new Point(this.DisplayRectangle.X, (this.DisplayRectangle.Y));
    this.textBox.Size = new System.Drawing.Size(this.Bounds.Width, this.Bounds.Height);
    this.textBox.TabIndex = 0;
    this.textBox.Multiline = true;
    this.textBox.Text = this.Text;
    this.textBox.KeyDown += new System.Windows.Forms.KeyEventHandler(this.OnKeyDown);
  }
}
 
/// <summary>
/// Occurs when key get pressed.
/// </summary>
protected override void OnKeyDown(KeyEventArgs e)
{
  //Press F2 for perform LabelEdit Option
  if(e.KeyData == Keys.F2 && LabelEdit)
  {
    this.textBox = new System.Windows.Forms.TextBox();
    this.Controls.Add(textBox);
    this.textBox.Location = new System.Drawing.Point(0, 0);
    this.textBox.Name = "textBox";
    this.textBox.Location = new Point(this.DisplayRectangle.X, (this.DisplayRectangle.Y));
    this.textBox.Size = new System.Drawing.Size(this.Bounds.Width - 5, this.Bounds.Height - 5);
    this.textBox.TabIndex = 0;
    this.textBox.Multiline = true;
    this.textBox.Text = this.Text;
    this.textBox.KeyDown += new System.Windows.Forms.KeyEventHandler(this.OnKeyDown);
  }
  base.OnKeyDown(e);
}
 
/// <summary>
/// Occurs when key get pressed.
/// </summary>
/// It used for updating the modified content
private void OnKeyDown(object sender, KeyEventArgs e)
{
  if(LabelEdit)
  {
    switch (e.KeyData)
    {
      case Keys.Enter:
           this.Text = textBox.Text;
           this.textBox.KeyDown -= new System.Windows.Forms.KeyEventHandler(this.OnKeyDown);
           this.Controls.Remove(textBox);
           break;
    }
  }
}
 
/// <summary>
/// Occurs before the selection of the TreeMenuItem changes.
/// </summary>
///Here we hide the old text box
private void TreeNavigator1_SelectionChanging(Syncfusion.Windows.Forms.Tools.TreeNavigator sender, Syncfusion.Windows.Forms.Tools.SelectionStateChangingEventArgs args)
{
  if(args.OldValue is TreeMenuItemAdv)
  {
    (args.OldValue as TreeMenuItemAdv).HideTextBox();
  }
}
 
/// <summary>
/// To Hide the TextBox
/// </summary>
public void HideTextBox()
{
  if(this.textBox != null && LabelEdit)
  {
    this.Text = textBox.Text.Replace("\r\n", "");
    this.textBox.KeyDown -= new System.Windows.Forms.KeyEventHandler(this.OnKeyDown);
    this.Controls.Remove(textBox);
  }
}

Screenshot

Show mouse double click option is performed

Figure 1. Editing option is enabled, when press F2 key is pressed / Mouse double click action is performed.

Modified text is applied to TreeMenuItem

Figure 2: Modified text is applied to TreeMenuItem.

Samples:

C#:  TreeNavigatorExample

VB:  TreeNavigatorExample

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied