940725: Added the topic of Render DatePicker in frozen columns in Grid

ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/frozen.cs

@@ -0,0 +1,6 @@
+public IActionResult DefaultExporting()
+{
+    var order = OrdersDetails.GetAllRecords();
+    ViewBag.dataSource = order;
+    return View();
+}

ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/razor

@@ -0,0 +1,31 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).FrozenColumns(2).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Edit(new { create = "createDatePicker", read = "readDatePicker", destroy = "destroyDatePicker", write = "writeDatePicker" }).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
+}).AllowPaging().PageSettings(page=>page.PageCount(5)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+<script>
+    var datePickerObj;
+    var datePickerElement;
+    function createDatePicker() {
+        datePickerElement = document.createElement('input');
+        return datePickerElement;
+    }
+    function readDatePicker() {
+        return datePickerObj.value;
+    }
+    function destroyDatePicker() {
+        datePickerObj.destroy();
+    }
+    function writeDatePicker(args) {
+        var rowData = args.rowData;
+        datePickerObj = new ej.calendars.DatePicker({
+            value: rowData.OrderDate,
+            change: function (e) {
+                rowData.OrderDate = e.value;
+            }
+        });
+        datePickerObj.appendTo(datePickerElement);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/tagHelper

@@ -0,0 +1,35 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" allowPaging='true' toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" frozenColumns='2'>
+    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
+    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" width="150" format= "yMd", edit="@(new {create = "createDatePicker", read = "readDatePicker", destroy = "destroyDatePicker", write = "writeDatePicker"})">
+        </e-grid-column>               
+        <e-grid-column field="CustomerID" headerText="CustomerID" width="120"></e-grid-column>               
+        <e-grid-column field="ShipCity" headerText="Ship City"  width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    var datePickerObj;
+    var datePickerElement;
+    function createDatePicker() {
+        datePickerElement = document.createElement('input');
+        return datePickerElement;
+    }
+    function readDatePicker() {
+        return datePickerObj.value;
+    }
+    function destroyDatePicker() {
+        datePickerObj.destroy();
+    }
+    function writeDatePicker(args) {
+        var rowData = args.rowData;
+        datePickerObj = new ej.calendars.DatePicker({
+            value: rowData.OrderDate,
+            change: function (e) {
+                rowData.OrderDate = e.value;
+            }
+        });
+        datePickerObj.appendTo(datePickerElement);
+    }
+</script>

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md

@@ -122,6 +122,26 @@ The following example demonstrates how to change the default frozen line color u
 
 ![Change default frozen line color](../images/column-chooser/frozon-color.png)
 
+## Render DatePicker in frozen columns in Grid
+
+The Syncfusion Grid allows rendering a [DatePicker](https://ej2.syncfusion.com/aspnetmvc/documentation/datepicker/getting-started) inside frozen columns during editing. This is achieved using the `edit` property, where a custom editor (DatePicker) is assigned to the specific column.
+
+To integrate a `DatePicker` in a frozen column, configure the column’s `edit` property with custom `create`, `write`, `read`, and `destroy` methods. These methods ensure that the `DatePicker` initializes, retrieves, and destroys correctly within the frozen column.
+
+The following example demonstrates how to render the `DatePicker` in the **OrderDate** column while keeping it frozen. Here the datepicker object is appended to the corresponding input element in the editing row.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-datepicker/razor %}
+{% endhighlight %}
+
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-datepicker/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![DatePicker in Frozen columns](../images/columns/frozen-datepicker.jpg)
+
 ## Deprecated methods 
 
 Previous | Current | Explanation 

ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md

@@ -122,6 +122,26 @@ The following example demonstrates how to change the default frozen line color u
 
 ![Change default frozen line color](../images/column-chooser/frozon-color.png)
 
+## Render DatePicker in frozen columns in Grid
+
+The Syncfusion Grid allows rendering a [DatePicker](https://ej2.syncfusion.com/aspnetcore/documentation/datepicker/getting-started) inside frozen columns during editing. This is achieved using the `edit` property, where a custom editor (DatePicker) is assigned to the specific column.
+
+To integrate a `DatePicker` in a frozen column, configure the column’s `edit` property with custom `create`, `write`, `read`, and `destroy` methods. These methods ensure that the `DatePicker` initializes, retrieves, and destroys correctly within the frozen column.
+
+The following example demonstrates how to render the `DatePicker` in the **OrderDate** column while keeping it frozen. Here the datepicker object is appended to the corresponding input element in the editing row.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-datepicker/tagHelper %}
+{% endhighlight %}
+
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-datepicker/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![DatePicker in Frozen columns](../images/columns/frozen-datepicker.jpg)
+
 ## Deprecated methods 
 
 Previous | Current | Explanation