We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. WinForms
  4. Draw CheckBox control as RadioButton

Draw CheckBox control as RadioButton

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.

10 Replies
AR Arulpriya Ramalingam Syncfusion Team September 24, 2019 07:07 AM UTC

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; 
    } 
} 
 
 
Regards, 
Arulpriya 


RP Rafal Pawlowski September 24, 2019 11:08 AM UTC

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.

AR Arulpriya Ramalingam Syncfusion Team September 25, 2019 10:45 AM UTC

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; 
    } 
} 
 
 
Regards,  
Arulpriya 


RP Rafal Pawlowski September 26, 2019 02:19 PM UTC

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

AR Arulpriya Ramalingam Syncfusion Team September 27, 2019 09:04 AM UTC

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; 
    } 
} 
 
 
Regards, 
Arulpriya 


RP Rafal Pawlowski September 27, 2019 12:17 PM UTC

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

AR Arulpriya Ramalingam Syncfusion Team September 30, 2019 01:41 PM UTC

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 01st October, 2019. 
 
Regards, 
Arulpriya 


AR Arulpriya Ramalingam Syncfusion Team October 1, 2019 06:22 AM UTC

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); 
        } 
    } 
} 
 
 
Note Please refer to the below KB to work with custom cell models and get back to us, if you need further assistance. 
  
Regards, 
Arulpriya 


RP Rafal Pawlowski October 1, 2019 08:18 AM UTC

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.

AR Arulpriya Ramalingam Syncfusion Team October 1, 2019 01:56 PM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon