Skip to content

How to implement NumericUpDown inside SfDataGrid using Custom Column support.

SyncfusionExamples/How-to-implement-NumericUpDown-inside-SfDataGrid-using-Custom-Column-support

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How to implement NumericUpDown inside SfDataGrid using Custom Column support.

To achieve the requirement of implementing 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.

NumericUpDown_Image.png

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

About

How to implement NumericUpDown inside SfDataGrid using Custom Column support.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages