documentation(896235):Column rendering

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 → 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>

ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/expressioncolumn.cs

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

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

@@ -0,0 +1,19 @@
+@{ 
+    var totalCalories = "totalCaloriesFn";
+}
+
+@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
+{
+    col.Field("FoodName").HeaderText("Food Name").Width("150").Add();
+    col.Field("Protein").HeaderText("Protein").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.Field("Fat").HeaderText("Fat").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("80").Add();
+    col.Field("Carbohydrate").HeaderText("Carbohydrate").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.HeaderText("Calories Intake").ValueAccessor(totalCalories).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add();
+
+}).Render()
+
+<script>
+    function totalCaloriesFn(field, data) {
+        return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
+    }
+</script>

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

@@ -0,0 +1,19 @@
+@{ 
+    var totalCalories = "totalCaloriesFn";
+}
+
+<ejs-grid id="ValueAccessor" dataSource="@ViewBag.DataSource" height="280">
+    <e-grid-columns>
+        <e-grid-column field='FoodName' headerText='Food Name' width=150></e-grid-column>
+        <e-grid-column field='Protein' headerText='Protein' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field='Fat' headerText='Fat' textAlign='Right' width=80></e-grid-column>
+        <e-grid-column field='Carbohydrate' headerText='Carbohydrate' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column headerText='Calories Intake' textAlign='Right' valueAccessor='totalCalories' width=150></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script>
+    function totalCaloriesFn(field, data) {
+        return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
+    }
+</script>

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

@@ -0,0 +1,12 @@
+@Html.EJS().Grid("Grid").DataSource(dataManger =>
+{
+    dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/Orders/").CrossDomain(true).Adaptor("ODataV4Adaptor");
+
+}).Query("new ej.data.Query().expand('Employee')").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("120").Add();
+     col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
+    col.Field("Employee.City").HeaderText("City").Width("130").Add();
+
+}).AllowPaging().Render()

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

@@ -0,0 +1,10 @@
+<ejs-grid id="Grid" allowPaging='true' query="new ej.data.Query().expand('Employee')"  >    
+  <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" crossdomain="true" adaptor="ODataV4Adaptor"></e-data-manager>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" width="100" ></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID"  width="120"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City"  width="130"></e-grid-column>
+        <e-grid-column field="Employee.City" headerText="City"  width="130"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+

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

@@ -0,0 +1,23 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height(350).Columns(col =>
+{
+    col.HeaderText("S.No").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("90").Add();
+    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
+    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+}).AllowPaging().RowDataBound("rowDataBound").Render()
+</div>
+<script>
+    function rowDataBound(args) {
+        let grid = document.getElementById('Grid').ej2_instances[0];
+        if (args.row) {
+            var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex'));
+            var currentPageNumber = grid.pageSettings.currentPage;
+            var pageSize = grid.pageSettings.pageSize;
+            var startIndex = (currentPageNumber - 1) * pageSize;
+            args.row.querySelector('.e-rowcell').innerHTML = (
+                startIndex + rowIndex
+            ).toString();
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/serialnumber.cs

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

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

@@ -0,0 +1,23 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" height="350" rowDataBound='rowDataBound' allowPaging="true">
+    <e-grid-columns>
+        <e-grid-column headerText='S.No' width=90 textAlign='Center'></e-grid-column>
+        <e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" ></e-grid-column>
+        <e-grid-column field="ShipCity"  headerText="Ship City" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    function rowDataBound (args) {
+        let grid = document.getElementById('Grid').ej2_instances[0];
+        if (args.row) {
+            var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex'));
+            var currentPageNumber = grid.pageSettings.currentPage;
+            var pageSize = grid.pageSettings.pageSize;
+            var startIndex = (currentPageNumber - 1) * pageSize;
+            args.row.querySelector('.e-rowcell').innerHTML = (
+                startIndex + rowIndex
+            ).toString();
+        }
+    }
+</script>

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

@@ -0,0 +1,21 @@
+@{ 
+    var currencyFormatter = "currencyFormatterFn";
+    var concatenateFields = "concatenateFieldsFn";
+}
+
+@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
+    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").ValueAccessor(currencyFormatter).Add();
+    col.Field("ShipCity").HeaderText("Ship City").ValueAccessor(concatenateFields).Width("150").Add();
+}).Render()
+
+<script>
+    function currencyFormatterFn(field, data) {
+        return '€' + data['Freight']
+    }
+    function concatenateFieldsFn(field, data) {
+        return data['ShipCity'] + '-' + data['ShipRegion'];
+    }
+</script>

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

@@ -0,0 +1,23 @@
+@{ 
+    var currencyFormatter = "currencyFormatterFn";
+    var concatenateFields = "concatenateFieldsFn";
+}
+
+<ejs-grid id="ValueAccessor" dataSource="@ViewBag.DataSource" height="350">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right"  width="120"  valueAccessor="currencyFormatter" ></e-grid-column>                               
+        <e-grid-column field="ShipCity" valueAccessor="concatenateFields" headerText="Ship City" width="150"></e-grid-column> 
+    </e-grid-columns>
+</ejs-grid>
+
+<script>
+    function currencyFormatterFn(field, data) {
+        return '€' + data['Freight']
+    }
+
+    function concatenateFieldsFn(field, data) {
+        return data['ShipCity'] + '-' + data['ShipRegion']; // Assuming concatenation of ShipCity and ShipCountry
+    }
+</script>

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

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

ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/valueaccessor.cs → ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/column-rendering.cs

@@ -3,4 +3,4 @@ public IActionResult Index()
     var Order = OrderDetails.GetAllRecords();
     ViewBag.DataSource = Order;
     return View();
-} 
+} 

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

@@ -0,0 +1,9 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
+    col.Field("Freight").HeaderText("Freight").Width("80").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("80").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCity").HeaderText("Ship Country").Width("120").Add();
+
+}).Render()

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

@@ -0,0 +1,8 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height='315'>
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="100"></e-grid-column>
+        <e-grid-column field='CustomerID' headerText='Customer ID' width="120"></e-grid-column>
+        <e-grid-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width="80"></e-grid-column>
+        <e-grid-column field='OrderDate' headerText='Order Date' format='yMd' textAlign='Right' width="80"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>

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

@@ -1,9 +1,7 @@
-@Html.EJS().Grid("Complex").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.data).Height(350).Columns(col =>
 {
-    col.Field("EmployeeID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("Name.FirstName").HeaderText("FirstName").Width("140").Add();
-    col.Field("Name.LastName").HeaderText("LastName").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("City").Width("120").Add();
-    col.Field("Country").Width("140").Add();
-
-}).AllowPaging().Render()
+    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.Field("Name.FirstName").HeaderText("First Name").Width("120").Add();
+    col.Field("Name.LastName").HeaderText("Last Name").Width("120").Add();
+    col.Field("Title").HeaderText("Title").Width("150").Add();
+}).Render()

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

@@ -1,8 +1,8 @@
 <ejs-grid id="Grid" dataSource="@ViewBag.data" height="315" >     
     <e-grid-columns>
-        <e-grid-column field="EmployeeID" headerText="Employee ID"   width="100"  textAlign="Right"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee ID"   width="120"  textAlign="Right"></e-grid-column>
         <e-grid-column field="Name.FirstName" headerText="Last Name"  width="120"></e-grid-column>               
-        <e-grid-column field="Name.LastName"  headerText="Last Name"  width="100"></e-grid-column>
-        <e-grid-column field="Title"  headerText="Title"  width="100"></e-grid-column>
+        <e-grid-column field="Name.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>