ES-880782-NumericUpDownColumn KB Article

README.md

@@ -1,2 +1,79 @@
-# How-to-implement-NumericUpDown-inside-SfDataGrid-using-Custom-Column-support.
-How to implement NumericUpDown inside SfDataGrid using Custom Column support.
+# 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.
+
+ ```C#
+ 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.
+
+
+ ```C#
+ 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.
+
+
+ ```C#
+ public Form1()
+ {
+     InitializeComponent();
+     this.sfDataGrid1.CellRenderers.Add("NumericUpDown", new NumericUpDownCellRenderer(sfDataGrid1));
+ }
+ ```
+
+**Step 5** :  At last, finally, you can define the custom column in SfDataGrid.
+
+
+ ```C#
+ 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](https://support.syncfusion.com/kb/agent/attachment/article/15707/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIwNzUxIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.yG2J64WnfEu5VJbuOnqjv_4Po3p_Ce82_OS9tDfBzuw)
+
+Take a moment to peruse the [Winforms - DataGrid Custom Column Support UG Documentation](https://help.syncfusion.com/windowsforms/datagrid/columntypes#custom-column-support), to learn more about Custom Column support with examples.

SfDataGridDemo/SfDatagridDemo.sln

@@ -0,0 +1,31 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.3.32922.545
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SfDatagridDemo", "SfDatagridDemo\SfDatagridDemo.csproj", "{99A85163-E55E-4123-8981-E23545B8580E}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Debug-Xml|Any CPU = Debug-Xml|Any CPU
+		Release|Any CPU = Release|Any CPU
+		Release-Xml|Any CPU = Release-Xml|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{99A85163-E55E-4123-8981-E23545B8580E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{99A85163-E55E-4123-8981-E23545B8580E}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{99A85163-E55E-4123-8981-E23545B8580E}.Debug-Xml|Any CPU.ActiveCfg = Debug|Any CPU
+		{99A85163-E55E-4123-8981-E23545B8580E}.Debug-Xml|Any CPU.Build.0 = Debug|Any CPU
+		{99A85163-E55E-4123-8981-E23545B8580E}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{99A85163-E55E-4123-8981-E23545B8580E}.Release|Any CPU.Build.0 = Release|Any CPU
+		{99A85163-E55E-4123-8981-E23545B8580E}.Release-Xml|Any CPU.ActiveCfg = Release|Any CPU
+		{99A85163-E55E-4123-8981-E23545B8580E}.Release-Xml|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {E943C4E4-600F-4348-8CE2-6AA90A0A6684}
+	EndGlobalSection
+EndGlobal

SfDataGridDemo/SfDatagridDemo/App.config

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+    <startup> 
+        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.2"/>
+    </startup>
+</configuration>

SfDataGridDemo/SfDatagridDemo/Form1.cs

@@ -0,0 +1,41 @@
+using SfDatagridDemo.Renderer;
+using Syncfusion.WinForms.DataGrid;
+using Syncfusion.WinForms.DataGrid.Enums;
+using Syncfusion.WinForms.DataGrid.Renderers;
+using Syncfusion.WinForms.DataGrid.Styles;
+using Syncfusion.WinForms.GridCommon.ScrollAxis;
+using Syncfusion.WinForms.Input;
+using System;
+using System.Collections.Generic;
+using System.Collections.Specialized;
+using System.ComponentModel;
+using System.Data;
+using System.Drawing;
+using System.Linq;
+using System.Reflection;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Forms;
+
+namespace SfDatagridDemo
+{
+    public partial class Form1 : Form
+    {
+        ViewModel viewModel;
+        public Form1()
+        {
+            InitializeComponent();
+            sfDataGrid1.AutoGenerateColumns = false;
+
+            viewModel = new ViewModel();
+            this.sfDataGrid1.AllowEditing = true;
+            sfDataGrid1.DataSource = viewModel.OrdersListDetails;
+            this.sfDataGrid1.CellRenderers.Add("NumericUpDown", new NumericUpDownCellRenderer(sfDataGrid1));
+            this.sfDataGrid1.Columns.Add(new GridNumericColumn() { MappingName = "OrderID", HeaderText = "Order ID" });
+            this.sfDataGrid1.Columns.Add(new GridTextColumn() { MappingName = "CustomerID", HeaderText = "Customer ID" });
+            this.sfDataGrid1.Columns.Add(new GridNumericColumn() { MappingName = "Quantity", HeaderText = "Quantity" });
+            this.sfDataGrid1.Columns.Add(new NumericUpDownExtColumn() { MappingName = "NumericUpDown", HeaderText = "NumericUpDown", Width = 150 });
+        }
+    }
+
+}

SfDataGridDemo/SfDatagridDemo/Form1.resx

@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+</root>