Using checkmark to change background color

3 posts, 0 answers
  1. bnooyen
    bnooyen avatar
    14 posts
    Member since:
    Jan 2007

    Posted 04 Jan 2007 Link to this post

    Simple enough, I would like to change the background color of the radCheckmark in a Checkbox depending on its click state.

    If it's on, color 1.
    If it's off, color 2.

    I've played with CheckState but just cannot seem to get it to work.  Could someone point me in the right direction that would showcase just how to do this, perhaps in the default checkbox theme?
  2. Mike
    Mike avatar
    640 posts

    Posted 04 Jan 2007 Link to this post

    Hello Brett,

    The tricky part is that RadCheckBox inherits most of its behavior and properties from the RadToggleButton control. Thus the property you should use to check if the checkbox is checked is called Telerik.WinControls.UI.RadToggleButtonElement.ToggleState

    In order to create a theme based on this property you should do the following:
    1. Load the RadCheckBox control in the VSB (you can optionally load the default theme as well)
    2. Select the Fill primitive inside the Checkmark element. Hint - zooming the preview would get you there much easier. 
    3. Add a new state and click the "edit" icon button on the state tab-item to open the state editor dialog.
    4. In the "apply condition" section select the split button's "Show Condition editor" option - the Condition builder dialog should appear
    5. In the property box, select or type in the full prop name , i.e.:
      Telerik.WinControls.UI.RadToggleButtonElement.ToggleState and select "On" for the Value

    Now the customizations you do to the properties of the fill-primitive would apply only when the "ToggleState = On" condition is met.

    Attached is an example theme that you may use as a starter.

    the telerik team
  3. bnooyen
    bnooyen avatar
    14 posts
    Member since:
    Jan 2007

    Posted 04 Jan 2007 Link to this post


    Thanks for your help and example, it's crystal clear now!

Back to Top