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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Draw CheckBox control as RadioButton

Thread ID:

Created:

Updated:

Platform:

Replies:

147758 Sep 23,2019 12:15 PM UTC Oct 1,2019 01:56 PM UTC WinForms 10
loading
Tags: GridGroupingControl
Rafal Pawlowski
Asked On September 23, 2019 12:15 PM UTC

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 [Syncfusion]
Replied On 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 


Rafal Pawlowski
Replied On 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.

Arulpriya Ramalingam [Syncfusion]
Replied On 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 


Rafal Pawlowski
Replied On 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

Arulpriya Ramalingam [Syncfusion]
Replied On 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 


Rafal Pawlowski
Replied On 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).

Arulpriya Ramalingam [Syncfusion]
Replied On 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 


Arulpriya Ramalingam [Syncfusion]
Replied On 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 


Rafal Pawlowski
Replied On 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.

Arulpriya Ramalingam [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon