Draw CheckBox control as RadioButton

[Rafal Pawlowski]

I am using GridGrouping control, which has CheckBox cell. Is it possible to make it look like RadioButton? Cell behavior would be the same, only appearance would be changed.

[Arulpriya Ramalingam]

Hi Rafal, 

 

Thanks for your interest in Syncfusion products. 

 

In order to customize the appearance of a cell, the TableControlDrawCell event can be customized. In that event the cells can be draw based on the requirement using the cell graphics. We have created a simple sample as per your use case and please make use of the below code and sample. 

 

Code example 

 

//Event triggering 

gridGroupingControl1.TableControlDrawCell += GridGroupingControl1_TableControlDrawCell; 

 

//Event subscription 

private void GridGroupingControl1_TableControlDrawCell(object sender, GridTableControlDrawCellEventArgs e) 

{ 

    if (e.Inner.Style.CellType == "CheckBox") 

    { 

        Rectangle rect = e.Inner.Bounds; 

        Rectangle circleRect = new Rectangle(rect.X + 2, rect.Y + 2, 14, 14); 

        //To draw the circles 

        e.Inner.Graphics.DrawEllipse(Pens.Black, circleRect); 

        circleRect.Inflate(-3, -3); 

        e.Inner.Graphics.DrawEllipse(Pens.Black, circleRect); 

        //To fil the circle if the cell state is checked. 

        if(e.Inner.Style.CellValue.ToString() == "true") 

            e.Inner.Graphics.FillEllipse(Brushes.Black, circleRect); 

        else 

            e.Inner.Graphics.FillEllipse(new SolidBrush(e.Inner.Style.BackColor), circleRect); 

        //To restrict drawing the check box from base. 

        e.Inner.Cancel = true; 

    } 

} 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomCheckBox-29065916  

 

Regards, 

Arulpriya 

[Rafal Pawlowski]

Thank you for answer, unfortunately that doesn't work. Custom drawing like that does not respond to being clicked or supports Office2007Themes like RadioButtonAdv or CheckBox cell does.

[Arulpriya Ramalingam]

Hi Rafal, 

 

Thanks for the update. 

 

As per the GridCells behavior, the themes are rendered through DrawCell event based on the cell type. In order to draw the cell with theme style, the color of border and background can be updated based on the theme. Moreover, the CheckBox click event is working fine at our end and we suspect that the issue might be occurred due to some other customization on your application. So, please refer to the attached sample and let us know the code part that causes the issue at your end. So that, we could analyze further to provide you a better solution. 

 

Code example 

 

//Event subscription 

private void GridGroupingControl1_TableControlDrawCell(object sender, GridTableControlDrawCellEventArgs e) 

{ 

    if (e.Inner.Style.CellType == "CheckBox") 

    { 

        Rectangle rect = e.Inner.Bounds; 

        Rectangle circleRect = new Rectangle(rect.X + 2, rect.Y + 2, 11, 11); 

        using (Pen pen = new Pen(Off2007Colors.CheckBoxOuterBorderColorHot)) 

        { 

            //To draw the circles 

            e.Inner.Graphics.DrawEllipse(pen, circleRect); 

            circleRect.Inflate(-2, -2); 

            e.Inner.Graphics.DrawEllipse(pen, circleRect); 

 

        } 

        LinearGradientBrush br = new LinearGradientBrush(circleRect, Color.FromArgb(198, 235, 254), Color.FromArgb(8, 130, 198), LinearGradientMode.ForwardDiagonal); 

        //To fil the circle if the cell state is checked. 

        if (e.Inner.Style.CellValue.ToString() == "true") 

            e.Inner.Graphics.FillEllipse(br, circleRect); 

        else 

            e.Inner.Graphics.FillEllipse(new SolidBrush(e.TableControl.ThemeStyle.RadioButtonStyle.CheckedColor), circleRect); 

 

        //To restrict drawing the check box from base. 

        e.Inner.Cancel = true; 

    } 

} 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DrawCheckBox133586235  

Class reference for 2007theme colors: https://help.syncfusion.com/cr/windowsforms/Syncfusion.Shared.Base~Syncfusion.Windows.Forms.Office2007Colors_fields.html  

 

Regards,  

Arulpriya 

[Rafal Pawlowski]

Hello,

I checked attached sample and it doesn't work. It seems there is some misunderstanding regarding requirements.

Instead I am attaching sample code with mock application.

I also attached a picture with what should expected result look like. Please note the following:

-Radio buttons on the picture in the grid look like RadioButtonAdv above the grid (respecting Office2007Theme)

-Radio buttons are centered

-In the sample code check boxes work like radio buttons in that only one can be checked within each child group.

Attachment: GridGrouping_43eedfd2.zip

[Arulpriya Ramalingam]

Hi Rafal, 

 

Thanks for the update. 

 

We have analyzed your requirement and modified the sample by adjusting the rectangle of the radio button based on checkbox location in the cell. The cell click and checked state are working fine with the below solution and please refer to the below code and sample. 

 

Code example 

 

private void GridGroupingControl1_TableControlDrawCell(object sender, GridTableControlDrawCellEventArgs e) 

{ 

    if (e.Inner.Style.CellType == "CheckBox") 

    { 

        Rectangle rect = e.Inner.Bounds; 

        int checkBoxPosition = (rect.Width - 16) / 2; 

        Rectangle circleRect = new Rectangle(rect.X + checkBoxPosition, rect.Y + 2, 11, 11); 

        using (Pen pen = new Pen(Off2007Colors.CheckBoxOuterBorderColorHot)) 

        { 

            //To draw the circles  

            e.Inner.Graphics.DrawEllipse(pen, circleRect); 

            circleRect.Inflate(-2, -2); 

            e.Inner.Graphics.DrawEllipse(pen, circleRect); 

        } 

        //Some code 

        e.Inner.Cancel = true; 

    } 

} 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridGrouping777507132  

 

Regards, 

Arulpriya 

[Rafal Pawlowski]

I checked provided solution and unfortunately it is incorrect.

It has changed check boxes also on parent items, which is wrong - it was supposed to change them only on children items. Also, radio button appearance is different than RadioButtonAdv above the grid. It looks different both checked and unchecked and does not respond to hover (when you hover over RadioButtonAdv control, it changes its appearance). My request is to have radio buttons in grid rendered same way as RadioButtonAdv (since I previously had check box cells and they rendered same way as CheckBoxAdv control).

[Arulpriya Ramalingam]

Hi Rafal,  

  

Sorry for the inconvenience.  

 

We have achieved your requirement that the RadioButtonStyle for ChildTable alone but we need some more time to update the RadioButton style based on button state (checked, hover and flat) since, the color and button state for rendering the radio button are updated in source level. And the e.Cancel is called to restrict the checkbox and radiobutton overriding. So, we will check the possibility to update the style in an optimized way and update you the details by tomorrow 01^st October, 2019. 

 

Regards, 

Arulpriya 

[Arulpriya Ramalingam]

Hi Rafal,  

    

Thanks for your patience.  

 

We have modified the sample as per your requirement by creating a custom renderer to draw the checkbox as radiobutton only for the child tables. The DrawCheckBoxStyle method of CheckBoxCellRenderer can be overridden to draw the radio button instead of check box. Please make use of the code and sample. 

 

Code example 

 

protected override void DrawCheckBox(Graphics g, Rectangle clientBounds, GridStyleInfo style, ButtonState state, ContentAlignment align, string text, Font font) 

{ 

    GridTableControl tb = this.Grid as GridTableControl; 

    if(tb != null) 

    { 

        if(tb.Table.RelationParentTable == null) 

        { 

            base.DrawCheckBox(g, clientBounds, style, state, align, text, font); 

        } 

        else 

        { 

            int checkBoxPosition = (clientBounds.Width - 16) / 2; 

            Rectangle circleRect = new Rectangle(clientBounds.X + checkBoxPosition, clientBounds.Y + 2, 17, 17); 

            //To draw the radio button for child table 

            this.Grid.Model.Options.GridVisualStylesDrawing.DrawRadioStyle(g, circleRect, state); 

        } 

    } 

} 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridGrouping_(2)-1383096436  

 

Note Please refer to the below KB to work with custom cell models and get back to us, if you need further assistance. 

https://help.syncfusion.com/windowsforms/grid/cell-types#creating-a-custom-cell-type  

  

Regards, 

Arulpriya 

[Rafal Pawlowski]

Thank you for provided solution.

It seems to mostly satisfy requirements, though it also needed modification in DrawCheckBox method to consider vertical alignment too, but it was easy to add given existing code.

You can consider issue resolved for now.

[Arulpriya Ramalingam]

Hi Rafal, 

 

Thanks for the update. 

 

We are glad that the reported use case is resolved at your end. Please get back to us, if you need any further assistance. 

 

Regards, 

Arulpriya