This is a migrated thread and some comments may be shown as answers.

Is it possible to shape the checkbox inside the checkbox column

14 Answers 473 Views
GridView
This is a migrated thread and some comments may be shown as answers.
özer
Top achievements
Rank 2
Veteran
Iron
özer asked on 24 Aug 2020, 07:33 PM

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?

 

14 Answers, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 25 Aug 2020, 04:54 AM

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).

0
özer
Top achievements
Rank 2
Veteran
Iron
answered on 26 Aug 2020, 11:40 AM

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;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 26 Aug 2020, 12:38 PM

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/.

0
özer
Top achievements
Rank 2
Veteran
Iron
answered on 26 Aug 2020, 02:12 PM

Yes!

That's exactly what he's looking for. 

Thank again Dess.

0
özer
Top achievements
Rank 2
Veteran
Iron
answered on 26 Aug 2020, 02:15 PM
He is my customer :)
0
özer
Top achievements
Rank 2
Veteran
Iron
answered on 26 Aug 2020, 02:26 PM

One more question:

Can I change the cursor on checkbox in checkboxcolumn?

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Aug 2020, 08:40 AM

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).

0
özer
Top achievements
Rank 2
Veteran
Iron
answered on 27 Aug 2020, 10:09 AM

[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? 

 

0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Aug 2020, 11:21 AM

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

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/.

0
özer
Top achievements
Rank 2
Veteran
Iron
answered on 27 Aug 2020, 12:21 PM

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?

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Aug 2020, 12:28 PM

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).

0
özer
Top achievements
Rank 2
Veteran
Iron
answered on 27 Aug 2020, 05:25 PM

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?

0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 28 Aug 2020, 09:03 AM
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).

0
özer
Top achievements
Rank 2
Veteran
Iron
answered on 29 Aug 2020, 11:11 AM

Hello Dess.

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

Tags
GridView
Asked by
özer
Top achievements
Rank 2
Veteran
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
özer
Top achievements
Rank 2
Veteran
Iron
Share this question
or