documentation(931473): Revamped editing topic.

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();
+}

ej2-asp-core-mvc/code-snippet/grid/aggregate/aggregates-multiple/tagHelper

@@ -0,0 +1,14 @@
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" allowPaging="true" height='348px'>
+    <e-grid-aggregates>
+        <e-grid-aggregate>
+            <e-aggregate-columns>
+               <e-aggregate-column field="Freight" types="@(new List<string>(){"Sum", "Max", "Min"})" format="C2" footerTemplate="Maxi:${Max}, Sum:${Sum}, Min:${Min}"></e-aggregate-column>            </e-aggregate-columns>
+        </e-grid-aggregate>
+    </e-grid-aggregates>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" width="150" textAlign="Right"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="160"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>

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();
+} 

ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/razor

@@ -0,0 +1,7 @@
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)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()

ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/tagHelper

@@ -0,0 +1,8 @@
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="315px" >     
+    <e-grid-columns>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
+        <e-grid-column field="Names.0.FirstName" headerText="Last Name"  width="120"></e-grid-column>               
+        <e-grid-column field="Names.0.LastName"  headerText="Last Name"  width="120"></e-grid-column>
+        <e-grid-column field="Title"  headerText="Title"  width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>

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();
 }

ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/razor

@@ -1,8 +1,7 @@
-@Html.EJS().Grid("ForeignKey").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)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<object>)ViewBag.foreign).HeaderText("Employee Name").Width("150").Add();
+  col.Field("Employee.EmployeeID").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource((IEnumerable<object>)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()

ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey/tagHelper

@@ -1,7 +1,7 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="348px">
     <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="Employee.EmployeeID" foreignKeyField= "EmployeeID" headerText="Employee Name" foreignKeyValue="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column>               
+        <e-grid-column field="Employee.EmployeeID" foreignKeyField= "EmployeeID" headerText="Employee Name" foreignKeyValue="FirstName" dataSource="ViewBag.EmployeeData" width="150"></e-grid-column>               
         <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>               
         <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
     </e-grid-columns>

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();
+}
 
 

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<object>)ViewBag.DataSource).Columns(col =>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)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()
+  col.HeaderText("Commands").Width("160").Commands(commands).Add();
+}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render()

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" } });
   }
 
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="310">
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="400px">
     <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
     <e-grid-columns>
         <e-grid-column field="OrderID"  headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>                
-        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>                
+        <e-grid-column field="CustomerID" headerText="Customer Name" type="string" width="120"></e-grid-column>                
         <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>   
-        <e-grid-column headerText="Manage Records" width="120" command=commands>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>   
+        <e-grid-column headerText="Commands" width="120" command="commands">
         </e-grid-column>
     </e-grid-columns>
 </ejs-grid>

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();
+ }
+
+

ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/razor

@@ -0,0 +1,21 @@
+@{
+    ViewBag.DropDownData = new List<object>
+    {
+        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<object>)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<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

ej2-asp-core-mvc/code-snippet/grid/edit/custom-data-params/tagHelper

@@ -0,0 +1,22 @@
+@{
+    ViewBag.DropDownData = new List<object>
+    {
+        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" } };
+}
+
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="348px" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
+    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit" edit="new {@params = DropDownList }"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>

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();
+}
 
 

ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/razor

@@ -1,22 +1,38 @@
 @{
     List<object> commands = new List<object>();
-    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<object>)ViewBag.DataSource).Columns(col =>
+<div id="dialog" ></div>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)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();
 <script>
+    var dialogVisible = false;
+    var dialog = new ej.popups.Dialog({
+        header: "Row Information",
+        content: "dialogContent",
+        showCloseIcon: "true",
+        width: "400px",
+        position: { X: 570, Y: 220 },
+        visible: dialogVisible,
+        close: dialogClose,
+    });
+    dialog.appendTo('#dialog');
     function commandClick(args) {
-            alert(JSON.stringify(args.rowData));  // display row data
-        }
+        var dialog = document.getElementById('dialog').ej2_instances[0];
+        dialog.visible = true;
+        dialog.content =
+            `<p><b>ShipName:</b> ${args.rowData.ShipName}</p>
+            <p><b>ShipPostalCode:</b> ${args.rowData.ShipPostalCode}</p>
+            <p><b>ShipAddress:</b> ${args.rowData.ShipAddress}</p>`
+    }
+    function dialogClose() {
+        dialogVisible = false;
     }
 </script>

ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper

@@ -1,21 +1,38 @@
 @{
     List<object> commands = new List<object>();
-    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"  } });
 }
-
-<div class="control-section">
-    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  commandClick="commandClick" allowPaging="true">
-        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="true"></e-grid-editSettings>
+<div id="dialog" ></div>
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="400px" commandClick="commandClick">
         <e-grid-columns>
-            <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
-            <e-grid-column field="Verified" headerText="Verified" editType="booleanedit" displayAsCheckBox="true" textAlign="Center" type="boolean" width="100"></e-grid-column>
-            <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+        <e-grid-column headerText="Commands" width="150" commands="commands"></e-grid-column>
         </e-grid-columns>
     </ejs-grid>
-</div>
-
 <script>
-        function commandClick(args) {
-            alert(JSON.stringify(args.rowData));  // display row data
-        }
+    var dialogVisible = false;
+    var dialog = new ej.popups.Dialog({
+        header: "Row Information",
+        content: "dialogContent",
+        showCloseIcon: "true",
+        width: "400px",
+        position: { X: 570, Y: 220 },
+        visible: dialogVisible,
+        close: dialogClose,
+    });
+    dialog.appendTo('#dialog');
+    function commandClick(args) {
+        var dialog = document.getElementById('dialog').ej2_instances[0];
+        dialog.visible = true;
+        dialog.content =
+            `<p><b>ShipName:</b> ${args.rowData.ShipName}</p>
+            <p><b>ShipPostalCode:</b> ${args.rowData.ShipPostalCode}</p>
+            <p><b>ShipAddress:</b> ${args.rowData.ShipAddress}</p>`
+    }
+    function dialogClose() {
+        dialogVisible = false;
+    }
 </script>