diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/hide-date.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/hide-date.cs new file mode 100644 index 0000000000..d95e7d13aa --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/hide-date.cs @@ -0,0 +1,7 @@ + public IActionResult Index() + { + ViewBag.DataSource = OrdersDetails.GetAllRecords(); + return View(); + } + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/razor new file mode 100644 index 0000000000..87f6966a80 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/razor @@ -0,0 +1,20 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").ValidationRules(new { required = "true", number = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").ValidationRules(new { required = "true" }).Width("120").Add(); + col.Field("Freight").HeaderText("Freight").EditType("numericedit").ValidationRules(new { required = "true", min = 1, max = 1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("ShipCity").HeaderText("Ship City").ValidationRules(new { required = "true" }).EditType("dropdownedit").Width("150").Add(); + col.Field("OrderDate").HeaderText("Order Date").ValidationRules(new { required = true }).Width("150").EditType("datepickeredit").Format("MM-dd-yyy").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); +}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).ActionBegin("actionBegin").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/tagHelper new file mode 100644 index 0000000000..264cf062ed --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/hide-date/tagHelper @@ -0,0 +1,22 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/aggregates/group-and-caption-aggregate.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/aggregates/group-and-caption-aggregate.md index b5dbf33aa4..4306c8fada 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/aggregates/group-and-caption-aggregate.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/aggregates/group-and-caption-aggregate.md @@ -1,6 +1,6 @@ --- layout: post -title: Group and Caption Aggregate in ##Platform_Name## Grid Component +title: Group and Caption Aggregate in Syncfusion ##Platform_Name## Grid Component description: Learn here all about Group and Caption Aggregate in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Group and Caption Aggregate @@ -68,4 +68,4 @@ In some cases, you may want to disable the page-wise aggregates for grouping in {% endhighlight %} {% endtabs %} -![Disable page wise aggregates for grouping](../images/aggregates/group-disable-page.gif) +![Disable page wise aggregates for grouping](../images/aggregates/group-disable-page.gif) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/edit-types.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/edit-types.md index 4d665ad3d2..203e34624b 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/edit-types.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/edit-types.md @@ -181,7 +181,7 @@ The following sample demonstrates how to open the popup when focusing on the edi {% endhighlight %} {% endtabs %} -![Customize dropdown edit type](../images/editing/dropdown-popup.gif) +![Customize dropdown edit type](../images/editing/dropdown-popup.png) ## Customize CheckBox component of booleanedit type @@ -225,6 +225,23 @@ The following sample code demonstrates the customization applied to DatePicker c ![Customize date picker edit type](../images/editing/datepicker-edit-type.png) +### Disable the date value prior to the selected date value in DatePicker control + +The Syncfusion Grid allows configuring the [DatePicker](../../datepicker) control to dynamically set a minimum date for selection. This feature ensures that users can select dates only from a specified minimum date onward, based on the context of each row's data. This functionality is particularly useful in maintaining data accuracy by preventing users from selecting invalid or illogical dates. + +The following example demonstrates how to configure the `DatePicker` control within the grid using the **edit** parameters of a column. This setup dynamically restricts the selection of dates in the DatePicker's calendar based on the data in the current row. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/hide-date/razor %} +{% endhighlight %} +{% highlight c# tabtitle="hide-date.cs" %} +{% include code-snippet/grid/edit/hide-date/hide-date.cs %} +{% endhighlight %} +{% endtabs %} + +![Disable the date value](../images/editing/hide-date.png) + ## Customize DateTimePicker component of datetimepickeredit type You can customize the DateTimePicker component in Grid edit form using its property. This customization allows you to configure various properties of the DateTimePicker, tailoring its behavior and appearance to match your specific requirements within the Grid. The behavior of the editor component can be fine-tuned through the `Columns->Edit->Params` property. @@ -376,7 +393,7 @@ The following example demonstrates how to render images in the DropDownList edit {% endhighlight %} {% endtabs %} -![Render drop down list component with image](../images/editing/dropdown-with-image.png) +![Render drop down list component with image](../images/editing/dropdown-with-image.jpeg) ### Render Multiple columns in DropDownList component @@ -454,7 +471,7 @@ The following example demonstrates how to render a MultiSelect component in the {% endhighlight %} {% endtabs %} -![Render multiselect component](../images/editing/render-multiselect-dropdown.gif) +![Render multiselect component](../images/editing/render-multiselect-dropdown.jpeg) ### Render RichTextEditor component in edit form @@ -475,7 +492,7 @@ The following example demonstrates how to render a RichTextEditor component in t {% endhighlight %} {% endtabs %} -![Render richtext editor component](../images/editing/render-richtext-editor.gif) +![Render richtext editor component](../images/editing/render-richtext-editor.jpeg) ### Render Upload component in edit form @@ -494,7 +511,7 @@ The following example demonstrates how to render a Upload control in the **Emplo {% endhighlight %} {% endtabs %} -![Render Upload component in edit form](../images/editing/edit-types-upload.gif) +![Render Upload component in edit form](../images/editing/edit-types-upload.jpeg) ### Render AutoComplete component in edit form diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/group-and-caption-aggregate.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/group-and-caption-aggregate.md index 0d1832267a..0366540d01 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/group-and-caption-aggregate.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/group-and-caption-aggregate.md @@ -1,6 +1,6 @@ --- layout: post -title: Group and Caption Aggregate in ##Platform_Name## Grid Component +title: Group and Caption Aggregate in Syncfusion ##Platform_Name## Grid Component description: Learn here all about Group and Caption Aggregate in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Group and Caption Aggregate diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/edit-types.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/edit-types.md index dd125c3be5..ed1b0125a9 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/edit-types.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/edit-types.md @@ -181,7 +181,7 @@ The following sample demonstrates how to open the popup when focusing on the edi {% endhighlight %} {% endtabs %} -![Customize dropdown edit type](../images/editing/dropdown-popup.gif) +![Customize dropdown edit type](../images/editing/dropdown-popup.png) ## Customize CheckBox component of booleanedit type @@ -225,6 +225,23 @@ The following sample code demonstrates the customization applied to DatePicker c ![Customize date picker edit type](../images/editing/datepicker-edit-type.png) +### Disable the date value prior to the selected date value in DatePicker control + +The Syncfusion Grid allows configuring the [DatePicker](../../datepicker) control to dynamically set a minimum date for selection. This feature ensures that users can select dates only from a specified minimum date onward, based on the context of each row's data. This functionality is particularly useful in maintaining data accuracy by preventing users from selecting invalid or illogical dates. + +The following example demonstrates how to configure the `DatePicker` control within the grid using the **edit** parameters of a column. This setup dynamically restricts the selection of dates in the DatePicker's calendar based on the data in the current row. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/hide-date/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="hide-date.cs" %} +{% include code-snippet/grid/edit/hide-date/hide-date.cs %} +{% endhighlight %} +{% endtabs %} + +![Disable the date value](../images/editing/hide-date.png) + ## Customize DateTimePicker component of datetimepickeredit type You can customize the DateTimePicker component in Grid edit form using its property. This customization allows you to configure various properties of the DateTimePicker, tailoring its behavior and appearance to match your specific requirements within the Grid. The behavior of the editor component can be fine-tuned through the `columns->edit->params` property. @@ -376,7 +393,7 @@ The following example demonstrates how to render images in the DropDownList edit {% endhighlight %} {% endtabs %} -![Render drop down list component with image](../images/editing/dropdown-with-image.png) +![Render drop down list component with image](../images/editing/dropdown-with-image.jpeg) ### Render Multiple columns in DropDownList component @@ -454,7 +471,7 @@ The following example demonstrates how to render a MultiSelect component in the {% endhighlight %} {% endtabs %} -![Render multiselect component](../images/editing/render-multiselect-dropdown.gif) +![Render multiselect component](../images/editing/render-multiselect-dropdown.jpeg) ### Render RichTextEditor component in edit form @@ -475,7 +492,7 @@ The following example demonstrates how to render a RichTextEditor component in t {% endhighlight %} {% endtabs %} -![Render richtext editor component](../images/editing/render-richtext-editor.gif) +![Render richtext editor component](../images/editing/render-richtext-editor.jpeg) ### Render Upload component in edit form @@ -494,7 +511,7 @@ The following example demonstrates how to render a Upload control in the **Emplo {% endhighlight %} {% endtabs %} -![Render Upload component in edit form](../images/editing/edit-types-upload.gif) +![Render Upload component in edit form](../images/editing/edit-types-upload.jpeg) ### Render AutoComplete component in edit form diff --git a/ej2-asp-core-mvc/grid/images/editing/dropdown-popup.gif b/ej2-asp-core-mvc/grid/images/editing/dropdown-popup.gif deleted file mode 100644 index 651708300a..0000000000 Binary files a/ej2-asp-core-mvc/grid/images/editing/dropdown-popup.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/grid/images/editing/dropdown-popup.png b/ej2-asp-core-mvc/grid/images/editing/dropdown-popup.png new file mode 100644 index 0000000000..d0b6b87caf Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dropdown-popup.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/dropdown-with-image.jpeg b/ej2-asp-core-mvc/grid/images/editing/dropdown-with-image.jpeg new file mode 100644 index 0000000000..93e0662e64 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dropdown-with-image.jpeg differ diff --git a/ej2-asp-core-mvc/grid/images/editing/dropdown-with-image.png b/ej2-asp-core-mvc/grid/images/editing/dropdown-with-image.png deleted file mode 100644 index 9e5a651249..0000000000 Binary files a/ej2-asp-core-mvc/grid/images/editing/dropdown-with-image.png and /dev/null differ diff --git a/ej2-asp-core-mvc/grid/images/editing/edit-types-upload.gif b/ej2-asp-core-mvc/grid/images/editing/edit-types-upload.gif deleted file mode 100644 index 270228ad3f..0000000000 Binary files a/ej2-asp-core-mvc/grid/images/editing/edit-types-upload.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/grid/images/editing/edit-types-upload.jpeg b/ej2-asp-core-mvc/grid/images/editing/edit-types-upload.jpeg new file mode 100644 index 0000000000..4b49373503 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/edit-types-upload.jpeg differ diff --git a/ej2-asp-core-mvc/grid/images/editing/hide-date.png b/ej2-asp-core-mvc/grid/images/editing/hide-date.png new file mode 100644 index 0000000000..a7b3200383 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/hide-date.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/render-multiselect-dropdown.gif b/ej2-asp-core-mvc/grid/images/editing/render-multiselect-dropdown.gif deleted file mode 100644 index a779a30feb..0000000000 Binary files a/ej2-asp-core-mvc/grid/images/editing/render-multiselect-dropdown.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/grid/images/editing/render-multiselect-dropdown.jpeg b/ej2-asp-core-mvc/grid/images/editing/render-multiselect-dropdown.jpeg new file mode 100644 index 0000000000..84b4bebbf5 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/render-multiselect-dropdown.jpeg differ diff --git a/ej2-asp-core-mvc/grid/images/editing/render-richtext-editor.gif b/ej2-asp-core-mvc/grid/images/editing/render-richtext-editor.gif deleted file mode 100644 index 53c68c51db..0000000000 Binary files a/ej2-asp-core-mvc/grid/images/editing/render-richtext-editor.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/grid/images/editing/render-richtext-editor.jpeg b/ej2-asp-core-mvc/grid/images/editing/render-richtext-editor.jpeg new file mode 100644 index 0000000000..63754ab18a Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/render-richtext-editor.jpeg differ