This is a migrated thread and some comments may be shown as answers.

RadDateTimePicker background color

6 Answers 321 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Andrea
Top achievements
Rank 1
Andrea asked on 21 Dec 2015, 04:49 PM

Hello,

I will have a short intro explaining why i need that (maybe you can find an alternative) you may skip and go to the code.

i have a scenario like the folowing example:

There is a List of objects, its properties are unknown at compile time (dynamic objects built from database), say these objects only have one property, called ExpireDate.

The user is presented a list of objects (with their expiredate and maybe other properties).

The user wants to change the expiredate for many of these objects to a specific date, the program will let the user select all the objects that need to be changed and edit the expiredate value in one shot.

After the user selected the objects to be changed, the UI will show the user a label and a control for each property:

in our case the control to handle the datetime will have a gray background and a null value if the selected objects have different ExpireDate, will have a white background when the selected objects have all the same ExpireDate value. This way the user knows, looking at a control, if it is blank because all objects have null value or it is blank cause some objects have different values.

Said that, after some work, this was the prototype code:

private void InitializeControlsBackground()
{
    foreach (var c in panel.Controls.OfType<Control>())
    {
        if(EditorModel.GetProperties().OfType<MultiElement.MultiEditPropertyDescriptor>().Any(a=> a.Name == c.Name))
        {
            Color bg = EditorModel.HasManyValues(c.Name) ? Color.Gray : Color.White;
            c.BackColor = bg;
        }
    }
}

the problem is that for some controls the background color changes, but for (example) raddatetimepicker the background color does not change, how can I change the background color for the raddatetimepicker?

 

Best regards

Andrea

 

6 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 22 Dec 2015, 09:21 AM
Hi Andrea,

Thank you for writing.

RadControls are built on top of Telerik Presentation Framework, employing light-weight visual elements, allowing UI customization and delivering a WPF-like experience. Colors and many other visual settings may be defined also from themes or overridden at run-time. That is why in the case of some of the controls the back color from the control is not transferred onto the visual element and has to be introduced to the elements directly. Here is how to do this for RadDateTimePicker:
radDateTimePicker1.DateTimePickerElement.TextBoxElement.BackColor = Color.Red;
radDateTimePicker1.DateTimePickerElement.TextBoxElement.Fill.BackColor = Color.Red;

If you want to reset these settings, use the following method:
radDateTimePicker1.DateTimePickerElement.TextBoxElement.ResetValue(RadTextBoxElement.BackColorProperty, ValueResetFlags.Local);
radDateTimePicker1.DateTimePickerElement.TextBoxElement.Fill.ResetValue(FillPrimitive.BackColorProperty, ValueResetFlags.Local);

I hope that you find this information useful. Should you have any other questions, do not hesitate to contact us.

Regards,
Stefan
Telerik

0
Andrea
Top achievements
Rank 1
answered on 28 Dec 2015, 08:21 AM

Thank you that's working.

 

Andrea

0
Simon Hellings
Top achievements
Rank 1
answered on 22 Feb 2019, 12:56 AM

Hi;

I know this is an old thread but I have an extension issue to this.  It works fine if the DateTimePicker doesn't have checkbox to enable it, but if it does the background behind the checkbox doesn't fill in and the date itself shows white.

I'm obviously missing a property, but can't work out which!

I attach a screen shot for you to see.

Thanks

Simon

0
Hristo
Telerik team
answered on 22 Feb 2019, 02:09 PM
Hi Simon,

Indeed a different element is responsible for the checkbox and it can be accessed by the CheckBox property of the DateTimePickerElement. Please check below how you can access and modify the colors of all the elements building the checkbox: 
// Changes the color of the element holding the check box
this.radDateTimePicker1.DateTimePickerElement.CheckBox.ButtonFillElement.ShouldPaint = true;
this.radDateTimePicker1.DateTimePickerElement.CheckBox.ButtonFillElement.NumberOfColors = 1;
this.radDateTimePicker1.DateTimePickerElement.CheckBox.ButtonFillElement.BackColor = Color.Red;
 
// Changes the color of the border around the check mark
this.radDateTimePicker1.DateTimePickerElement.CheckBox.BorderElement.ShouldPaint = true;
this.radDateTimePicker1.DateTimePickerElement.CheckBox.BorderElement.ForeColor = Color.Green;
 
// Changes the color of the element holding the check mark primitive
this.radDateTimePicker1.DateTimePickerElement.CheckBox.CheckMarkPrimitive.Fill.NumberOfColors = 1;
this.radDateTimePicker1.DateTimePickerElement.CheckBox.CheckMarkPrimitive.Fill.BackColor = Color.Blue;
 
// Changes the color of the text part
this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.BackColor = Color.LightBlue;
this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.Fill.BackColor = Color.LightBlue;

I am also attaching a screenshot showing the result on my end.

I hope this will help. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Simon Hellings
Top achievements
Rank 1
answered on 23 Feb 2019, 01:42 PM

That's perfect, thank you.

I had one issue which seemed a bit odd (not the first time I have noticed this; must be a setting somewhere again!).

I first started configuring the colours and finding out the settings to apply using the "Edit UI elements" from the smart tag.

Where I had made mistakes (i.e. the colour I was setting wasn't what I wanted), I was setting those colours back to what I had changed them from (i.e. from white to red and back to white).

It appears that once a colour has been set in the designer that colours applied at runtime (i.e. in code) don't always take effect.

That's why my calls to the below weren't applying and I still had the white background for the text.

radDateTimePicker1.DateTimePickerElement.TextBoxElement.BackColor = Color.Red;
radDateTimePicker1.DateTimePickerElement.TextBoxElement.Fill.BackColor = Color.Red;

 

Removing the component and re-adding seems to resolve that.

0
Hristo
Telerik team
answered on 25 Feb 2019, 09:41 AM
Hello Simon,

I am glad that you managed to achieve the desired behavior. The Edit UI Elements dialog is really powerful as it serializes the settings applied to elements part of the visual tree of control in the Visual Studio designer. Please have in mind that some settings applied this way may be later overridden when the application starts the theme gets applied. In order to inspect the elements building the control, you can also use the RadControlSpyhttps://docs.telerik.com/devtools/winforms/tools/controlspy/controlspy. The spy is very useful while developing the application for inspecting the inner elements of the controls. 

Let me know if you have other questions.

Regards,
Hristo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DateTimePicker
Asked by
Andrea
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Andrea
Top achievements
Rank 1
Simon Hellings
Top achievements
Rank 1
Hristo
Telerik team
Share this question
or