Is it possible to shape the checkbox inside the checkbox column

15 posts, 3 answers
  1. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

    Posted 24 Aug 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?

     

  2. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3952 posts

    Posted 24 Aug 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).

  3. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

    Posted 26 Aug 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;

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3952 posts

    Posted 26 Aug 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/.

  5. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

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

    Yes!

    That's exactly what he's looking for. 

    Thank again Dess.

  6. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

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

    He is my customer :)
  7. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

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

    One more question:

    Can I change the cursor on checkbox in checkboxcolumn?

  8. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3952 posts

    Posted 27 Aug 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).

  9. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

    Posted 27 Aug 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? 

     

  10. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3952 posts

    Posted 27 Aug 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

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

  11. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

    Posted 27 Aug 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?

     

  12. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3952 posts

    Posted 27 Aug 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).

  13. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

    Posted 27 Aug 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?

  14. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3952 posts

    Posted 28 Aug 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).

  15. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

    Posted 29 Aug 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.

Back to Top