help: add icon in textbox

[ricric]

how to add an icon to the textbox in radcommandbar? i want to make a search box with icon in the right align.

[Ivan Petrov]

Hello Ricric,

Thank you for writing.

In order to add an item to the RadTextBoxElement, please consider the following code snippet:

private void AddIconToTextBoxElement(RadTextBoxElement textElement, ImagePrimitive icon)
{
  RadTextBoxItem item = textElement.TextBoxItem;

  textElement.Children.Remove(item);

  icon.SetValue(DockLayoutPanel.DockProperty, Telerik.WinControls.Layouts.Dock.Left);

  DockLayoutPanel dockPanel = new DockLayoutPanel();
  dockPanel.LastChildFill = true;

  dockPanel.Children.Add(icon);
  dockPanel.Children.Add(item);

  textElement.Children.Add(dockPanel);
}

 You can initialize the ImagePrimitive as in the following code snippet:

ImagePrimitive icon = new ImagePrimitive();
icon.Image = Properties.Resources.icon;

In addition, you should note that you can use the same technique to add any RadElement like RadButtonElement, RadProgressbarElement etc.

You can call this method in your form constructor after InitializeComponent().

I hope this will be useful for your. If you have further questions, feel free to ask. Best wishes,
Ivan Petrov
the Telerik team

[Eusebio]

Hi,

 

I included an icon in RadTextBox with this way, but now the ShowClearButton = true isn't work.

How can we prevent that from happening?

Thanks.

 

[Dess | Tech Support Engineer, Principal]

Hello, Eusebio,

I would like to note that this is quite an old  forum post and the demonstrated approach here was applicable for versions prior to introducing the clear button in RadTextBox.

In order to keep the close button visible and add an icon, you can use the ButtonsPanel that was added for the clear button: 

            this.radTextBox1.ShowClearButton = true; 
            ImagePrimitive icon = new ImagePrimitive();
            icon.StretchHorizontally = false;
            icon.Image = Properties.Resources.crayon;

            this.radTextBox1.TextBoxElement.ButtonsStack.Children.Add(icon);

An alternative solution is to use a RadButtonTextBox which is a derivative of RadTextBox which allows you to embed easily button elements on the left or right side of the text box. Thus, you can apply a specific icon to a button element.

Additional information is available in the following help article: https://docs.telerik.com/devtools/winforms/controls/editors/buttontextbox/getting-started 

Feel free to use this approach which suits your requirements best.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Eusebio]

Thanks Dess,

In RadTextBox I prefer the "crayon" icon to the  left.

 

How I do?

 

[Dess | Tech Support Engineer, Principal]

Hello, Eusebio,     

Please have a look at the following code snippet demonstrating how to insert the image before the text in RadTextBox:

        public RadForm1()
        {
            InitializeComponent();

            this.radTextBox1.ShowClearButton = true;
            this.radTextBox1.Text = "test";
            ImagePrimitive icon = new ImagePrimitive();
            icon.Margin = new System.Windows.Forms.Padding(0, 0, 5, 0);
            icon.StretchHorizontally = false;
            icon.Image = Properties.Resources.crayon; 

            StackLayoutPanel buttons = this.radTextBox1.TextBoxElement.ButtonsStack;
            buttons.StretchHorizontally = false;
            StackLayoutElement container = new StackLayoutElement();
            container.StretchHorizontally = true;
            this.radTextBox1.TextBoxElement.Children.Remove(this.radTextBox1.TextBoxElement.TextBoxItem);
            this.radTextBox1.TextBoxElement.Children.Remove(this.radTextBox1.TextBoxElement.ButtonsStack);
            container.Children.Add(icon);
            container.Children.Add(this.radTextBox1.TextBoxElement.TextBoxItem);
            container.Children.Add(buttons);
            this.radTextBox1.TextBoxElement.Children.Add(container);
        }

Here is the obtained result:

However, I would recommend you to have a look at the previously mentioned RadButtonTextBox which was specifically designed to handle such scenarios in a more appropriate way out of the box:  https://docs.telerik.com/devtools/winforms/controls/editors/buttontextbox/getting-started 

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik