Overflow Indicators?

[Dan]

Hate to ask this but when I use Infragistics controls (evil competitor), they have the concept of showing an Overflow Indicator in the edit control when the text in the control will be cut off (too much text to show all of it).  This is very useful for end users as they can hover over the indicator and get a tooltip of all of the text.

How can I, using the TextBox control:

Show an Overflow Indicator such that the user can see all their text in a tooltip?
OR
Have the text clip at word/characters with a "..." at the end of the control such that the user can then see all their text in a tooltip?
OR
Determine if the text has been clipped?  If it is clipped then I can set the tooltip myself to the text.

By the way, I like the Telerik controls in that they "feel" better thus I'm in your forums ;)

[Stefan]

Hello Dan,

Thank you for writing.

RadTextBox is editable control and this is why it does not support text clipping. By design, the editable controls does not have this option. However, thanks to our powerful Telerik Presentation Framework, you can easily add an element to the text box with some image and tool tip, when the text size exceeds the text box width. Here is a sample:

public partial class Form1 : Form
{
    LightVisualElement overflowIndicator = new LightVisualElement();

    public Form1()
    {
        InitializeComponent();

        AddButtonToTextBox();
        radTextBox1.TextChanged += new EventHandler(radTextBox1_TextChanged);
        radTextBox1.Text = "Some text longer than the text box size";
    }

    void radTextBox1_TextChanged(object sender, EventArgs e)
    {
        overflowIndicator.ToolTipText = radTextBox1.Text;

        if (TextRenderer.MeasureText(radTextBox1.Text, radTextBox1.Font).Width > radTextBox1.Width)
        {
            overflowIndicator.Visibility = Telerik.WinControls.ElementVisibility.Visible;
        }
        else
        {
            overflowIndicator.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        }
    }

    private void AddButtonToTextBox()
    {
        overflowIndicator.Image = Resources.indicator;

        RadTextBoxItem textBoxItem = this.radTextBox1.TextBoxElement.TextBoxItem;
        this.radTextBox1.TextBoxElement.Children.Remove(textBoxItem);

        DockLayoutPanel.SetDock(textBoxItem, Telerik.WinControls.Layouts.Dock.Left);
        DockLayoutPanel.SetDock(overflowIndicator, Telerik.WinControls.Layouts.Dock.Right);

        DockLayoutPanel dockLayoutPanel = new DockLayoutPanel();

        dockLayoutPanel.Children.Add(overflowIndicator);
        dockLayoutPanel.Children.Add(textBoxItem);

        this.radTextBox1.TextBoxElement.Children.Add(dockLayoutPanel);
    }
}

I hope that you find this information useful. Let me know if you have further questions.

Regards,
Stefan
the Telerik team

[Dan]

Stefan,

That is the exact solution I was thinking of -- I saw somewhere else in the forums/help where they added a button to the end of a text box.  This will give a nice visualization to the user if the text has been clipped. 

Thanks for the code, this should make my coding go much quicker!

Dan...

[Stefan]

Hi Dan,

Yes, the approach is the same as adding a button to the text box. I am glad that I could help. Let us know if you have any other questions.
 
All the best,
Stefan
the Telerik team