Merge pull request #3262 from syncfusion-content/896235-column

documentation(896235):Column rendering topic

Author: MaithiliyK

ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/primary.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrderDetails.GetAllRecords();
+    ViewBag.dataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/columns/primary/razor renamed to ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor

@@ -2,8 +2,6 @@
 
 <script>
     function dataBound() {
-        var grid = document.getElementById('Auto').ej2_instances[0];
-        var column = grid.columns[0];
-        column.isPrimaryKey = 'true';
+        document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
     }
 </script>

ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper

@@ -0,0 +1,10 @@
+<ejs-grid id="Auto" dataSource="@ViewBag.dataSource" dataBound="dataBound">
+    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true">
+    </e-grid-editSettings>
+</ejs-grid>
+
+<script>
+    function dataBound() {
+        document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
+    }
+</script>

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

@@ -1 +1 @@
-@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource).Render()
+@Html.EJS().Grid("Auto").AllowPaging(true).DataSource((IEnumerable<object>)ViewBag.DataSource).Render()

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

@@ -1,3 +1,2 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
-           
+<ejs-grid id="Grid" allowPaging=true dataSource="@ViewBag.DataSource">   
 </ejs-grid>

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

@@ -1,17 +1,19 @@
-@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource).DataBound("dataBound").Render()
-
+@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.DataSource).DataBound("dataBound").Render()
 <script>
     function dataBound() {
-        for (var i = 0; i < this.columns.length; i++) {
-            this.columns[0].width = 120;
-            if (this.columns[i].field === "OrderDate") {
-                this.columns[i].type = "date";
+        const grid = document.getElementById('Auto').ej2_instances[0];
+        for (const cols of grid.columns) {
+            if (cols.field === 'OrderID') {
+                cols.width = 120;
             }
-            if (this.columns[i].type === "date") {
-                this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
+            if (cols.field === 'OrderDate') {
+                cols.type = 'date';
+                cols.format = 'yMd';
+            }
+            if (cols.field === 'Freight') {
+                cols.format = 'P2';
             }
-            this.columns[3].format = "P2";
         }
-        this.refreshColumns();
+        grid.refreshColumns();
     }
 </script>

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

@@ -4,16 +4,19 @@
 
 <script>
     function dataBound() {
-        for (var i = 0; i < this.columns.length; i++) {
-            this.columns[0].width = 120;
-            if (this.columns[i].field === "OrderDate") {
-                this.columns[i].type = "date";
+        const grid = document.getElementById('Auto').ej2_instances[0];
+        for (const cols of grid.columns) {
+            if (cols.field === 'OrderID') {
+                cols.width = 120;
             }
-            if (this.columns[i].type === "date") {
-                this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
+            if (cols.field === 'OrderDate') {
+                cols.type = 'date';
+                cols.format = 'yMd';
+            }
+            if (cols.field === 'Freight') {
+                cols.format = 'P2';
             }
-            this.columns[3].format = "P2";
         }
-        this.refreshColumns();
+        grid.refreshColumns();
     }
 </script>

ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/arraytypecolumns.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var ComplexData = ComplexData.GetAllRecords();
+    ViewBag.DataSource = ComplexData;
+    return View();
+} 

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

@@ -0,0 +1,16 @@
+@{
+    var valueAccess = "valueAccessFn";
+}
+
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
+{
+    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.Field("Name").HeaderText("Full Name").ValueAccessor(valueAccess).Width("150").Add();
+    col.Field("Title").HeaderText("Title").Width("150").Add();
+}).Render()
+
+<script>
+    function valueAccessFn(field, data) {
+        return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
+    }
+</script>

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

@@ -0,0 +1,17 @@
+@{
+    var valueAccess = "valueAccessFn";
+}
+
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="350" >    
+    <e-grid-columns>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" width="150" ></e-grid-column>
+        <e-grid-column field="Name" headerText="Full Name" width="150"></e-grid-column>
+        <e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script>
+    function valueAccessFn(field, data) {
+        return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
+    }
+</script>