How to create a Toggle switch column in WinForms DataGrid?

In WinForms DataGrid (SfDataGrid) ,there is no direct support for a Toggle switch column. However, this functionality can be achieved by using custom column support to create a new GridColumn for the toggle button and creating a custom renderer for the custom column (toggle button).

A custom renderer was derived from the GridCellRendererBase class. In OnRender method, draw the toggle button and implement the toggle button function (switch function) by overriding the OnMouseUp method. This approach ensures that the toggle state is updated in the data source.

public class GridToggleButtonColumn : GridColumn
{
    public GridToggleButtonColumn()
    {
        SetCellType("ToggleButton");
    }
}

protected override void OnRender(Graphics graphics, Rectangle cellRect, string cellValue, CellStyleInfo cellStyle, DataColumnBase column, RowColumnIndex rowColumnIndex)
{
    graphics.SmoothingMode = SmoothingMode.AntiAlias;
    object value = cellValue;
    isToggled = value != null && Convert.ToBoolean(value);

    int toggleWidth = 65;
    int toggleHeight = 25;
    int circleSize = 20;
    int padding = 4;
    int x = cellRect.X + (cellRect.Width - toggleWidth) / 2;
    int y = cellRect.Y + (cellRect.Height - toggleHeight) / 2;

    toggleBounds = new Rectangle(x, y, toggleWidth, toggleHeight);

    Rectangle circleBounds = new Rectangle(
        isToggled ? (x + toggleWidth - circleSize - padding - 3) : (x + padding),
        y + padding,
        circleSize,
        circleSize
    );    

    using (GraphicsPath path = new GraphicsPath())
    {
        path.AddArc(toggleBounds.X, toggleBounds.Y, toggleHeight, toggleHeight, 90, 180);
        path.AddArc(toggleBounds.Right - toggleHeight, toggleBounds.Y, toggleHeight, toggleHeight, -90, 180);
        path.CloseFigure();
       
        using (SolidBrush brush = new SolidBrush(isToggled ? Color.RoyalBlue : Color.White))
        {
            graphics.FillPath(brush, path);
            // Draw outer border around the toggle switch
            using (GraphicsPath borderPath = new GraphicsPath())
            {
                borderPath.AddArc(toggleBounds.X, toggleBounds.Y, toggleHeight, toggleHeight, 90, 180);
                borderPath.AddArc(toggleBounds.Right - toggleHeight, toggleBounds.Y, toggleHeight, toggleHeight, -90, 180);
                borderPath.CloseFigure();

                using (Pen borderPen = new Pen(Color.Gray, 2)) 
                {
                    if(!isToggled)
                        graphics.DrawPath(borderPen, borderPath);
                }
            }
        }
    }

    SolidBrush textBrush;
    using (Font font = new Font("Arial", 9, FontStyle.Bold))
    {
        string text = isToggled ? "ON" : "OFF";
        textBrush = isToggled ? new SolidBrush(Color.White) : new SolidBrush(Color.Gray);
        SizeF textSize = graphics.MeasureString(text, font);
        PointF textPosition = new PointF(
            isToggled ? (toggleBounds.X + 5) : (toggleBounds.Right - textSize.Width - 5),
            toggleBounds.Y + (toggleBounds.Height - textSize.Height) / 2
        );

        graphics.DrawString(text, font, textBrush, textPosition);
    }

    if (isToggled)            
        graphics.FillEllipse(new SolidBrush(Color.White), circleBounds);            
    else
        graphics.FillEllipse(new SolidBrush(Color.Gray), circleBounds);     
}

protected override void OnMouseUp(DataColumnBase dataColumn, RowColumnIndex rowColumnIndex, MouseEventArgs e)
{
    var record = dataGrid.GetRecordAtRowIndex(rowColumnIndex.RowIndex);
    var provider = dataGrid.View.GetPropertyAccessProvider();
    var value = provider.GetValue(record, dataColumn.GridColumn.MappingName);
    bool toggleValue = value != null && (bool)value;

    provider.SetValue(record, dataColumn.GridColumn.MappingName, !toggleValue);
    this.TableControl.Invalidate();
}

Take a moment to peruse the WinForms DataGrid - Custom Column Support documentation, where you can find about custom column support with code examples.

View sample in GitHub

Conclusion

I hope you enjoyed learning how to create a Toggle switch column in WinForms DataGrid?.

You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our WinForms DataGrid example to understand how to create and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to create a Toggle switch column in WinForms DataGrid?

Access denied