diff --git a/ej2-asp-core-mvc/code-snippet/grid/aggregate/aggregates-multiple/aggregate.cs b/ej2-asp-core-mvc/code-snippet/grid/aggregate/aggregates-multiple/aggregate.cs new file mode 100644 index 0000000000..d9ebad91a3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/aggregate/aggregates-multiple/aggregate.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/aggregate/aggregates-multiple/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/aggregate/aggregates-multiple/tagHelper new file mode 100644 index 0000000000..2983db92ba --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/aggregate/aggregates-multiple/tagHelper @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/complexbinding.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/complexbinding.cs new file mode 100644 index 0000000000..d7e5bea049 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/complexbinding.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = ComplexData.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/razor new file mode 100644 index 0000000000..3e745ebf7a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/razor @@ -0,0 +1,7 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("350px").Columns(col => +{ + col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("Names.0.FirstName").HeaderText("First Name").Width("120").Add(); + col.Field("Names.0.LastName").HeaderText("Last Name").Width("120").Add(); + col.Field("Title").HeaderText("Title").Width("150").Add(); +}).Render() diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/tagHelper new file mode 100644 index 0000000000..87086801cb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/tagHelper @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/foreignkey.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/foreignkey.cs index d1de390ab0..624cb16328 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/foreignkey.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/foreignkey.cs @@ -1,9 +1,6 @@ public IActionResult DefaultExporting() { - var order = OrdersDetails.GetAllRecords(); - ViewBag.DataSource = order; - - var emp = EmployeeView.GetAllRecords(); - ViewBag.foreign = emp; + ViewBag.DataSource = OrdersDetails.GetAllRecords(); + ViewBag.EmployeeData = EmployeeView.GetAllRecords(); return View(); } diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/razor index f2c1d36f09..1c819b473a 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/razor @@ -1,8 +1,7 @@ -@Html.EJS().Grid("ForeignKey").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("Employee.EmployeeID").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource((IEnumerable)ViewBag.foreign).HeaderText("Employee Name").Width("150").Add(); + col.Field("Employee.EmployeeID").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource((IEnumerable)ViewBag.EmployeeData).HeaderText("Employee Name").Width("150").Add(); col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); - }).Render() diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/tagHelper index a767358ee4..044b66b2c8 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/tagHelper @@ -1,7 +1,7 @@ - + - + diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/columnvalid.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/columnvalid.cs deleted file mode 100644 index 32b41ca162..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/columnvalid.cs +++ /dev/null @@ -1,8 +0,0 @@ - public IActionResult Index() - { - var orders = OrderDetails.GetAllRecords(); - ViewBag.DataSource = orders; - return View(); - } - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/razor deleted file mode 100644 index ab947cda59..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/razor +++ /dev/null @@ -1,9 +0,0 @@ -@Html.EJS().Grid("Validation").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => -{ - col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength=3 }).Add(); - col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); - col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); - -}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/tagHelper deleted file mode 100644 index d3c91acdca..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/columnvalid/tagHelper +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/commandcolumn.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/commandcolumn.cs index 30cc231a66..3f41497f9f 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/commandcolumn.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/commandcolumn.cs @@ -1,8 +1,7 @@ - public IActionResult Index() - { - var orders= OrderDetails.GetAllRecords(); - ViewBag.DataSource = orders; - return View(); - } +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/razor index 3a316ee94a..ec886dfce3 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/razor @@ -6,13 +6,11 @@ commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); } -@Html.EJS().Grid("CommandColumn").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add(); - col.HeaderText("Manage Records").Width("160").Commands(commands).Add(); - -}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render() \ No newline at end of file + col.HeaderText("Commands").Width("160").Commands(commands).Add(); +}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/tagHelper index e276642a0e..3e9de1d093 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/tagHelper @@ -7,14 +7,14 @@ commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); } - + - + - - + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/dropdown-params.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/dropdown-params.cs new file mode 100644 index 0000000000..d95e7d13aa --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/dropdown-params.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/custom-data-params/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/razor new file mode 100644 index 0000000000..2b097d9303 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/razor @@ -0,0 +1,21 @@ +@{ + ViewBag.DropDownData = new List + { + new { Country = "United States"}, + new { Country = "Australia" }, + new { Country = "India" }, + new { Country = "Germany" }, + new { Country = "France" }, + new { Country = "Brazil" } + }; + var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.DropDownData, Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Country", Text = "Country" } }; +} + +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Edit(new { @params = DropDownList }).Add(); +}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).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/edit/custom-data-params/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/tagHelper new file mode 100644 index 0000000000..3a5e9deeb3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/tagHelper @@ -0,0 +1,22 @@ +@{ + ViewBag.DropDownData = new List + { + new { Country = "United States"}, + new { Country = "Australia" }, + new { Country = "India" }, + new { Country = "Germany" }, + new { Country = "France" }, + new { Country = "Brazil" } + }; + var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.DropDownData, Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Country", Text = "Country" } }; +} + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/customcommand.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/customcommand.cs index 44e8d7f53a..bf01da4519 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/customcommand.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/customcommand.cs @@ -1,8 +1,7 @@ - public IActionResult Index() - { - var orders = OrdersDetails.GetAllRecords(); - ViewBag.DataSource = orders; - return View(); - } +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/customcommand/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/razor index 98a1501eba..1303ee39d0 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/razor @@ -1,22 +1,38 @@ @{ List commands = new List(); - commands.Add(new { type = "userstatus", buttonOption = new { content = "Details", cssClass = "e-flat" } }); + commands.Add(new { buttonOption = new { content = "Details", cssClass = "e-flat" } }); } -@Html.EJS().Grid("CustomCommand").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +
+@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add(); col.HeaderText("Commands").Width("160").Commands(commands).Add(); - -}).AllowPaging().CommandClick("commandClick").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render() - +}).CommandClick("commandClick").Render(); diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper index 10535c80de..9b0bfdb60f 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper @@ -1,21 +1,38 @@ @{ List commands = new List(); - commands.Add(new { type = "userstatus", buttonOption = new { content = "Details", cssClass = "e-flat e-details" } }); // custom + commands.Add(new { buttonOption = new { content = "Details", cssClass = "e-flat" } }); } - -
- - +
+ - - - + + + + + -
- diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customvalidation/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/customvalidation/razor deleted file mode 100644 index 8f03235139..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/customvalidation/razor +++ /dev/null @@ -1,22 +0,0 @@ - -@Html.EJS().Grid("CustomValid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => -{ - col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); - col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); - col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add(); - -}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Load("load").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/edit/customvalidation/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/customvalidation/tagHelper deleted file mode 100644 index f5a43cca1c..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/customvalidation/tagHelper +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/addpatial.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/addpatial.cs index b79cd9bab7..75e7dc7111 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/addpatial.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/addpatial.cs @@ -1,8 +1,4 @@ -@model TestApplication.Models.OrdersDetails -@*//define the model for store the model values*@ - -@using Syncfusion.EJ2 - +@model Grid_Columns.Pages.DialogTemplateModel
@@ -20,7 +16,6 @@ @using Syncfusion.EJ2
-
@@ -29,13 +24,11 @@ @using Syncfusion.EJ2
-
-
@@ -53,5 +46,4 @@ @using Syncfusion.EJ2
- \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/addpatialMVC.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/addpatialMVC.cs index ec8150b39f..7c9bbff6cd 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/addpatialMVC.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/addpatialMVC.cs @@ -1,9 +1,4 @@ -@model MVCApplication.Models.OrdersDetails -@*//define the model for store the model values*@ - -@using Syncfusion.EJ2 -@using Syncfusion.EJ2.DropDowns - +@using Syncfusion.EJ2;
@@ -21,34 +16,30 @@ @using Syncfusion.EJ2.DropDowns
-
- @Html.EJS().NumericTextBox("Freight").Format("C2").Placeholder("Freight").Render() + @Html.EJS().NumericTextBox("Freight").Format("C2").Placeholder("Freight").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
- @Html.EJS().DatePicker("OrderDate").Placeholder("Order Date").Render() + @Html.EJS().DatePicker("OrderDate").Placeholder("Order Date").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
-
- @Html.EJS().DropDownList("ShipCountry").DataSource(ViewBag.dataSource).Placeholder("Ship Country").Fields(new DropDownListFieldSettings { Text = "ShipCountry", Value = "ShipCountry" }).Render() - + @Html.EJS().DropDownList("ShipCountry").DataSource(ViewBag.dataSource).Placeholder("Ship Country").Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCountry", Value = "ShipCountry" }).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
- @Html.EJS().DropDownList("ShipCity").DataSource(ViewBag.dataSource).Placeholder("Ship City").Fields(new DropDownListFieldSettings { Text = "ShipCity", Value = "ShipCity" }).Render() + @Html.EJS().DropDownList("ShipCity").DataSource(ViewBag.dataSource).Placeholder("Ship City").Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCity", Value = "ShipCity" }).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
- + @Html.TextArea("ShipAddress")
- @Html.EJS().ScriptManager() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialog.cs index 56866e749c..a3f8141fba 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialog.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialog.cs @@ -1,20 +1,17 @@ public IActionResult Index() { - var Order = OrderDetails.GetAllRecords(); - ViewBag.DataSource = Order; + ViewBag.DataSource =OrderDetails.GetAllRecords(); return View(); } public ActionResult Editpartial(DialogTemplateModel value) { - var order = OrdersDetails.GetAllRecords(); - ViewBag.datasource = order; - return PartialView("Editpartial", value); + ViewBag.datasource = OrdersDetails.GetAllRecords(); + return PartialView("EditPartial", value); } public ActionResult AddPartial() { - var order = OrdersDetails.GetAllRecords(); - ViewBag.datasource = order; - return PartialView("Addpartial"); + ViewBag.datasource = OrdersDetails.GetAllRecords(); + return PartialView("AddPartial"); } diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialogData.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialogData.cs new file mode 100644 index 0000000000..e15bd23154 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialogData.cs @@ -0,0 +1,36 @@ + +public IActionResult Index() +{ + ViewBag.DataSource =OrderDetails.GetAllRecords(); + return View(); +} +public ActionResult OnPostEditPartial([FromBody] CRUDAction value) +{ + ViewData["DataSource"] = OrdersDetails.GetAllRecords(); + return new PartialViewResult + { + ViewName = "_EditPartial", + ViewData = new ViewDataDictionary(ViewData, value.value) + }; +} +public ActionResult OnPostAddPartial() +{ + ViewData["DataSource"] = OrdersDetails.GetAllRecords(); + return new PartialViewResult + { + ViewName = "_AddPartial" + }; +} +public class CRUDAction where T : class +{ + public string? action { get; set; } + public string? table { get; set; } + public string? keyColumn { get; set; } + public object? key { get; set; } + public T? value { get; set; } + public List? added { get; set; } + public List? changed { get; set; } + public List? deleted { get; set; } + public IDictionary @params { get; set; } + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialogtemplatemodel.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialogtemplatemodel.cs index 9121ff79d0..ed0c8784ab 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialogtemplatemodel.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/dialogtemplatemodel.cs @@ -1,28 +1,17 @@ -using System; -using System.Collections.Generic; -using System.ComponentModel.DataAnnotations; -using System.Linq; -using System.Web; - -namespace EJ2MVCSampleBrowser.Models +public class DialogTemplateModel { - public class DialogTemplateModel - { - [Required] - public int? OrderID { get; set; } - [Required, MinLength(3)] - public string CustomerID { get; set; } - public int? EmployeeID { get; set; } - public double Freight { get; set; } - public string ShipCity { get; set; } - public bool Verified { get; set; } - public DateTime OrderDate { get; set; } - - public string ShipName { get; set; } - - public string ShipCountry { get; set; } - - public DateTime ShippedDate { get; set; } - public string ShipAddress { get; set; } - } + [Required] + public int? OrderID { get; set; } + [Required, MinLength(3)] + public string CustomerID { get; set; } + public int? EmployeeID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public bool Verified { get; set; } + public DateTime OrderDate { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + public DateTime ShippedDate { get; set; } + public string ShipAddress { get; set; } } + diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/editpartial.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/editpartial.cs index 6f144e65f5..aa0bbb2a3f 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/editpartial.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/editpartial.cs @@ -1,8 +1,4 @@ -@model TestApplication.Models.OrdersDetails -@*//define the model for store the model values*@ - -@using Syncfusion.EJ2 - +@model Grid_Columns.Pages.DialogTemplateModel
@@ -20,7 +16,6 @@ @using Syncfusion.EJ2
-
@@ -29,16 +24,15 @@ @using Syncfusion.EJ2
-
- +
- +
@@ -53,5 +47,4 @@ @using Syncfusion.EJ2
- \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs index 88519b6048..110e4872d7 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs @@ -1,9 +1,4 @@ -@model MVCApplication.Models.OrdersDetails -@*//define the model for store the model values*@ - -@using Syncfusion.EJ2 -@using Syncfusion.EJ2.DropDowns - +@using Syncfusion.EJ2;
@@ -21,33 +16,30 @@ @using Syncfusion.EJ2.DropDowns
-
- @Html.EJS().NumericTextBox("Freight").Value(Model.Freight).Format("C2").Placeholder("Freight").Render() + @Html.EJS().NumericTextBox("Freight").Value(Model.Freight).Format("C2").Placeholder("Freight").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
- @Html.EJS().DatePicker("OrderDate").Value(Model.OrderDate).Placeholder("Order Date").Render() + @Html.EJS().DatePicker("OrderDate").Value(Model.OrderDate).Placeholder("Order Date").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
-
- @Html.EJS().DropDownList("ShipCountry").DataSource(ViewBag.dataSource).Value(Model.ShipCountry).Placeholder("Ship Country").Fields(new DropDownListFieldSettings { Text = "ShipCountry", Value = "ShipCountry" }).Render() + @Html.EJS().DropDownList("ShipCountry").DataSource(ViewBag.dataSource).Value(Model.ShipCountry).Placeholder("Ship Country").Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCountry", Value = "ShipCountry" }).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
- @Html.EJS().DropDownList("ShipCity").DataSource(ViewBag.dataSource).Value(Model.ShipCity).Placeholder("Ship City").Fields(new DropDownListFieldSettings { Text = "ShipCity", Value = "ShipCity" }).Render() + @Html.EJS().DropDownList("ShipCity").DataSource(ViewBag.dataSource).Value(Model.ShipCity).Placeholder("Ship City").Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCity", Value = "ShipCity" }).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
- + @Html.TextArea("ShipAddress")
- @Html.EJS().ScriptManager() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/razor index 31dd5dbda7..af0832262e 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/razor @@ -1,46 +1,57 @@ -@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable)ViewBag.DataSource).ActionComplete("actionComplete").Columns(col => +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).ActionComplete("actionComplete").Height("348px").Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); - col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add(); - -}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() - - + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); +}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).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/edit/dialogtemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/tagHelper index 74265846c5..635a1be3c6 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialogtemplate/tagHelper @@ -1,57 +1,61 @@ -@{ - ViewData["Title"] = "DialogTemplate"; -} - -
- - - - - - - - - -
- +@Html.AntiForgeryToken() + + + + + + + + - - + diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/edit-upload/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/edit-upload/razor new file mode 100644 index 0000000000..1f221347ac --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/edit-upload/razor @@ -0,0 +1,69 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => +{ + col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = "true" }).Add(); + col.Field("FirstName").HeaderText("First Name").ValidationRules(new { required = true }).Width("120").Add(); + col.Field("LastName").HeaderText("Last Name").ValidationRules(new { required = true }).Width("120").Add(); + col.Field("Title").HeaderText("Title").ValidationRules(new { required = true }).Width("130").Add(); + col.HeaderText("Employee Image").Template("#template").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("130").Add(); +}).ActionBegin("actionBegin").AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).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/edit/edit-upload/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/edit-upload/tagHelper new file mode 100644 index 0000000000..ada79847c1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/edit-upload/tagHelper @@ -0,0 +1,71 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/edit-upload/upload.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/edit-upload/upload.cs new file mode 100644 index 0000000000..f297b66bbd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/edit-upload/upload.cs @@ -0,0 +1,5 @@ +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/tabediting/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/dialog.cs index da9dcb1404..d9ebad91a3 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/dialog.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/dialog.cs @@ -1,6 +1,5 @@ public IActionResult Index() { - var Order = OrderDetails.GetAllRecords(); - ViewBag.DataSource = Order; + ViewBag.DataSource = OrderDetails.GetAllRecords(); return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/razor index 8959202e67..e3762692a3 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/razor @@ -1,19 +1,20 @@ -@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable)ViewBag.DataSource).ActionComplete("actionComplete").Columns(col => +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).ActionComplete("actionComplete").Height("348px").Columns(col => { - col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add(); - col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add(); - -}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).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/edit/tabediting/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/tagHelper index dbe4ed9263..b0b9595de9 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/tabediting/tagHelper @@ -1,115 +1,125 @@ -@{ - ViewData["Title"] = "DialogTemplate"; -} - -
- - - - - - - - - -
- - - - + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-add-remove/columnvalid.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-add-remove/columnvalid.cs new file mode 100644 index 0000000000..b05a68da4f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-add-remove/columnvalid.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + return View(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-add-remove/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-add-remove/razor new file mode 100644 index 0000000000..eb3cefd683 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-add-remove/razor @@ -0,0 +1,26 @@ +
+ @Html.EJS().CheckBox("checkbox").Label("Enable/Disable validation rule for customerID coulumn").Checked(true).Render() +
+@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = "true", min=1, max=1000 }).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true"}).Add(); +}).ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).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/edit/validation-add-remove/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-add-remove/tagHelper new file mode 100644 index 0000000000..150526eefe --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-add-remove/tagHelper @@ -0,0 +1,29 @@ + +
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/columnvalid.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/columnvalid.cs new file mode 100644 index 0000000000..3f41497f9f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/columnvalid.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + return View(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/razor new file mode 100644 index 0000000000..19d36c770e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/razor @@ -0,0 +1,7 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength=5 }).Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = "true", min=1, max=1000 }).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true"}).Add(); +}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/tagHelper new file mode 100644 index 0000000000..fc5db6939b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-columnvalid/tagHelper @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customvalidation/customvalidation.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-customvalidation/customvalidation.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/grid/edit/customvalidation/customvalidation.cs rename to ej2-asp-core-mvc/code-snippet/grid/edit/validation-customvalidation/customvalidation.cs diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-customvalidation/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-customvalidation/razor new file mode 100644 index 0000000000..273d163647 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-customvalidation/razor @@ -0,0 +1,16 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = "true", min=1, max=1000 }).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true"}).Add(); +}).Load("load").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).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/edit/validation-customvalidation/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-customvalidation/tagHelper new file mode 100644 index 0000000000..d06ff50773 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-customvalidation/tagHelper @@ -0,0 +1,18 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/columnvalid.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/columnvalid.cs new file mode 100644 index 0000000000..3f41497f9f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/columnvalid.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + return View(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/razor new file mode 100644 index 0000000000..5cfd1e0565 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/razor @@ -0,0 +1,124 @@ +@{ + var jobRole = new List + { + new { role = "Team Lead" }, + new { role = "Manager" }, + new { role = "Engineer" }, + new { role = "Sales" }, + new { role = "Support" } + }; + var salaryDetails = new List + { + new { Salary = 6000 }, + new { Salary = 17000 }, + new { Salary = 18000 }, + new { Salary = 26000 }, + new { Salary = 25000 }, + new { Salary = 40000 }, + new { Salary = 35000 }, + new { Salary = 55000 }, + new { Salary = 65000 } + }; + var roleDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = jobRole, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "role", Text = "role" }, AllowFiltering = true,Change="valueChange" }; + var salaryDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = salaryDetails, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Salary", Text = "Salary" }, AllowFiltering = true,Change="customFunction" }; +} + +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => +{ + col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Role").HeaderText("Role").EditType("dropdownedit").Width("150").Edit(new { @params = roleDropDownList }).Add(); + col.Field("Salary").HeaderText("Salary").EditType("dropdownedit").Width("150").Edit(new { @params = salaryDropDownList }).Add(); + col.Field("Address").HeaderText("Address").Width("150").ValidationRules(new { required = "true"}).Add(); +}).Load("load").ActionBegin("actionBegin").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).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/edit/validation-dropdown-change/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/tagHelper new file mode 100644 index 0000000000..da11a0619b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/tagHelper @@ -0,0 +1,127 @@ +@{ + var jobRole = new List + { + new { role = "Team Lead" }, + new { role = "Manager" }, + new { role = "Engineer" }, + new { role = "Sales" }, + new { role = "Support" } + }; + var salaryDetails = new List + { + new { Salary = 6000 }, + new { Salary = 17000 }, + new { Salary = 18000 }, + new { Salary = 26000 }, + new { Salary = 25000 }, + new { Salary = 40000 }, + new { Salary = 35000 }, + new { Salary = 55000 }, + new { Salary = 65000 } + }; + var roleDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = jobRole, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "role", Text = "role" }, AllowFiltering = true,Change="valueChange" }; + var salaryDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = salaryDetails, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Salary", Text = "Salary" }, AllowFiltering = true,Change="customFunction" }; +} + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/columnvalid.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/columnvalid.cs new file mode 100644 index 0000000000..b05a68da4f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/columnvalid.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + return View(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/razor new file mode 100644 index 0000000000..e0cc63f249 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/razor @@ -0,0 +1,31 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Edit(new { @params = new Syncfusion.EJ2.Inputs.NumericTextBox() { Change= "onChange" }}).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true"}).Add(); +}).Load("load").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).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/edit/validation-numericcolumn/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/tagHelper new file mode 100644 index 0000000000..c566a032ac --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/tagHelper @@ -0,0 +1,33 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-position/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-position/razor new file mode 100644 index 0000000000..ba1cac98d9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-position/razor @@ -0,0 +1,40 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).ActionComplete("onActionComplete").Height("348px").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add(); + col.Field("Freight").HeaderText("Freight").Format("C2").EditType("numericedit").ValidationRules(new { required = true, min = 1, max=1000 }).Width("150").Add(); + col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = true }).Width("150").Add(); +}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).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/edit/validation-position/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-position/tagHelper new file mode 100644 index 0000000000..601f315f87 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-position/tagHelper @@ -0,0 +1,41 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-position/validation.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-position/validation.cs new file mode 100644 index 0000000000..c83158f048 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-position/validation.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + ViewBag.DataSource =OrderDetails.GetAllRecords(); + return View(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md index edc43b0973..578b05ad54 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md @@ -216,3 +216,37 @@ In the below example, we have used the `expand` query to load the nested Employe {% endtabs %} ![Using remote data](../images/column-rendering/column-render-remote.png) + +### Complex data binding with list of array of objects + +The Syncfusion® Grid supports complex data binding with lists of arrays of objects. This feature allows you to bind complex data with multiple levels of nested objects and arrays to the Grid. + +The following example shows how to set complex field for datasource having array of objects. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-complexbinding/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Complexbinding.cs" %} +{% include code-snippet/grid/columns/column-complexbinding/complexbinding.cs %} +{% endhighlight %} +{% endtabs %} + +![Complex data binding with list of array of objects](../images/column-rendering/column-complex.png) + +### How to set complex column as foreign key column + +The Syncfusion® Grid control provides the ability to set complex columns as foreign key columns. This allows you to display related data from a foreign data source based on the complex column value. + +The following example demonstrates how to set the **Employee.EmployeeID** column as a foreign key column, and display the **FirstName** column from the foreign data. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/foreignkey/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Foreignkey.cs" %} +{% include code-snippet/grid/columns/foreignkey/foreignkey.cs %} +{% endhighlight %} +{% endtabs %} + +![Complex data binding with list of array of objects](../images/column-rendering/column-foriegn-complex.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/command-column-editing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/command-column-editing.md index 8a9322506a..a366f717dc 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/command-column-editing.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/command-column-editing.md @@ -8,12 +8,13 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Command column editing in ASP.NET MVC Grid component -# Command Column Editing +The command column editing feature allows you to add CRUD (Create, Read, Update, Delete) action buttons in a column for performing operations on individual rows.This feature is commonly used when you need to enable inline editing, deletion, or saving of row changes directly within the grid. -The command column provides an option to add CRUD action buttons in a column. This can be defined by the [`Commands`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Commands) property of [`Column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html). +To enable command column editing, you can utilize the `Column.Commands` property. By defining this property, you can specify the command buttons to be displayed in the command column, such as Edit, Delete, Save, and Cancel. -The available built-in command buttons are: +The available built-in command buttons are: | Command Button | Actions | |----------------|---------| @@ -22,55 +23,34 @@ The available built-in command buttons are: | Save | Update the edited row.| | Cancel | Cancel the edited state. | -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/commandcolumn/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Commandcolumn.cs" %} -{% include code-snippet/grid/edit/commandcolumn/commandcolumn.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} +Here's an example that demonstrates how to add CRUD action buttons in a column using the `Commands` column property : {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/edit/commandcolumn/razor %} {% endhighlight %} -{% highlight c# tabtitle="Commandcolumn.cs" %} +{% highlight c# tabtitle="commandcolumn.cs" %} {% include code-snippet/grid/edit/commandcolumn/commandcolumn.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Command column editing](../images/editing/edit-command.gif) ## Custom command column -The custom command buttons can be added in a column by using the [`Commands`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Commands) property of [`Column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) and the action for the custom buttons can be defined using **commandClick** event. - -{% if page.publishingplatform == "aspnet-core" %} +The custom command column feature in the Grid component allows you to add custom command buttons in a column to perform specific actions on individual rows. This feature is particularly useful when you need to provide customized functionality for editing, deleting, or performing any other operation on a row. -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customcommand/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Customcommand.cs" %} -{% include code-snippet/grid/edit/customcommand/customcommand.cs %} -{% endhighlight %} -{% endtabs %} +To add custom command buttons in a column, you can utilize the `Column.Commands` property. Furthermore, you can define the actions associated with these custom buttons using the [CommandClick](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_CommandClick) event. -{% elsif page.publishingplatform == "aspnet-mvc" %} +Here's an example that demonstrates how to add custom command buttons using the `Commands` property and customize the button click behavior to display grid details in a dialog using the `CommandClick` event: {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/edit/customcommand/razor %} {% endhighlight %} -{% highlight c# tabtitle="Customcommand.cs" %} +{% highlight c# tabtitle="customcommand.cs" %} {% include code-snippet/grid/edit/customcommand/customcommand.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Custom command column](../images/editing/edit-custom.png) \ 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 ffaf7144f8..4d665ad3d2 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 @@ -122,6 +122,27 @@ The following sample code demonstrates the customization applied to DropDownList ![Customize dropdown edit type](../images/editing/dropdown-edit-type.png) +### Provide custom data source for DropDownList component + +In Syncfusion® Grid component, you have an option to provide a custom data source for the [DropDownList](https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/getting-started) component in the edit form. This feature allows you to define a specific set of values for the DropDownList. + +To achieve this, you can utilize the `Columns->Edit->Params` property. This property allows you to define the edit params for the column within the grid. + +When setting a new data source using the edit params, you need to specify a new [Query](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Query) property for the DropDownList. The `Query` property allows you to define custom queries for data retrieval and filtering. + +In the below demo, DropDownList is rendered with custom data source for the **ShipCountry** column : + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/custom-data-params/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Dropdownlist-params.cs" %} +{% include code-snippet/grid/edit/custom-data-params/dropdown-params.cs %} +{% endhighlight %} +{% endtabs %} + +![Provide custom data source for DropDownList component](../images/editing/dropdown-edit-type.png) + ### Apply filtering for DropDownList component The Syncfusion® Grid component provides filtering for the DropDownList within the edit form. This feature allows to select options from a predefined list and easily search for specific items using the built-in filtering feature. @@ -456,6 +477,25 @@ The following example demonstrates how to render a RichTextEditor component in t ![Render richtext editor component](../images/editing/render-richtext-editor.gif) +### Render Upload component in edit form + +The Syncfusion Grid allows you to render an Upload control within the Grid's edit form. This feature is especially valuable when you need to upload and manage files or images in a specific column during data editing. + +To render Upload control in edit form, you need to define a cell edit template for the column using `edit` property. The **edit** property specifies the cell edit template that used as an editor for a particular column. + +The following example demonstrates how to render a Upload control in the **Employee Image** column of the Syncfusion Grid. The [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event is handled to update the edited value in the grid when the save button is clicked: + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/edit-upload/razor %} +{% endhighlight %} +{% highlight c# tabtitle="upload.cs" %} +{% include code-snippet/grid/edit/edit-upload/upload.cs %} +{% endhighlight %} +{% endtabs %} + +![Render Upload component in edit form](../images/editing/edit-types-upload.gif) + ### Render AutoComplete component in edit form The Syncfusion® Grid allows you to render the AutoComplete component within the edit form by using the cell edit template feature.This feature enables you to select values from a predefined list during the editing of a specific column. It is especially valuable when you need to provide a dropdown-like auto-suggestion and input assistance for data entry in the Grid's columns. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/template-editing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/template-editing.md index 74e4c45c0e..b37c5f0233 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/template-editing.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/template-editing.md @@ -8,81 +8,99 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Template editing in ASP.NET MVC Grid component -# Template Editing +The Syncfusion ASP.NET MVC Grid component supports template editing, providing a powerful and flexible way to customize the appearance and behavior of cells during editing. This feature allows you to use ASP.NET MVC templates to define the structure and content of the cells within the grid. -## Inline or dialog template editing +## Inline or dialog template editing -The dialog template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the [`Mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) of [`EditSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html) as **Dialog/Inline** and [`Template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) as SCRIPT element ID or HTML string which holds the template. +The Syncfusion Grid provides support for inline and dialog template editing, allowing you to customize the editing using `Forms`. These forms can be utilized to add and update grid records. -In some cases, you need to add the new field editors in the dialog which are not present in the column model. In that situation, the template will help you to customize the default edit dialog. +To enable this feature, you need to set the [EditSettings.Mode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property of the Grid to either **Normal** or **Dialog** and define the grid editors using [EditSetting.Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template). -In the below code example, demonstrate the usage of binding a partial view in the dialog template. +**Using Forms** -{% if page.publishingplatform == "aspnet-core" %} +Forms is a approach to create and manipulate the form controls. You can use form to add and update grid records. To use forms for editing operation, you can take leverage of the template support of dialog or inline edit mode. Setting the [EditSettings.Mode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) as **Normal/Dialog** and use [EditSetting.Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property to specify a SCRIPT element ID or an HTML string that holds the template. -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/dialogtemplate/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Addpatial.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/addpatial.cs %} -{% endhighlight %} -{% highlight c# tabtitle="AddpatialMVC.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/addpatialMVC.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialogtemplatemodel.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/dialogtemplatemodel.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Editpartial.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/editpartial.cs %} -{% endhighlight %} -{% highlight c# tabtitle="EditpartialMVC.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs %} -{% endhighlight %} -{% endtabs %} +In some cases, you want to add new field editors in the dialog which are not present in the column model. In that situation the dialog template will help us to customize the default edit dialog. -{% elsif page.publishingplatform == "aspnet-mvc" %} +In the following sample, grid enabled with dialog template editing. {% tabs %} -{% highlight razor tabtitle="CSHTML" %} +{% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/grid/edit/dialogtemplate/razor %} {% endhighlight %} -{% highlight c# tabtitle="Addpatial.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/addpatial.cs %} -{% endhighlight %} -{% highlight c# tabtitle="AddpatialMVC.cs" %} +{% highlight c# tabtitle="AddPartial.cshtml" %} {% include code-snippet/grid/edit/dialogtemplate/addpatialMVC.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} +{% highlight c# tabtitle="EditPartial.cshtml" %} +{% include code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs %} +{% endhighlight %} +{% highlight c# tabtitle="dialogData.cs" %} {% include code-snippet/grid/edit/dialogtemplate/dialog.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialogtemplatemodel.cs" %} +{% highlight c# tabtitle="DialogTemplateModel.cs" %} {% include code-snippet/grid/edit/dialogtemplate/dialogtemplatemodel.cs %} {% endhighlight %} -{% highlight c# tabtitle="Editpartial.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/editpartial.cs %} -{% endhighlight %} -{% highlight c# tabtitle="EditpartialMVC.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs %} -{% endhighlight %} {% endtabs %} -{% endif %} +| Add | Edit | +| -------------- | ------------- | +| ![Add](../images/editing/template-inline-add.png) | ![Edit](../images/editing/template-inline-edit.png) | + +> The template form editors should have **name** attribute. + +## Using template context + +You can enhance the customization of your grid's edit forms by utilizing template contexts, such as accessing row details inside template, rendering editors as components, getting values from editors, setting focus to editors, and disabling default form validation, and adding custom validation. These features are applicable in both **inline** and **dialog** editing modes. + +The following template context topics are demonstrated through a practical example in the [Render tab component inside the dialog template](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/template-editing#render-tab-component-inside-the-dialog-template) topic. + +### Access row details inside template using template context + +When utilizing edit templates in the Grid , you can access crucial row information within an template when utilizing edit templates. This enables dynamic binding of attributes, values, or elements based on the specific row being edited. This is particularly useful for conditionally rendering or modifying elements in the edit template based on the row's state. + +The following properties will be available at the time of template execution: + +| Property Name | Usage | +|---------------|-------| +| isAdd | A Boolean property that defines whether the current row is a new record or not. | + +The following code example demonstrates the usage of the `IsAdd` property in an edit template to disable the **OrderID** textbox when it's not a new record: + +```ts + +``` + +### Render editors as components + +The Syncfusion Grid provides a powerful feature that allows you to dynamically render Syncfusion EJ2 controls as form editors during the editing process. This functionality is particularly useful when you want to provide feature-rich controls for data entry within the edit form. +To achieve this by utilizing the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid and specifying `requestType` as **beginEdit** or **add**. -N> The Dialog/Inline template form editors should have **name** attribute. +The following code example illustrates rendering the [DropDownList](https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/getting-started) component in the `ActionComplete` event. -## Get value from editor +```js -You can read, format and update the current editor value in the [`ActionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin)event at the time of **requestType** as **save**. + function actionComplete(args) { + if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { + var countryData = ej.data.DataUtil.distinct(@Html.Raw(JsonConvert.SerializeObject(ViewBag.dataSource)), 'ShipCountry', true);; + new DropDownList({value: args.rowData.ShipCountry, popupHeight: '200px', floatLabelType: 'Always', + dataSource: countryData, fields: {text: 'ShipCountry', value: 'ShipCountry'}, placeholder: 'Ship Country'}, args.form.elements.namedItem('ShipCountry')); + } + } -In the below code example, we have format and updated the **freight** value. +``` -``` typescript +### Get value from editor + +The get value from editor feature in the Syncfusion Grid allows you to read, format, and update the current editor value before it is saved. This feature is particularly valuable when you need to perform specific actions on the data, such as formatting or validation, before it is committed to the underlying data source. + +To achieve this feature, you can utilize the [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event with the **requestType** set to **save**. + +In the following code example, the freight value has been formatted and updated. + +```ts function actionBegin(args) { if (args.requestType === 'save') { // cast string to integer value. @@ -92,11 +110,13 @@ In the below code example, we have format and updated the **freight** value. ``` -## Set focus to editor +### Set focus to particular column editor -By default, the first input element in the dialog will be focused while opening the dialog. If the first input element is in disabled or hidden state, focus the valid input element in the [`ActionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event based on **requestType** as **beginEdit**. +The Syncfusion Grid allows you to control the focus behavior of input elements in edit forms. By default, the first input element in the dialog receives focus when the dialog is opened. However, in scenarios where the first input element is disabled or hidden, you can specify which valid input element should receive focus. This can be achieved using the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid, where the **requestType** is set to **beginEdit**. -```typescript +In the following code example, the CustomerID column focused. + +```ts function actionComplete(args) { // Set initail Focus @@ -107,13 +127,35 @@ By default, the first input element in the dialog will be focused while opening ``` -## Adding validation rules for custom editors +### Disable default form validation -If you have used additional fields that are not present in the column model, then add the validation rules to the [`ActionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event. +The Syncfusion Grid provides built-in support for vue form validation to ensure data integrity and accuracy during editing. However, there might be scenarios where you want to disable the default form validation rules. This can be achieved using the `removeRules` method within the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid. + +To disable default form validation rules in the Grid, follow these steps: ```typescript - function actionComplete(args) => { + function actionComplete: (args) { + if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { + // Disable the Validation Rules + args.form.ej2_instances[0].removeRules(); + } + } + +``` +> * You can use this method to disable validation rules: **args.form.ej2_instances[0].rules = {}**. + +### Adding validation rules for custom editors + +The Syncfusion Grid provides the ability to add validation rules for fields that are not present in the column model. This feature is particularly useful to prevent erroneous or inconsistent data from being submitted, ultimately enhancing the reliability of your application's data. + +To accomplish this, you can utilize the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event along with the `addRules` method. + +Here's how you can use the `addRules` method to add validation rules for custom editors in the `actionComplete` event: + +```ts + + function actionComplete(args) { if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { // Add Validation Rules args.form.ej2_instances[0].addRules('Freight', {max: 500}); @@ -122,38 +164,22 @@ If you have used additional fields that are not present in the column model, the ``` -## Render tab component inside the dialog template +## Render tab control inside the dialog template -You can use [`tab`](../../../tab/index.html) component inside dialog edit UI using dialog template feature. The dialog template feature can be enabled by defining [`Mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property of [`EditSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html) as **Dialog** and [`Template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) as SCRIPT element ID or HTML string which holds the template. +You can enhance the editing experience in the Grid by rendering a [Tab](https://ej2.syncfusion.com/aspnetmvc/documentation/tab/getting-started) component inside the dialog template. This feature is especially useful when you want to present multiple editing sections or categories in a tabbed layout, ensuring a more intuitive and easily navigable interface for data editing. -The following example demonstrate the usage of tab control inside the dialog template. +To enable this functionality, you need to set the [EditSettings.Mode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property of the Grid to **Dialog**. This configures the Grid to use the dialog editing mode. Additionally, you can use the [EditSettings.Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property to define a template variable that contains the `Tab` component and its corresponding content. -{% if page.publishingplatform == "aspnet-core" %} +The following example renders a tab component inside the edit dialog. The tab component has two tabs, and once you fill in the first tab and navigate to the second one, the validation for the first tab is performed before navigating to the second. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/tabediting/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/tabediting/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/tabediting/dialog.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/edit/tabediting/razor %} {% endhighlight %} {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/tabediting/dialog.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/tabediting/dialog.cs %} -{% endhighlight %} {% endtabs %} -{% endif %} + +![Render tab control inside the dialog template](../images/editing/template-tab.gif) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/validation.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/validation.md index 006bb93c70..978aec6d7c 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/validation.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/validation.md @@ -8,64 +8,115 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Validation in ASP.NET MVC Grid component -# Validation +Validation is a crucial aspect of data integrity in any application. The ASP.NET MVC Grid component in Syncfusion® provides built-in support for easy and effective data validation. This feature ensures that the data entered or modified adheres to predefined rules, preventing errors and guaranteeing the accuracy of the displayed information. ## Column validation -Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data. Grid uses **Form Validator** component for column validation. You can set validation rules by defining the [`ValidationRules`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_ValidationRules). +Column validation allows you to validate the edited or added row data before saving it. This feature is particularly useful when you need to enforce specific rules or constraints on individual columns to ensure data integrity. By applying validation rules to columns, you can display error messages for invalid fields and prevent the saving of erroneous data. This feature leverages the **Form Validator** component to perform the validation. You can define validation rules using the `Columns.ValidationRules` property to specify the criteria for validating column values. -{% if page.publishingplatform == "aspnet-core" %} +The following code example demonstrates how to define a validation rule for grid column: {% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/columnvalid/tagHelper %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/validation-columnvalid/razor %} {% endhighlight %} -{% highlight c# tabtitle="Columnvalid.cs" %} -{% include code-snippet/grid/edit/columnvalid/columnvalid.cs %} +{% highlight c# tabtitle="columnvalid.cs" %} +{% include code-snippet/grid/edit/validation-columnvalid/columnvalid.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Column validation](../images/editing/validation.png) + +## Custom validation + +The Custom validation feature is used to define and enforce your own validation rules for specific columns in the Grid. This is achieved by leveraging the utilizing the **Form Validator custom rules**, you can enforce your desired validation logic and display error messages for invalid fields. + +In the below demo, custom validation applied for **CustomerID** column. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/columnvalid/razor %} +{% include code-snippet/grid/edit/validation-customvalidation/razor %} {% endhighlight %} -{% highlight c# tabtitle="Columnvalid.cs" %} -{% include code-snippet/grid/edit/columnvalid/columnvalid.cs %} +{% highlight c# tabtitle="customvalidation.cs" %} +{% include code-snippet/grid/edit/validation-customvalidation/customvalidation.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Custom validation](../images/editing/validation-custom.png) +### Custom validation based on dropdown change -## Custom validation +The Custom validation feature in the Grid allows you to apply validation rules and messages to a column based on the value of another column in edit mode. This feature is particularly useful when you need to enforce specific validation criteria that depend on the selection made in a dropdown column. -You can define your own custom validation rules for the specific columns by using **Form Validator custom rules**. +In the following sample, dropdownlist edit type is used for the **Role** and **Salary** columns. Here, you can apply the custom validation in the **Salary** column based on the value selected in the **Role** column. -In the below demo, custom validation applied for **CustomerID** column. +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/validation-dropdown-change/razor %} +{% endhighlight %} +{% highlight c# tabtitle="columnvalid.cs" %} +{% include code-snippet/grid/edit/validation-dropdown-change/columnvalid.cs %} +{% endhighlight %} +{% endtabs %} + +![Custom validation based on dropdown change](../images/editing/validation-dropdown.gif) + +### Custom validation for numeric column + +Custom validation for a numeric column Grid is useful when you want to enforce specific validation rules on numeric values in a column. This allows you to define your own validation logic and display custom error messages when the you enters invalid data. + +In the following example, custom validation functions, namely **customFunction** and **customFunctionOne**, are defined to check the entered numeric value against your validation criteria. Then, the grid column is configured with the appropriate validation settings using the **freightRules** object, specifying the custom validation functions along with corresponding error messages. Additionally, the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Inputs.NumericTextBox.html#Syncfusion_EJ2_Inputs_NumericTextBox_Change) event of the numeric column is bound to the `validate` method of the form element through the edit params. This enables you to trigger validation and display error messages whenever the you modifies the value in the [NumericTextBox](https://ej2.syncfusion.com/aspnetmvc/documentation/numerictextbox/getting-started). -{% if page.publishingplatform == "aspnet-core" %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/validation-numericcolumn/razor %} +{% endhighlight %} +{% highlight c# tabtitle="columnvalid.cs" %} +{% include code-snippet/grid/edit/validation-numericcolumn/columnvalid.cs %} +{% endhighlight %} +{% endtabs %} + +![Custom validation for numeric column](../images/editing/validation-numeric.png) + +## Dynamically add or remove validation rules from the form + +You can dynamically add or remove validation rules from input elements within a form. This feature is particularly useful when you need to adjust the validation rules based on different scenarios or dynamically changing data. + +To add validation rules dynamically to an input element, you can use the `addRules` method. This method enables you to add validation rules to the corresponding input element based on the name attribute. + +The following example to demonstrates how to dynamically add or remove a required validation rule for an input field based on a **CheckBox** selection: {% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customvalidation/tagHelper %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/validation-add-remove/razor %} {% endhighlight %} -{% highlight c# tabtitle="Customvalidation.cs" %} -{% include code-snippet/grid/edit/customvalidation/customvalidation.cs %} +{% highlight c# tabtitle="columnvalid.cs" %} +{% include code-snippet/grid/edit/validation-add-remove/columnvalid.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Dynamically add or remove validation rules from the form](../images/editing/validation-add-remove.png) + +>To remove an existing validation rule from an input element, you can use the `removeRules` method. + +## Change the position of validation error message + +By default, the validation error message in Grid is displayed below the input field. However, you have an option to customize its position and display it in a different location. This feature is particularly useful when you want to align the error message according to your application's design and layout. + +To change the position of the validation error message in Grid, you can utilize the `CustomPlacement` event. This event allows you to define a custom logic to position the error message at the desired location. + +Here's an example that demonstrates how to change the position of the validation error message to the top of the input field: {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customvalidation/razor %} +{% include code-snippet/grid/edit/validation-position/razor %} {% endhighlight %} -{% highlight c# tabtitle="Customvalidation.cs" %} -{% include code-snippet/grid/edit/customvalidation/customvalidation.cs %} +{% highlight c# tabtitle="validation.cs" %} +{% include code-snippet/grid/edit/validation-position/validation.cs %} {% endhighlight %} {% endtabs %} -{% endif %} + +![Change the position of validation error message](../images/editing/validation-position.png) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/aggregates.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/aggregates.md index bd8886eab0..e27b7f063e 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/aggregates.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/aggregates.md @@ -62,4 +62,25 @@ Here is an example that demonstrates how to use built-in aggregates types in the {% endhighlight %} {% endtabs %} -![Built-in aggregate types](../images/aggregates/aggregate-types.png) \ No newline at end of file +![Built-in aggregate types](../images/aggregates/aggregate-types.png) + +## Multiple aggregates for a column + +Multiple aggregates for a column allows you to calculate and display different summary values simultaneously for a single column in a grid. Normally, a column is associated with a single aggregate function, such as sum, average, count and etc., which provides a single summary value for the entire column. + +However, in scenarios where you need to display multiple summary values for the same column, multiple aggregates come into play. This feature enables you to calculate and display various aggregate values, such as sum, average, minimum, maximum, or custom calculations, concurrently for a specific column. + +You can use multiple aggregates for a single column in the Syncfusion® ASP.Net Core Grid by specifying the aggregate `type` as an array. + +Here's an example of how to use multiple aggregates in the Syncfusion® ASP.Net Core Grid: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/aggregate/aggregates-multiple/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="aggregate.cs" %} +{% include code-snippet/grid/aggregate/aggregates-multiple/aggregate.cs %} +{% endhighlight %} +{% endtabs %} + +![Multiple aggregates for a column](../images/aggregates/aggregates-multiple.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-rendering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-rendering.md index 467dbe718b..0378d40083 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-rendering.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-rendering.md @@ -216,3 +216,37 @@ In the below example, we have used the `expand` query to load the nested Employe {% endtabs %} ![Using remote data](../images/column-rendering/column-render-remote.png) + +### Complex data binding with list of array of objects + +The Syncfusion® Grid supports complex data binding with lists of arrays of objects. This feature allows you to bind complex data with multiple levels of nested objects and arrays to the Grid. + +The following example shows how to set complex field for datasource having array of objects. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-complexbinding/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Complexbinding.cs" %} +{% include code-snippet/grid/columns/column-complexbinding/complexbinding.cs %} +{% endhighlight %} +{% endtabs %} + +![Complex data binding with list of array of objects](../images/column-rendering/column-complex.png) + +### How to set complex column as foreign key column + +The Syncfusion® Grid control provides the ability to set complex columns as foreign key columns. This allows you to display related data from a foreign data source based on the complex column value. + +The following example demonstrates how to set the **Employee.EmployeeID** column as a foreign key column, and display the **FirstName** column from the foreign data. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/foreignkey/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Foreignkey.cs" %} +{% include code-snippet/grid/columns/foreignkey/foreignkey.cs %} +{% endhighlight %} +{% endtabs %} + +![Complex data binding with list of array of objects](../images/column-rendering/column-foriegn-complex.png) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/command-column-editing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/command-column-editing.md index 2b7ebb01e5..25cb7eafb7 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/command-column-editing.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/command-column-editing.md @@ -8,12 +8,13 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Command column editing in ASP.NET Core Grid component -# Command Column Editing +The command column editing feature allows you to add CRUD (Create, Read, Update, Delete) action buttons in a column for performing operations on individual rows.This feature is commonly used when you need to enable inline editing, deletion, or saving of row changes directly within the grid. -The command column provides an option to add CRUD action buttons in a column. This can be defined by the [`commands`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Commands) property of [`e-grid-column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Columns) tag helper. +To enable command column editing, you can utilize the `column.commands` property. By defining this property, you can specify the command buttons to be displayed in the command column, such as Edit, Delete, Save, and Cancel. -The available built-in command buttons are: +The available built-in command buttons are: | Command Button | Actions | |----------------|---------| @@ -22,55 +23,35 @@ The available built-in command buttons are: | Save | Update the edited row.| | Cancel | Cancel the edited state. | -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/commandcolumn/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Commandcolumn.cs" %} -{% include code-snippet/grid/edit/commandcolumn/commandcolumn.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} +Here's an example that demonstrates how to add CRUD action buttons in a column using the `commands` column property : {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/edit/commandcolumn/razor %} {% endhighlight %} -{% highlight c# tabtitle="Commandcolumn.cs" %} +{% highlight c# tabtitle="commandcolumn.cs" %} {% include code-snippet/grid/edit/commandcolumn/commandcolumn.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Command column editing](../images/editing/edit-command.gif) ## Custom command column -The custom command buttons can be added in a column by using the [`commands`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Commands) property of [`e-grid-column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Columns) tag helper and the action for the custom buttons can be defined using **commandClick** event. +The custom command column feature in the Grid component allows you to add custom command buttons in a column to perform specific actions on individual rows. This feature is particularly useful when you need to provide customized functionality for editing, deleting, or performing any other operation on a row. -{% if page.publishingplatform == "aspnet-core" %} +To add custom command buttons in a column, you can utilize the `column.commands` property. Furthermore, you can define the actions associated with these custom buttons using the [commandClick](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_CommandClick) event. -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customcommand/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Customcommand.cs" %} -{% include code-snippet/grid/edit/customcommand/customcommand.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} +Here's an example that demonstrates how to add custom command buttons using the `commands` property and customize the button click behavior to display grid details in a dialog using the `commandClick` event: {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/edit/customcommand/razor %} {% endhighlight %} -{% highlight c# tabtitle="Customcommand.cs" %} +{% highlight c# tabtitle="customcommand.cs" %} {% include code-snippet/grid/edit/customcommand/customcommand.cs %} {% endhighlight %} {% endtabs %} -{% endif %} + +![Custom command column](../images/editing/edit-custom.png) 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 7364feeed0..dd125c3be5 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 @@ -122,6 +122,27 @@ The following sample code demonstrates the customization applied to DropDownList ![Customize dropdown edit type](../images/editing/dropdown-edit-type.png) +### Provide custom data source for DropDownList component + +In Syncfusion® Grid component, you have an option to provide a custom data source for the [DropDownList](https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/getting-started) component in the edit form. This feature allows you to define a specific set of values for the DropDownList. + +To achieve this, you can utilize the `columns->edit->params` property. This property allows you to define the edit params for the column within the grid. + +When setting a new data source using the edit params, you need to specify a new [query](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Query) property for the DropDownList. The `query` property allows you to define custom queries for data retrieval and filtering. + +In the below demo, DropDownList is rendered with custom data source for the **ShipCountry** column : + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/custom-data-params/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Dropdownlist-params.cs" %} +{% include code-snippet/grid/edit/custom-data-params/dropdown-params.cs %} +{% endhighlight %} +{% endtabs %} + +![Provide custom data source for DropDownList component](../images/editing/dropdown-edit-type.png) + ### Apply filtering for DropDownList component The Syncfusion® Grid component provides filtering for the DropDownList within the edit form. This feature allows to select options from a predefined list and easily search for specific items using the built-in filtering feature. @@ -456,6 +477,25 @@ The following example demonstrates how to render a RichTextEditor component in t ![Render richtext editor component](../images/editing/render-richtext-editor.gif) +### Render Upload component in edit form + +The Syncfusion Grid allows you to render an Upload control within the Grid's edit form. This feature is especially valuable when you need to upload and manage files or images in a specific column during data editing. + +To render Upload control in edit form, you need to define a cell edit template for the column using `edit` property. The **edit** property specifies the cell edit template that used as an editor for a particular column. + +The following example demonstrates how to render a Upload control in the **Employee Image** column of the Syncfusion Grid. The [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event is handled to update the edited value in the grid when the save button is clicked: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/edit-upload/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="upload.cs" %} +{% include code-snippet/grid/edit/edit-upload/upload.cs %} +{% endhighlight %} +{% endtabs %} + +![Render Upload component in edit form](../images/editing/edit-types-upload.gif) + ### Render AutoComplete component in edit form The Syncfusion® Grid allows you to render the AutoComplete component within the edit form by using the cell edit template feature.This feature enables you to select values from a predefined list during the editing of a specific column. It is especially valuable when you need to provide a dropdown-like auto-suggestion and input assistance for data entry in the Grid's columns. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/template-editing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/template-editing.md index 75e9f8fbba..109610f719 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/template-editing.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/template-editing.md @@ -8,81 +8,99 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Template editing in ASP.NET Core Grid component -# Template Editing +The Syncfusion ASP.NET Core Grid component supports template editing, providing a powerful and flexible way to customize the appearance and behavior of cells during editing. This feature allows you to use ASP.NET Core templates to define the structure and content of the cells within the grid. -## Inline or dialog template editing +## Inline or dialog template editing -The dialog template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the [`mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property of [`e-grid-editSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_EditSettings) tag helper as **Dialog/Inline** and [`template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property as SCRIPT element ID or HTML string which holds the template. +The Syncfusion Grid provides support for inline and dialog template editing, allowing you to customize the editing using `Forms`. These forms can be utilized to add and update grid records. -In some cases, you need to add the new field editors in the dialog which are not present in the column model. In that situation, the template will help you to customize the default edit dialog. +To enable this feature, you need to set the [editSettings.mode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property of the Grid to either **Normal** or **Dialog** and define the grid editors using [editSetting.template](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template). -In the below code example, demonstrate the usage of binding a partial view in the dialog template. +**Using Forms** -{% if page.publishingplatform == "aspnet-core" %} +Forms is a approach to create and manipulate the form controls. You can use form to add and update grid records. To use forms for editing operation, you can take leverage of the template support of dialog or inline edit mode. Setting the [editSettings.mode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) as **Normal/Dialog** and use [editSetting.template](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property to specify a SCRIPT element ID or an HTML string that holds the template. + +In some cases, you want to add new field editors in the dialog which are not present in the column model. In that situation the dialog template will help us to customize the default edit dialog. + +In the following sample, grid enabled with dialog template editing. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/grid/edit/dialogtemplate/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Addpatial.cs" %} +{% highlight c# tabtitle="AddPartial.cshtml" %} {% include code-snippet/grid/edit/dialogtemplate/addpatial.cs %} {% endhighlight %} -{% highlight c# tabtitle="AddpatialMVC.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/addpatialMVC.cs %} +{% highlight c# tabtitle="EditPartial.cshtml" %} +{% include code-snippet/grid/edit/dialogtemplate/editpartial.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/dialog.cs %} +{% highlight c# tabtitle="dialogData.cs" %} +{% include code-snippet/grid/edit/dialogtemplate/dialogData.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialogtemplatemodel.cs" %} +{% highlight c# tabtitle="DialogTemplateModel.cs" %} {% include code-snippet/grid/edit/dialogtemplate/dialogtemplatemodel.cs %} {% endhighlight %} -{% highlight c# tabtitle="Editpartial.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/editpartial.cs %} -{% endhighlight %} -{% highlight c# tabtitle="EditpartialMVC.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs %} -{% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +| Add | Edit | +| -------------- | ------------- | +| ![Add](../images/editing/template-inline-add.png) | ![Edit](../images/editing/template-inline-edit.png) | -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/dialogtemplate/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Addpatial.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/addpatial.cs %} -{% endhighlight %} -{% highlight c# tabtitle="AddpatialMVC.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/addpatialMVC.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialogtemplatemodel.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/dialogtemplatemodel.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Editpartial.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/editpartial.cs %} -{% endhighlight %} -{% highlight c# tabtitle="EditpartialMVC.cs" %} -{% include code-snippet/grid/edit/dialogtemplate/editpartialMVC.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} +> The template form editors should have **name** attribute. + +## Using template context + +You can enhance the customization of your grid's edit forms by utilizing template contexts, such as accessing row details inside template, rendering editors as components, getting values from editors, setting focus to editors, and disabling default form validation, and adding custom validation. These features are applicable in both **inline** and **dialog** editing modes. + +The following template context topics are demonstrated through a practical example in the [Render tab component inside the dialog template](https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/template-editing#render-tab-component-inside-the-dialog-template) topic. + +### Access row details inside template using template context + +When utilizing edit templates in the Grid , you can access crucial row information within an template when utilizing edit templates. This enables dynamic binding of attributes, values, or elements based on the specific row being edited. This is particularly useful for conditionally rendering or modifying elements in the edit template based on the row's state. +The following properties will be available at the time of template execution: +| Property Name | Usage | +|---------------|-------| +| isAdd | A Boolean property that defines whether the current row is a new record or not. | -N> The Dialog/Inline template form editors should have **name** attribute. +The following code example demonstrates the usage of the `isAdd` property in an edit template to disable the **OrderID** textbox when it's not a new record: -## Get value from editor +```ts + +``` + +### Render editors as components + +The Syncfusion Grid provides a powerful feature that allows you to dynamically render Syncfusion EJ2 controls as form editors during the editing process. This functionality is particularly useful when you want to provide feature-rich controls for data entry within the edit form. + +To achieve this by utilizing the [actionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid and specifying `requestType` as **beginEdit** or **add**. -You can read, format and update the current editor value in the [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event at the time of **requestType** as **save**. +The following code example illustrates rendering the [DropDownList](https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/getting-started) component in the `actionComplete` event. -In the below code example, we have format and updated the **Freight** value. +```js -``` typescript + function actionComplete(args) { + if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { + var countryData = ej.data.DataUtil.distinct(@Html.Raw(JsonConvert.SerializeObject(ViewBag.dataSource)), 'ShipCountry', true);; + new DropDownList({value: args.rowData.ShipCountry, popupHeight: '200px', floatLabelType: 'Always', + dataSource: countryData, fields: {text: 'ShipCountry', value: 'ShipCountry'}, placeholder: 'Ship Country'}, args.form.elements.namedItem('ShipCountry')); + } + } + +``` + +### Get value from editor + +The get value from editor feature in the Syncfusion Grid allows you to read, format, and update the current editor value before it is saved. This feature is particularly valuable when you need to perform specific actions on the data, such as formatting or validation, before it is committed to the underlying data source. + +To achieve this feature, you can utilize the [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event with the **requestType** set to **save**. + +In the following code example, the freight value has been formatted and updated. + +```ts function actionBegin(args) { if (args.requestType === 'save') { // cast string to integer value. @@ -92,12 +110,13 @@ In the below code example, we have format and updated the **Freight** value. ``` -## Set focus to editor +### Set focus to particular column editor -By default, the first input element in the dialog will be focused while opening the dialog. -If the first input element is in disabled or hidden state, focus the valid input element in the [`actionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event based on **requestType** as **beginEdit**. +The Syncfusion Grid allows you to control the focus behavior of input elements in edit forms. By default, the first input element in the dialog receives focus when the dialog is opened. However, in scenarios where the first input element is disabled or hidden, you can specify which valid input element should receive focus. This can be achieved using the [actionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid, where the **requestType** is set to **beginEdit**. -```typescript +In the following code example, the CustomerID column focused. + +```ts function actionComplete(args) { // Set initail Focus @@ -108,13 +127,35 @@ If the first input element is in disabled or hidden state, focus the valid input ``` -## Adding validation rules for custom editors +### Disable default form validation + +The Syncfusion Grid provides built-in support for ASP.NET Core form validation to ensure data integrity and accuracy during editing. However, there might be scenarios where you want to disable the default form validation rules. This can be achieved using the `removeRules` method within the [actionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid. -If you have used additional fields that are not present in the column model, then add the validation rules to the [`actionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event. +To disable default form validation rules in the Grid, follow these steps: ```typescript - function actionComplete(args) => { + function actionComplete: (args) { + if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { + // Disable the Validation Rules + args.form.ej2_instances[0].removeRules(); + } + } + +``` +> * You can use this method to disable validation rules: **args.form.ej2_instances[0].rules = {}**. + +### Adding validation rules for custom editors + +The Syncfusion Grid provides the ability to add validation rules for fields that are not present in the column model. This feature is particularly useful to prevent erroneous or inconsistent data from being submitted, ultimately enhancing the reliability of your application's data. + +To accomplish this, you can utilize the [actionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event along with the `addRules` method. + +Here's how you can use the `addRules` method to add validation rules for custom editors in the `actionComplete` event: + +```ts + + function actionComplete(args) { if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { // Add Validation Rules args.form.ej2_instances[0].addRules('Freight', {max: 500}); @@ -123,13 +164,13 @@ If you have used additional fields that are not present in the column model, the ``` -## Render tab component inside the dialog template +## Render tab control inside the dialog template -You can use **tab** component inside dialog edit UI using dialog template feature. The dialog template feature can be enabled by defining [`mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) as **Dialog** and [`template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) as SCRIPT element ID or HTML string which holds the template. +You can enhance the editing experience in the Grid by rendering a [Tab](https://ej2.syncfusion.com/aspnetcore/documentation/tab/getting-started) component inside the dialog template. This feature is especially useful when you want to present multiple editing sections or categories in a tabbed layout, ensuring a more intuitive and easily navigable interface for data editing. -The following example demonstrate the usage of tab control inside the dialog template. +To enable this functionality, you need to set the [editSettings.mode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property of the Grid to **Dialog**. This configures the Grid to use the dialog editing mode. Additionally, you can use the [editSettings.template](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property to define a template variable that contains the `Tab` component and its corresponding content. -{% if page.publishingplatform == "aspnet-core" %} +The following example renders a tab component inside the edit dialog. The tab component has two tabs, and once you fill in the first tab and navigate to the second one, the validation for the first tab is performed before navigating to the second. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -138,23 +179,7 @@ The following example demonstrate the usage of tab control inside the dialog tem {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/tabediting/dialog.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/tabediting/dialog.cs %} -{% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/tabediting/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/tabediting/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/tabediting/dialog.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} +![Render tab control inside the dialog template](../images/editing/template-tab.gif) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/validation.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/validation.md index 5c75b653fd..3b8e4e8cc4 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/validation.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/validation.md @@ -9,63 +9,115 @@ documentation: ug --- -# Validation in Grid Control +# Validation in ASP.NET Core Grid component + +Validation is a crucial aspect of data integrity in any application. The ASP.NET Core Grid component in Syncfusion® provides built-in support for easy and effective data validation. This feature ensures that the data entered or modified adheres to predefined rules, preventing errors and guaranteeing the accuracy of the displayed information. ## Column validation -Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data. Grid uses **Form Validator** component for column validation. You can set validation rules in [`validationRules`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_ValidationRules) property of [`e-grid-column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) tag helper. +Column validation allows you to validate the edited or added row data before saving it. This feature is particularly useful when you need to enforce specific rules or constraints on individual columns to ensure data integrity. By applying validation rules to columns, you can display error messages for invalid fields and prevent the saving of erroneous data. This feature leverages the **Form Validator** component to perform the validation. You can define validation rules using the `columns.validationRules` property to specify the criteria for validating column values. -{% if page.publishingplatform == "aspnet-core" %} +The following code example demonstrates how to define a validation rule for grid column: {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/columnvalid/tagHelper %} +{% include code-snippet/grid/edit/validation-columnvalid/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Columnvalid.cs" %} -{% include code-snippet/grid/edit/columnvalid/columnvalid.cs %} +{% highlight c# tabtitle="columnvalid.cs" %} +{% include code-snippet/grid/edit/validation-columnvalid/columnvalid.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Column validation](../images/editing/validation.png) + +## Custom validation + +The Custom validation feature is used to define and enforce your own validation rules for specific columns in the Grid. This is achieved by leveraging the utilizing the **Form Validator custom rules**, you can enforce your desired validation logic and display error messages for invalid fields. + +In the below demo, custom validation applied for **CustomerID** column. {% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/columnvalid/razor %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/validation-customvalidation/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Columnvalid.cs" %} -{% include code-snippet/grid/edit/columnvalid/columnvalid.cs %} +{% highlight c# tabtitle="customvalidation.cs" %} +{% include code-snippet/grid/edit/validation-customvalidation/customvalidation.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Custom validation](../images/editing/validation-custom.png) +### Custom validation based on dropdown change -## Custom validation +The Custom validation feature in the Grid allows you to apply validation rules and messages to a column based on the value of another column in edit mode. This feature is particularly useful when you need to enforce specific validation criteria that depend on the selection made in a dropdown column. -You can define your own custom validation rules for the specific columns by using **Form Validator custom rules**. +In the following sample, dropdownlist edit type is used for the **Role** and **Salary** columns. Here, you can apply the custom validation in the **Salary** column based on the value selected in the **Role** column. -In the below demo, custom validation applied for **CustomerID** column. +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/validation-dropdown-change/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="columnvalid.cs" %} +{% include code-snippet/grid/edit/validation-dropdown-change/columnvalid.cs %} +{% endhighlight %} +{% endtabs %} -{% if page.publishingplatform == "aspnet-core" %} +![Custom validation based on dropdown change](../images/editing/validation-dropdown.gif) + +### Custom validation for numeric column + +Custom validation for a numeric column Grid is useful when you want to enforce specific validation rules on numeric values in a column. This allows you to define your own validation logic and display custom error messages when the you enters invalid data. + +In the following example, custom validation functions, namely **customFunction** and **customFunctionOne**, are defined to check the entered numeric value against your validation criteria. Then, the grid column is configured with the appropriate validation settings using the **freightRules** object, specifying the custom validation functions along with corresponding error messages. Additionally, the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.NumericTextBox.html#Syncfusion_EJ2_Inputs_NumericTextBox_Change) event of the numeric column is bound to the `validate` method of the form element through the edit params. This enables you to trigger validation and display error messages whenever the you modifies the value in the [NumericTextBox](https://ej2.syncfusion.com/aspnetcore/documentation/numerictextbox/getting-started). {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customvalidation/tagHelper %} +{% include code-snippet/grid/edit/validation-numericcolumn/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Customvalidation.cs" %} -{% include code-snippet/grid/edit/customvalidation/customvalidation.cs %} +{% highlight c# tabtitle="columnvalid.cs" %} +{% include code-snippet/grid/edit/validation-numericcolumn/columnvalid.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Custom validation for numeric column](../images/editing/validation-numeric.png) + +## Dynamically add or remove validation rules from the form + +You can dynamically add or remove validation rules from input elements within a form. This feature is particularly useful when you need to adjust the validation rules based on different scenarios or dynamically changing data. + +To add validation rules dynamically to an input element, you can use the `addRules` method. This method enables you to add validation rules to the corresponding input element based on the name attribute. + +The following example to demonstrates how to dynamically add or remove a required validation rule for an input field based on a **CheckBox** selection: {% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customvalidation/razor %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/validation-add-remove/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Customvalidation.cs" %} -{% include code-snippet/grid/edit/customvalidation/customvalidation.cs %} +{% highlight c# tabtitle="columnvalid.cs" %} +{% include code-snippet/grid/edit/validation-add-remove/columnvalid.cs %} {% endhighlight %} {% endtabs %} -{% endif %} + +![Dynamically add or remove validation rules from the form](../images/editing/validation-add-remove.png) + +> * To remove an existing validation rule from an input element, you can use the `removeRules` method. + +## Change the position of validation error message + +By default, the validation error message in Grid is displayed below the input field. However, you have an option to customize its position and display it in a different location. This feature is particularly useful when you want to align the error message according to your application's design and layout. + +To change the position of the validation error message in Grid, you can utilize the `customPlacement` event. This event allows you to define a custom logic to position the error message at the desired location. + +Here's an example that demonstrates how to change the position of the validation error message to the top of the input field: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/edit/validation-position/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="validation.cs" %} +{% include code-snippet/grid/edit/validation-position/validation.cs %} +{% endhighlight %} +{% endtabs %} + +![Change the position of validation error message](../images/editing/validation-position.png) diff --git a/ej2-asp-core-mvc/grid/images/aggregates/aggregates-multiple.png b/ej2-asp-core-mvc/grid/images/aggregates/aggregates-multiple.png new file mode 100644 index 0000000000..5ba400d327 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/aggregates/aggregates-multiple.png differ diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/column-complex.png b/ej2-asp-core-mvc/grid/images/column-rendering/column-complex.png new file mode 100644 index 0000000000..7acbf597aa Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/column-complex.png differ diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/column-foriegn-complex.png b/ej2-asp-core-mvc/grid/images/column-rendering/column-foriegn-complex.png new file mode 100644 index 0000000000..e4496aef99 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/column-foriegn-complex.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/edit-command.gif b/ej2-asp-core-mvc/grid/images/editing/edit-command.gif new file mode 100644 index 0000000000..0a3f1ac74e Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/edit-command.gif differ diff --git a/ej2-asp-core-mvc/grid/images/editing/edit-custom.png b/ej2-asp-core-mvc/grid/images/editing/edit-custom.png new file mode 100644 index 0000000000..8c1cc6235c Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/edit-custom.png 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 new file mode 100644 index 0000000000..270228ad3f Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/edit-types-upload.gif differ diff --git a/ej2-asp-core-mvc/grid/images/editing/template-inline-add.png b/ej2-asp-core-mvc/grid/images/editing/template-inline-add.png new file mode 100644 index 0000000000..6da5aa18e4 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/template-inline-add.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/template-inline-edit.png b/ej2-asp-core-mvc/grid/images/editing/template-inline-edit.png new file mode 100644 index 0000000000..4d15b18f0b Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/template-inline-edit.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/template-tab.gif b/ej2-asp-core-mvc/grid/images/editing/template-tab.gif new file mode 100644 index 0000000000..479ff7bf6c Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/template-tab.gif differ diff --git a/ej2-asp-core-mvc/grid/images/editing/validation-add-remove.png b/ej2-asp-core-mvc/grid/images/editing/validation-add-remove.png new file mode 100644 index 0000000000..f1f465cfbc Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/validation-add-remove.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/validation-custom.png b/ej2-asp-core-mvc/grid/images/editing/validation-custom.png new file mode 100644 index 0000000000..10ed7449c5 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/validation-custom.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/validation-dropdown.gif b/ej2-asp-core-mvc/grid/images/editing/validation-dropdown.gif new file mode 100644 index 0000000000..79cf2f2da4 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/validation-dropdown.gif differ diff --git a/ej2-asp-core-mvc/grid/images/editing/validation-numeric.png b/ej2-asp-core-mvc/grid/images/editing/validation-numeric.png new file mode 100644 index 0000000000..9cba0ddb24 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/validation-numeric.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/validation-position.png b/ej2-asp-core-mvc/grid/images/editing/validation-position.png new file mode 100644 index 0000000000..d20c87fb13 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/validation-position.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/validation.png b/ej2-asp-core-mvc/grid/images/editing/validation.png new file mode 100644 index 0000000000..cf08615d7f Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/validation.png differ