Custom drawn CheckBox

[Milos]

Hello All,

I'm using demo version of your controls, and trying to create chekbox which will have different images for 3 states, checked, crossed, and none.
Is it something that this control already have? I din't managed to find resources for crossed image, and I also notice that checked state is drawned in code ( I guess ).
Can you help me with this ? I belive that only answer is custom draw on state change, do you have some samples?

Thanks in advance

[Boryana]

Hi Milos,

Thank you for contacting us. Please have a look at the following snippet:

        public Form1()
        {
            InitializeComponent();
            this.radCheckBox1.IsThreeState = true;
            ((RadCheckmark)this.radCheckBox1.ButtonElement.Children[1].Children[1]).AutoSize = false;
            ((RadCheckmark)this.radCheckBox1.ButtonElement.Children[1].Children[1]).Size = new Size(16, 16);
            ((CheckPrimitive)this.radCheckBox1.ButtonElement.Children[1].Children[1].Children[2]).AutoSize = false;
            ((CheckPrimitive)this.radCheckBox1.ButtonElement.Children[1].Children[1].Children[2]).Size = new Size(16,16);
        }

        void radCheckBox1_ToggleStateChange(object sender, MouseEventArgs e)
        {
            if (radCheckBox1.ToggleState == Telerik.WinControls.Enumerations.ToggleState.Indeterminate)
            {
                ((CheckPrimitive)this.radCheckBox1.ButtonElement.Children[1].Children[1].Children[2]).ForeColor = Color.Transparent;
                ((RadCheckmark)this.radCheckBox1.ButtonElement.Children[1].Children[1]).Image = null;
            }
            else
            {
                if (radCheckBox1.ToggleState == Telerik.WinControls.Enumerations.ToggleState.On)
                {
                    ((CheckPrimitive)this.radCheckBox1.ButtonElement.Children[1].Children[1].Children[2]).ForeColor = Color.Transparent;
                    ((RadCheckmark)this.radCheckBox1.ButtonElement.Children[1].Children[1]).Image = new Bitmap("BindingNavigatorDeleteItem.Image.png");
                }
                else
                {
                    if (radCheckBox1.ToggleState == Telerik.WinControls.Enumerations.ToggleState.Off)
                    {
                        ((CheckPrimitive)this.radCheckBox1.ButtonElement.Children[1].Children[1].Children[2]).ForeColor = Color.Green;

                    }
                }
            }
        }

RadCheckBox has a IsThreeState property that you can set to true. Further, you can implement the ToggleStateChange event, which is thrown every time the state of the RadCheckBox is changed. (You can find more information about this event here.) Thus, you will be able to control the image displayed in every state. In the above snippet I change the default green tick with an image of a red cross. Nevertheless, the example illustrates how you can customize your RadCheckBox according to your preferences.

I hope this helps. If you have further questions, do not hesitate to contact us back.

Kind regards,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Milos]

Thanks for help,
this is what I was looking for :).  Hard part was finding RadCheckmark object and path to BindingNavigationDeleteItem image.

Regards,
Milos

[Phillip]

Hi,

I have been trying to get this example to work, but with no success. My checkbox is IsThreeState==true and my event code is;

 

static void cb_ToggleStateChanged(object sender, Telerik.WinControls.UI.StateChangedEventArgs args)
        {
            Telerik.WinControls.UI.RadCheckBox radCheckBox = sender as Telerik.WinControls.UI.RadCheckBox;
            if (radCheckBox.ToggleState == Telerik.WinControls.Enumerations.ToggleState.Indeterminate)
            {
                ((Telerik.WinControls.UI.RadCheckmark)radCheckBox.ButtonElement.Children[1].Children[1]).Image = Properties.Resources.HelpDisabled16;
            }
            else if (radCheckBox.ToggleState == Telerik.WinControls.Enumerations.ToggleState.On)
            {
                ((Telerik.WinControls.UI.RadCheckmark)radCheckBox.ButtonElement.Children[1].Children[1]).Image = Properties.Resources.OK16;
            }
            else if (radCheckBox.ToggleState == Telerik.WinControls.Enumerations.ToggleState.Off)
            {
                ((Telerik.WinControls.UI.RadCheckmark)radCheckBox.ButtonElement.Children[1].Children[1]).Image = Properties.Resources.Delete16;
            }
            radCheckBox.Refresh();
        }

However the behaviour I get is;
ToggleState.On -> I get the correct image.
ToggleState.Indeterminate -> I get the correct image.
ToggleState.Off -> I get a blank image.

Any ideas what I'm doing wrong ?

Phillip

[Robert]

Hey Phillip,

Were you able to get the off state to work properly?

[Phillip Hamlyn]

Hi,

No - it remains on my bug-list to solve.

[Deyan]

Hello Phillip Hamlyn,

Thanks for writing. I would like to inform you that we were able to reproduce this issue and I have put it in our high-priority TODO list. Although I cannot promise that we will be able to provide a fix for Q3 2009, we will do our best. You can write back anytime you have further questions or feedback on our controls.

Best wishes,
Deyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.