In-place Tabitem.Text editing

[superold]

Hi,

I wonder how I could inplace edit the Text of a tabitem. Same thought as the TreeView and with LabelEdit = true.

Thanks,
- jorge

[Boyko Markov]

Hello Jorge Delegado,

We do not support that feature built-in our RadTabStrip but I could propose a sample solution which will demonstrate how to implement in-place editing of TabItems. Here are the steps:

1) Create a new instance of RadTabStrip and add a few items to it.
2) Create a new class, lets say AssociatedTextBox, and place the following code in it:
 

public class AssociatedTextBox : RadTextBox
        {
            private TabItem associatedItem;

            public TabItem AssociatedItem
            {
                get
                {
                    return this.associatedItem;
                }
                set
                {
                    this.associatedItem = value;
                }
            }


            public AssociatedTextBox(TabItem item)
            {
                this.associatedItem = item;
            }

        }

 
3) Place the following code in the form constructor:
 

textBox = new AssociatedTextBox(null);
this.radTabStrip1.Controls.Add(this.textBox);
this.textBox.Visible = false;
this.textBox.KeyDown += new KeyEventHandler(textBox_KeyDown);

 
As you could see here we initialize our textbox and we add it to RadTabStrip's controls collection.
Now we should handle the textBox's KeyDown event and RadTabStrip's MouseDoubleClick's event.

4) Place the following code in MouseDoubleClick handler of RadTabStrip:
 

private void radTabStrip1_MouseDoubleClick(object sender, MouseEventArgs e)
        {
            foreach (TabItem item in this.radTabStrip1.Items)
            {
                if (item.Bounds.Contains(e.Location))
                {
                    this.textBox.AssociatedItem = item;
                    this.textBox.Text = item.Text;
                    this.textBox.Bounds = item.Bounds;
                    this.textBox.Visible = true;

                    return;
                }
            }
        }

5) The last step is to write some code which will update the text in the tabItem or cancel the editing.
 

void textBox_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.KeyData == Keys.Enter)
            {
                if (this.textBox.AssociatedItem != null)
                {
                    this.textBox.AssociatedItem.Text = this.textBox.Text;
                    this.textBox.Hide();
                }
            }

            if (e.KeyData == Keys.Escape)
            {
                this.textBox.Hide();
                this.textBox.Text = "";
            }
        }

I hope that this helps.

 
Greetings,
Ray
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[kdev]

Hi,
I notice that in Q2 SP1 we can edit the TabItem text In-Place. (Version Notes).
how can I enable this feature ? is there a new property or method? ...
Thanks,
kort 

[Mike]

Thank you for asking this, Kort.

In order to turn it this feature you should set the AllowEdit property of RadTabStrip to true. Since we have just implemented the "F2" key as a trigger for item editing (it works only when the TabStrip is focused), you may also need to call the BeginEdit / EndEdit methods of the TabStripElement to edit the selected TabItem.

I have prepared an example that demonstrates this approach for you.

Let us know if you have other questions.
 
 
Greetings,
Mike
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center