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 needed to create a custom TreeMenuItem as it is inherited from TreeMenuItem control and implement bool option named “LabelEdit” to enable or disable 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 needed to provide edit option in below cases. 

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 TextBox, when user double clicked on TreeMenuItem and user can provide input for TreeMenuItem in this TextBox.

OnKeyDown

 

This event will occur when “Key” is pressed.

This event helps to display TextBox, when user press F2 button and user can provide input for TreeMenuItem in this TextBox and it helps to apply the user provided input as TreeMenuItem Text, when Enter key is pressed and hide the TextBox.

SelectionChanging

 

This event will occur before TreeMenuItem is selected.

This event helps to apply the user provided input as TreeMenuItem Text in TextBox and hide the TextBox, when other 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 sign in to leave a comment