diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/frozen.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/frozen.cs new file mode 100644 index 0000000000..d7ac3aa3f2 --- /dev/null +++ b/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(); +} diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/razor new file mode 100644 index 0000000000..cbb08a9ecd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/razor @@ -0,0 +1,31 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)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() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/tagHelper new file mode 100644 index 0000000000..1b0850fa11 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/tagHelper @@ -0,0 +1,35 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md index 3997a6273d..9291a9f729 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md +++ b/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 diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md index 953a487fcb..3464dfef50 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md +++ b/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 diff --git a/ej2-asp-core-mvc/grid/images/columns/frozen-datepicker.jpg b/ej2-asp-core-mvc/grid/images/columns/frozen-datepicker.jpg new file mode 100644 index 0000000000..665473d8c1 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/frozen-datepicker.jpg differ