Add mandatory Icon to Controls

[Sathish]

I have a controls RadTextBox, RadDateTimePicker, RadDropdown etc... I want to add icon to each control that is the Mandatory Field sign to the user. Currently in TELERIK I am able to see only error icon, that also not showing immediately after the form load.

-----------------------------------------------------

Below is an example for what I am expecting:

I used other tool controls which provides that facility.

I used below components in another tool, to show you what I am expecting.

1. ValidationProvider
2. ErrorProvider

Please see attached filed to know my expected result.

• DesignTime:

           

• Run Time:

           

 

Please do the needful, and code it/suggest and attach a sample app.

Thanks

[Sathish]

Hello,

Please help me to resolve my issue.

[Sathish]

Hi Nadya,

After lot of R&D, I am able to add info icon to RadDropDownList and RadDateTimePicker. But I am not able to make Resources.info icon and DropDownItem picker icon or Date picker icon in correct place.

Here is the code:

      public RadForm1()
      {
         InitializeComponent();

         _image = new LightVisualElement();

         _image.Image = Resources.information;
         _image.Alignment = ContentAlignment.MiddleRight;
         _image.DrawImage = true;
         _image.ToolTipText = @"Mandatory field";

         radTextBox1.TextBoxElement.Children[3].Children.Add(_image);
         radDropDownList1.DropDownListElement.Children[2].Children.Add(_image);
         //radDateTimePicker1.DateTimePickerElement.Children[2].Children.Add(_image);

         var radValidationRule1 = new RadValidationRule();
         radValidationRule1.AutoToolTip = true;
         radValidationRule1.Controls.Add(radDropDownList1);

         //radValidationRule1.Controls.Add(radDateTimePicker1);
         radValidationRule1.Operator = Telerik.WinControls.Data.FilterOperator.IsNotLike;
         radValidationRule1.ToolTipText = "Mandatory field";
         radValidationRule1.Value = "";

         radValidationRule1.Controls.Add(radDropDownList1);
         radDropDownList1.DropDownStyle = RadDropDownStyle.DropDownList;
         radDropDownList1.DropDownListElement.EditableElement.TextImageRelation = TextImageRelation.TextBeforeImage;
         radValidationProvider.ValidationMode = ValidationMode.None;
         radValidationProvider.ValidationRules.Add(radValidationRule1);
         radValidationProvider.ControlValidation += RadValidationProvider_ControlValidation;
         radDropDownList1.Leave += HandleControlLeave;
      }

Please let me know how to fix this.

Thanks

[Nadya | Tech Support Engineer]

Hello, Sathish,

Following the information provided in your last post, I suppose that it would be suitable for you to add an image into RadTextBoxElement. This can be done by using a LightVisualElement and set its Image property, for example Resources.info. Then, you can manage the info image appearance according to your needs - if validation fails, then RadValidationProvider will show Error image, if validation is success then show Resources.Info icon. You can use the ControlValidation event for this purpose.

I modified my example following your requirements. You can see the achieved result in the gif file. Feel free to modify this example further according to your specific needs. 

public partial class RadForm1 : Telerik.WinControls.UI.RadForm
{
    LightVisualElement image;
    public RadForm1()
    {
        InitializeComponent();
        image = new LightVisualElement();
        image.Image = Resources.info;
        image.Alignment = ContentAlignment.MiddleLeft;
        image.DrawImage = true;
        this.radTextBox1.TextBoxElement.Children[3].Children.Add(image);

        RadValidationRule radValidationRule1 = new RadValidationRule();
        radValidationRule1.AutoToolTip = true;
        radValidationRule1.Controls.Add(this.radTextBox1);
        radValidationRule1.Operator = Telerik.WinControls.Data.FilterOperator.IsNotLike;
        radValidationRule1.ToolTipText = "Name can not be empty";
        radValidationRule1.Value = "";

        this.radValidationProvider1.ValidationMode = ValidationMode.OnValidating;
        radValidationProvider1.ValidationRules.Add(radValidationRule1);
        this.radValidationProvider1.ControlValidation += RadValidationProvider1_ControlValidation;
    }

    private void RadValidationProvider1_ControlValidation(object sender, RadValidationEventArgs e)
    {
        if (!e.IsValid) { image.DrawImage = false; }
        else { image.DrawImage = true; }
    }
}

I hope this helps. Let me know if you have another questions.

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Sathish]

Hi, Nadya,

Thanks for your help, I have modified as per my need.

This is almost same as I need. I will make use of this code.

One small issue I have here:

For RadTextBox I am able to make it work perfectly. But I am not able to add Resources.info icon for following controls,

1. Party: RadDropDownList
2. DOB: RadDateTimePicker
   

Please help me out.

-----------------------------

I found some article regarding the same issue How to add icon or image in Raddropdownlist ? in UI for WinForms | Telerik Forums

