How to implement NumericUpDown inside SfDataGrid using Custom Column support ?

By default, in SfDataGrid, there is no direct support for a NumericUpDown column, but we have a workaround using a custom column. To implement a NumericUpDown inside an SfDataGrid column, follow these steps:

Step 1 : Create a custom column by overriding a new class derived from the GridColumn class.

public class NumericUpDownExtColumn : GridColumn
{
    public NumericUpDownExtColumn()
    {
        SetCellType("NumericUpDown");
    }

}

Step 2 : After creating a custom column, you need to create a renderer for the custom column. You can create a custom renderer by deriving from the GridCellRendererBase class.

Step 3 : In the OnRender method, you can create a NumericUpDown control. Within this method, initialize the properties for the NumericUpDown control, and finally, add the declared control into the DataGrid TableControl.

You can add any other controls in the OnRender method by following this procedure based on your needs.

public class NumericUpDownCellRenderer : GridCellRendererBase
{
    public NumericUpDownCellRenderer(SfDataGrid dataGrid)
    {
        DataGrid = dataGrid;          
        IsInEditing = false;
    }
    protected SfDataGrid DataGrid { get; set; }

    protected override void OnRender(Graphics graphics, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex)
    {           
        var NumericUpDownExtControl = new NumericUpDown();
        NumericUpDownExtControl.TextAlign = System.Windows.Forms.HorizontalAlignment.Left;
        NumericUpDownExtControl.Value =Convert.ToDecimal(cellValue);
        NumericUpDownExtControl.Increment = new decimal(new int[] { 5, 0, 0, 0 });
        NumericUpDownExtControl.Minimum = new decimal(new int[] { 0, 0, 0, 0 });
        NumericUpDownExtControl.Maximum = new decimal(new int[] { 40, 0, 0, 0 });
        NumericUpDownExtControl.Font = new Font(NumericUpDownExtControl.Font.FontFamily, 14);
        NumericUpDownExtControl.Text = cellValue ?? string.Empty;
        NumericUpDownExtControl.Size = cellRect.Size;
        NumericUpDownExtControl.Location = cellRect.Location;
        DataGrid.GetTopLevelParentDataGrid().TableControl.Controls.Add(NumericUpDownExtControl);
    }
}

Step 4 : Then you can add the previously created custom renderer to the SfDataGrid.CellRenderers collection.

public Form1()
{
    InitializeComponent();
    this.sfDataGrid1.CellRenderers.Add("NumericUpDown", new NumericUpDownCellRenderer(sfDataGrid1));
}

Step 5 : At last, finally, you can define the custom column in SfDataGrid.

public Form1()
{
    InitializeComponent();
    this.sfDataGrid1.Columns.Add(new NumericUpDownExtColumn() { MappingName = "NumericUpDown", HeaderText = "NumericUpDown"});
}

By following the above code, the output image is as referenced below.

Take a moment to peruse the Winforms - DataGrid Custom Column Support UG Documentation, to learn more about Custom Column support with examples.

View sample in GitHub