RadDateTimePicker background color

7 posts, 1 answers
  1. Andrea
    Andrea avatar
    73 posts
    Member since:
    Oct 2012

    Posted 21 Dec 2015 Link to this post

    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

     

  2. Answer
    Stefan
    Admin
    Stefan avatar
    2911 posts

    Posted 22 Dec 2015 Link to this post

    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

  3. Andrea
    Andrea avatar
    73 posts
    Member since:
    Oct 2012

    Posted 28 Dec 2015 in reply to Stefan Link to this post

    Thank you that's working.

     

    Andrea

  4. Simon Hellings
    Simon Hellings avatar
    2 posts
    Member since:
    Nov 2013

    Posted 21 Feb 2019 Link to this post

    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

  5. Hristo
    Admin
    Hristo avatar
    1520 posts

    Posted 22 Feb 2019 Link to this post

    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.
  6. Simon Hellings
    Simon Hellings avatar
    2 posts
    Member since:
    Nov 2013

    Posted 23 Feb 2019 Link to this post

    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.

  7. Hristo
    Admin
    Hristo avatar
    1520 posts

    Posted 25 Feb 2019 Link to this post

    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.
Back to Top