When radDropDownList1.SelectedIndex = -1, I am able to see icon, but in the middle of editor control (Like how it shows in radTextBox). I need it at the Right side.

Here is an example below, how it is showing in RadDropDownList.

-----------------------------

Thanks in advance.

[Sathish]

Hi, Nadya,

Can you please help with my issue in latest comment.

[Nadya | Tech Support Engineer]

Hello, Sathish,

I am glad to hear that the suggested solution for RadTextBox is helpful in achieving the mandatory field that you need.

As to the RadDropDownList control, if you want to show the Resources.info icon in the right side, you should specify the ImageAlignment property to ContentAlignment.MiddleRight and TextImageRelation property to TextBeforeImage:

this.radDropDownList1.DropDownListElement.EditableElement.TextImageRelation = TextImageRelation.TextBeforeImage;
this.radDropDownList1.DropDownListElement.EditableElement.ImageAlignment = ContentAlignment.MiddleRight;

For RadDateTimePicker control you can add a LightVisialElement that shows an icon similarly as you did in RadTextBox. I prepared a sample code snippet for your reference:

image = new LightVisualElement();
image.Image = Resources.info;
image.Alignment = ContentAlignment.MiddleRight;
image.MaxSize = new Size(25, 0);
image.DrawImage = true;
this.radDateTimePicker1.DateTimePickerElement.Children[2].Children.Insert(2, image);

I hope this helps. If you need further assistance, please let me know.

[Sathish]

Hi Nadya,

Thanks for your Answer.

Answer is worker only for RadDateTimePicker but did not work for RadDropDownList.

My code below:

      #region Private Fields

      private readonly LightVisualElement _image;

      #endregion Private Fields

      #region Public Constructors

      public RadForm1()
      {
         InitializeComponent();

         _image = new LightVisualElement();
         _image.Image = Resources.information;
         _image.Alignment = ContentAlignment.MiddleRight;
         _image.DrawImage = true;
         //_image.MaxSize = new Size(25, 0);
         _image.DrawImage = true;
         _image.ToolTipText = @"Mandatory field";

         //radDropDownList1.DropDownListElement.Children[2].Children.Insert(2, _image);
         radDropDownList1.DropDownListElement.Children[2].Children.Add(_image);
         radDropDownList1.DropDownStyle = RadDropDownStyle.DropDownList;
         radDropDownList1.ShowImageInEditorArea = true;
         radDropDownList1.DropDownListElement.EditableElement.TextImageRelation = TextImageRelation.TextBeforeImage;
         radDropDownList1.DropDownListElement.EditableElement.ImageAlignment = ContentAlignment.MiddleRight;

         var radValidationRule1 = new RadValidationRule();
         radValidationRule1.AutoToolTip = true;
         radValidationRule1.Controls.Add(radDropDownList1);
         radValidationRule1.Operator = Telerik.WinControls.Data.FilterOperator.IsNotLike;
         radValidationRule1.ToolTipText = "Mandatory field";
         radValidationRule1.Value = "";
         radValidationRule1.Controls.Add(radDropDownList1);

         radValidationProvider.ValidationMode = ValidationMode.None;
         radValidationProvider.ValidationRules.Add(radValidationRule1);
         radValidationProvider.ControlValidation += RadValidationProvider_ControlValidation;
         radDropDownList1.Leave += HandleControlLeave;
      }

      #endregion Public Constructors

      #region Private Methods

      private void HandleControlLeave(object sender, EventArgs e)
      {
         radValidationProvider.Validate(radDropDownList1);
      }

      private void radButton1_Click(object sender, EventArgs e)
      {
         if (!radValidationProvider.Validate(radDropDownList1))
         {
            RadMessageBox.Show(this, "Please check of the Mandatory Fields!", "Information", MessageBoxButtons.OK);
         }
      }

      private void RadValidationProvider_ControlValidation(object sender, RadValidationEventArgs e)
      {
         if (!e.IsValid) { _image.DrawImage = false; }
         else { _image.DrawImage = true; }
      }

      #endregion Private Methods

 

Please fix my issue and attach code snippet as-well. Thanks

[Nadya | Tech Support Engineer]

Hello, Sathish,

Here is a sample code snippet how to add an icon to RadDropDownList:

radDropDownList1.DropDownListElement.Children[2].Children.Insert(1,image);
this.radDropDownList1.DropDownStyle = RadDropDownStyle.DropDownList;
this.radDropDownList1.ShowImageInEditorArea = true;
this.radDropDownList1.DropDownListElement.EditableElement.TextImageRelation = TextImageRelation.TextBeforeImage;
this.radDropDownList1.DropDownListElement.EditableElement.ImageAlignment = ContentAlignment.MiddleRight;

In addition, I would like to note that RadDropDownList has EditableElement which offers Image property. You can set the image directly to the EditableElement and then apply the other properties used above. You can use one of these suggested approaches.

