Telerik Forums / UI for WinForms Forum / GridView /

Is it possible to shape the checkbox inside the checkbox column

Telerik UI for WinForms
Resources Buy Try

15 posts, 3 answers

özer

33 posts

Member since:
Jun 2020
Posted 24 Aug 2020 Link to this post

Hi.

We can change the shape of the radcheckbox object. Star, circle, diamond etc. we can give shapes. But is it possible to shape the checkbox inside the checkbox column?

Ek Açıklama 2020-08-24 223321.jpg
Answer
Dess | Tech Support Engineer, Sr.
Admin

4166 posts
Posted 24 Aug 2020 Link to this post

Hi, özer,
RadGridView offers the CellFormatting event which allows you to customize the cell elements. You can cast the cell to GridCheckBoxCellElement and thus access the RadCheckBoxEditorElement in order to change its shape:
StarShape shape = new StarShape(); private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e) { GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement; if (checkBoxCell!=null) { RadCheckBoxEditor editor = checkBoxCell.Editor as RadCheckBoxEditor; RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement; el.Checkmark.Shape = shape; } }
I hope this information helps. If you need any further assistance please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
özer

33 posts

Member since:
Jun 2020
Posted 26 Aug 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

hi Dess
Thank you for your help
So how can I set different background colors for the checked and unchecked states of these chackboxes? And how can I hide the check mark?
I tried something like this but couldn't reach my goal:

private void rgvLinkList_CellFormatting(object sender, CellFormattingEventArgs e)

        {



            GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;

            if (checkBoxCell != null)

            {

                RadCheckBoxEditor editor = checkBoxCell.Editor as RadCheckBoxEditor;

                RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement;

                el.Checkmark.Shape = shape;

                el.Checkmark.MinSize = new Size(20, 20);

                FillPrimitive fp = new FillPrimitive();

                fp.BackColor = Color.OrangeRed;

                fp.NumberOfColors = 1;



                el.Checkmark.Children.Add(fp);



                CheckPrimitive cp = new CheckPrimitive();

                cp.DrawFill = true;

                cp.Visibility = ElementVisibility.Visible;

                cp.BackColor = Color.Yellow;

                cp.NumberOfColors = 1;

                cp.UseFixedCheckSize = true;

                cp.ForeColor = Color.Transparent;

                cp.MinSize = new Size(20, 20);

                cp.StretchVertically = true;

                cp.StretchVertically = true;



                el.Checkmark.Children.Add(cp);

            }

        }

I can do this in any checkbox not in GridView. As follows:

