Add mandatory Icon to Controls

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.

Hi, Nadya,

Can you please help with my issue in latest comment.

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.

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

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. 

Hi Nadya.

Thanks for your answer.

This is working fine.

Thanks.

Hi, Nadya,

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

Thank you 

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

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.