this.radDropDownList1.DropDownListElement.EditableElement.Image = Properties.Resources.info;

I hope this helps. In case you have any other questions do not hesitate to contact me. 

[Sathish]

Hi Nadya.

Thanks for your answer.

This is working fine.

Thanks.

[Nadya | Tech Support Engineer]

Hello, Sathish,

Thank you for the additional information.

I would like to note that there is a ValidationMode property that controls when the validation logic will be performed for the associated control. The available options are None, OnValidating, OnTextChange, Programmatically. The default value is OnValidating. It is up to you when to validate the control. If you need to display the mandatory icon and text immediately after the form loads, you can force validation by calling the Validate method and passing the desired controls which you need to be validated. For example, you can do this on form' Shown event. Thus, desired controls will be validated when the form is firstly displayed. 

I prepared a sample demonstration for your reference. You can see the result in the attached gif file.

public RadForm1()
{
    InitializeComponent();

    RadValidationRule radValidationRule1 = new RadValidationRule();
    radValidationRule1.AutoToolTip = true;
    radValidationRule1.Controls.Add(this.radTextBox1);
    radValidationRule1.Operator = Telerik.WinControls.Data.FilterOperator.IsNotLike;
    radValidationRule1.ToolTipText = "Location can\'t be empty!";
    radValidationRule1.Value = "";

    this.radValidationProvider1.ValidationMode = ValidationMode.OnValidating;
    radValidationProvider1.ValidationRules.Add(radValidationRule1);
    this.radValidationProvider1.ControlValidation += RadValidationProvider1_ControlValidation;
}

private void RadValidationProvider1_ControlValidation(object sender, RadValidationEventArgs e)
{
    e.ErrorImage = Resources.info;
}

protected override void OnShown(EventArgs e)
{
    base.OnShown(e);
    this.radValidationProvider1.Validate(this.radTextBox1);
}

Keep in mind that the displayed image, as well as text, tooltips etc can be customized according to your needs.

I hope this helps. Let me know how this works for you.

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Sathish]

Hi, Nadya,

Thank you so much. This is what I was expecting.

Thank you 

[Sathish]

Hi, Nadya,

After going through your code, I understand what is happening here,

Again, you are doing same thing here. Only extra thing is you are changing the ErrorImage, that is also within ControlValidation event. But its working functionality is again same as before, which is not what I needed. 

Expected result:

I need Resources.Info icon immediately after the form load and I don't want below method for Validate control.

protected override void OnShown(EventArgs e)
{
    base.OnShown(e);
    this.radValidationProvider1.Validate(this.radTextBox1);
}

Instead, I want to validate control radValidationProvider1.Validate(radTextBox1) in Final Save Button.

• If validation is failed then instead of Resources.Info icon, Resources.Error Icon should appear next to the control.
• If validation is success then Resources.Info icon remains as it is, next to control.

I am not satisfied with the given answer.

Thanks

[Nadya | Tech Support Engineer]

Hello, Sathish,

According to the provided requirements I can suggest RadValidationProvider. RadValidationProvider is a component that provides data validation management for editors. It allows users to create various validation rules and associate them with editors derived from the RadEditorControl class. I would highly encourage to refer to the following help article demonstrating how to get started with RadValidationProvider and the examples about how to associate it with a RadTextBox and other controls: Getting Started - Validation Provider - Telerik UI for WinForms

In this Getting started article, there is a step-by-step tutorial demonstrating how to add a rule (IsNotLike empty string) for checking an empty RadTextBox control (see steps 5, 6, 7) which is similar to what you are trying to achieve. If the validation fails, an error message is displayed, showing an icon at the right:

It would be necessary to enter some text before proceeding further.

In addition, the ControlValidation event is fired. The RadValidationEventArgs offers the useful information about how to customize error indication. You can specify the ErrorImage, ErrorSvgImage, ValidationRule, Tooltip and other properties. Check the following article for more information: Customizing Error Indication - Validation Provider - Telerik UI for WinForms

I hope this information is useful. Let me know if you need further assistance.

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Sathish]

Hi Nadya

I am already aware of it. 

This sign appears later. But I want to show Sign without entering into the control (Immediately after the form load to all the controls which are Mandatory)

Like this:
     

Here at RunTime:

• First Name: Here I entered into the control and left the control blank then switched to other control. So, it shows what should happen after hovering the mouse on Red Icon (Error Icon).
• User Id, Password, Confirm Password: I have not even entered into those control So those are showing like Information which is Sign of Mandatory Field.

Me as a user: I don't like getting the warning messages, saying so-on-so field is Mandatory after hitting the final Save button. So, in this case. I want to show Information Sign on all Controls which are Mandatory once the form is opened.

Please let me know If you still have a doubt in my question.