Is it possible to shape the checkbox inside the checkbox column

[özer]

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?

 

[Dess | Tech Support Engineer, Principal]

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

[özer]

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;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Dess | Tech Support Engineer, Principal]

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

[özer]

Yes!

That's exactly what he's looking for. 

Thank again Dess.

[özer]

He is my customer :)

[özer]

One more question:

Can I change the cursor on checkbox in checkboxcolumn?

[Dess | Tech Support Engineer, Principal]

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

[özer]

[quote]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).

[/quote]

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? 

 

[Dess | Tech Support Engineer, Principal]

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]

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, Principal]

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

[özer]

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?

[Dess | Tech Support Engineer, Principal]

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

[özer]

Hello Dess.

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