// radCheckBox1

           //

           this.radCheckBox1.Location = new System.Drawing.Point(1, 12);

           this.radCheckBox1.Name = "radCheckBox1";

           this.radCheckBox1.Size = new System.Drawing.Size(128, 52);

           this.radCheckBox1.TabIndex = 0;

           this.radCheckBox1.Text = "radCheckBox1";

           ((Telerik.WinControls.UI.RadCheckBoxElement)(this.radCheckBox1.GetChildAt(0))).Text = "radCheckBox1";

           ((Telerik.WinControls.Primitives.FillPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(0))).Shape = null;

           ((Telerik.WinControls.UI.CheckBoxLayoutPanel)(this.radCheckBox1.GetChildAt(0).GetChildAt(1))).Enabled = true;

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).UseDefaultDisabledPaint = true;

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).EnableFocusBorderAnimation = true;

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).EnableBorderHighlight = false;

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).CustomFontSize = 1F;

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).AutoSize = true;

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).Enabled = true;

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).Shape = this.starShape1;

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).MinSize = new System.Drawing.Size(50, 50);

           ((Telerik.WinControls.UI.RadCheckmark)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).UseCompatibleTextRendering = true;

           ((Telerik.WinControls.Primitives.FillPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(0))).NumberOfColors = 1;

           ((Telerik.WinControls.Primitives.FillPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(0))).BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(255)))), ((int)(((byte)(10)))), ((int)(((byte)(10)))));

           ((Telerik.WinControls.Primitives.BorderPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(1))).Enabled = false;

           ((Telerik.WinControls.Primitives.BorderPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(1))).Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

           ((Telerik.WinControls.Primitives.CheckPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).DrawFill = true;

           ((Telerik.WinControls.Primitives.CheckPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).UseFixedCheckSize = true;

           ((Telerik.WinControls.Primitives.CheckPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).ForeColor = System.Drawing.Color.Transparent;

           ((Telerik.WinControls.Primitives.CheckPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).AutoSize = true;

           ((Telerik.WinControls.Primitives.CheckPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).Visibility = Telerik.WinControls.ElementVisibility.Visible;

           ((Telerik.WinControls.Primitives.CheckPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).StretchHorizontally = true;

           ((Telerik.WinControls.Primitives.CheckPrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).StretchVertically = true;

           ((Telerik.WinControls.Primitives.ImagePrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(3))).ShouldPaint = true;

           ((Telerik.WinControls.Primitives.ImagePrimitive)(this.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(3))).Visibility = Telerik.WinControls.ElementVisibility.Hidden;

           //

           // starShape1

           //

           this.starShape1.Arms = 5;

           this.starShape1.InnerRadiusRatio = 0.375F;

checkbox.gif

Dess | Tech Support Engineer, Sr.

Admin

4166 posts

Posted 26 Aug 2020 Link to this post

Hello, özer,

In order to customize the fill color for the check box inside the GridCheckBoxCellElement, you can use the following code snippet:

        StarShape shape = new StarShape();
        private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;
            if (checkBoxCell!=null)
            {
                RadCheckBoxEditor editor = checkBoxCell.Editor as RadCheckBoxEditor;
                RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement;
                el.Checkmark.Shape = shape;
                el.Checkmark.CheckElement.CheckPrimitiveStyle = Telerik.WinControls.Enumerations.CheckPrimitiveStyleEnum.None;
                el.Checkmark.Fill.GradientStyle = GradientStyles.Solid;
                if (el.CheckState== Telerik.WinControls.Enumerations.ToggleState.On)
                {
                    el.Checkmark.Fill.BackColor = Color.Green;
                }
                else
                {
                    el.Checkmark.Fill.BackColor = Color.Red;
                }
            }
        }

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

özer

33 posts

Member since:
Jun 2020

Posted 26 Aug 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Yes!

That's exactly what he's looking for.

Thank again Dess.
özer

33 posts

Member since:
Jun 2020

Posted 26 Aug 2020 in reply to özer Link to this post

He is my customer :)
özer

33 posts

Member since:
Jun 2020

Posted 26 Aug 2020 in reply to özer Link to this post

One more question:

Can I change the cursor on checkbox in checkboxcolumn?

Dess | Tech Support Engineer, Sr.

Admin

4166 posts

Posted 27 Aug 2020 Link to this post

Hello, özer,

In order to change the cursor when the cursor is over the check box, you can handle the CellMouseMove event and detect what is the element under the mouse:

        public RadForm1()
        {
            InitializeComponent();

            this.radGridView1.CellMouseMove += RadGridView1_CellMouseMove;
        }

        private void RadGridView1_CellMouseMove(object sender, MouseEventArgs e)
        {
            RadCheckmark elementUnderMouse = this.radGridView1.ElementTree.GetElementAtPoint(e.Location) as RadCheckmark;
            if (elementUnderMouse != null)
            {
                this.radGridView1.Cursor = Cursors.Hand; 
            }
            else
            {
                this.radGridView1.Cursor = Cursors.Default;
            }
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

özer

33 posts

Member since:
Jun 2020
Posted 27 Aug 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Dess | Tech Support Engineer, Sr. said:

Hello, özer,

In order to change the cursor when the cursor is over the check box, you can handle the CellMouseMove event and detect what is the element under the mouse:

public RadForm1() { InitializeComponent(); this.radGridView1.CellMouseMove += RadGridView1_CellMouseMove; } private void RadGridView1_CellMouseMove(object sender, MouseEventArgs e) { RadCheckmark elementUnderMouse = this.radGridView1.ElementTree.GetElementAtPoint(e.Location) as RadCheckmark; if (elementUnderMouse != null) { this.radGridView1.Cursor = Cursors.Hand; } else { this.radGridView1.Cursor = Cursors.Default; } }

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Hello Dess.

I think the telerik can do anything but "find a remedy for death" :)

So, can the shape of the checkbox object in the filter cell also change?

filter checkbox.jpg

Answer

Dess | Tech Support Engineer, Sr.

Admin

4166 posts

Posted 27 Aug 2020 Link to this post

Hello, özer,

If you want to apply the star shape for the check box in the filter cell, it is necessary to handle the ViewCellFormatting event and move the code from the CellFormatting event to the ViewCellFormatting event addressing the filter cell as well.

        private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
        {
            GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;
            GridFilterCheckBoxCellElement filterCheckBoxCell = e.CellElement as GridFilterCheckBoxCellElement;
            if (checkBoxCell != null || filterCheckBoxCell!=null)
            {
                RadCheckBoxEditor editor = ((GridDataCellElement)e.CellElement).Editor as RadCheckBoxEditor;
                RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement;
                el.Checkmark.Shape = shape;
                el.Checkmark.CheckElement.CheckPrimitiveStyle = Telerik.WinControls.Enumerations.CheckPrimitiveStyleEnum.None;
                el.Checkmark.Fill.GradientStyle = GradientStyles.Solid;
                if (el.CheckState == Telerik.WinControls.Enumerations.ToggleState.On)
                {
                    el.Checkmark.Fill.BackColor = Color.Green;
                }
                else
                {
                    el.Checkmark.Fill.BackColor = Color.Red;
                }
            }
        }

The main difference between these two events is that while the CellFormatting event handles only the data cells, the ViewCellFormatting affects the system cells as well.

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

özer

33 posts

Member since:
Jun 2020

Posted 27 Aug 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Hello again Dess.

So if I want to format data cells separately and system cells separately, I have to handle both CellFormatting and ViewCellFormatting events.

In the current situation, the filter chekbox is exactly the same as the others. At the same time, the "ThreeState" feature of the filter checkbox seems to be disabled.

Can we format the three states (select all, select checkeds, select uncheckeds) of the filter checkbox separately?
Dess | Tech Support Engineer, Sr.
Admin

4166 posts

Posted 27 Aug 2020 Link to this post

Hello, özer,
You can use only the ViewCellFormatting event as it will be fired for both, the data cells and system cells as well. You can consider the row/cell type and apply the desired settings to the cell element.
The checkbox column has a specific property that controls whether three states are enabled:
Additional information about the available properties in the GridViewCheckBoxColumn is available here: https://docs.telerik.com/devtools/winforms/controls/gridview/columns/column-types/gridviewcheckboxcolumn
If you need any further assistance, please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
özer

33 posts

Member since:
Jun 2020
Posted 27 Aug 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Hello, Dess.
I guess I couldn't express the problem correctly. Sometimes my English is insufficient and I get help from Google Translator :)
When I said Three State, I actually meant that the filter checkbox looks different for "select checked", "select unchecked" and "select all".
Currently my star-shaped filter checkbox object looks the same for "select all" and "select unchecked" states.

Is three different formatting possible for three different situations, similar to the attached picture?

filter checkbox.fw

Answer

Dess | Tech Support Engineer, Sr.

Admin

4166 posts

Posted 28 Aug 2020 Link to this post

Hello, özer,

You can apply the desired RadCheckBoxEditorElement.Checkmark.Fill.BackColor property considering the RadCheckBoxEditorElement.CheckState value. The following code snippet demonstrates how to apply three different color for the star shape:

        private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
        {
            GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;
            GridFilterCheckBoxCellElement filterCheckBoxCell = e.CellElement as GridFilterCheckBoxCellElement;
            if (checkBoxCell != null || filterCheckBoxCell!=null)
            {
                RadCheckBoxEditor editor = ((GridDataCellElement)e.CellElement).Editor as RadCheckBoxEditor;
                RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement;
                el.Checkmark.Shape = shape;
                el.Checkmark.CheckElement.CheckPrimitiveStyle = Telerik.WinControls.Enumerations.CheckPrimitiveStyleEnum.None;
                el.Checkmark.Fill.GradientStyle = GradientStyles.Solid;
                if (el.CheckState == Telerik.WinControls.Enumerations.ToggleState.On)
                {
                    el.Checkmark.Fill.BackColor = Color.Green;

                    el.Checkmark.CheckElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
                    el.Checkmark.CheckElement.ResetValue(LightVisualElement.NumberOfColorsProperty, ValueResetFlags.Local);
                    el.Checkmark.CheckElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
                    el.Checkmark.CheckElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
                }
                else if (el.CheckState == Telerik.WinControls.Enumerations.ToggleState.Off)
                {
                    el.Checkmark.Fill.BackColor = Color.Red;

                    el.Checkmark.CheckElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
                    el.Checkmark.CheckElement.ResetValue(LightVisualElement.NumberOfColorsProperty, ValueResetFlags.Local);
                    el.Checkmark.CheckElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
                    el.Checkmark.CheckElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
                }
                else
                {
                    el.Checkmark.Fill.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);

                    el.Checkmark.CheckElement.BackColor = Color.Black;
                    el.Checkmark.CheckElement.NumberOfColors = 1;
                    el.Checkmark.CheckElement.GradientStyle = GradientStyles.Solid;
                    el.Checkmark.CheckElement.ForeColor = Color.Transparent;
                }
            }
        }

I have attached my sample project for your reference as well.

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

özer

33 posts

Member since:
Jun 2020

Posted 29 Aug 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Hello Dess.

Yes, now it is exactly what I wanted. Thank you again.