documentation(896909):Column headers topic

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

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

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

@@ -1,31 +1,75 @@
-@Html.EJS().Grid("HeaderTemplate").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
 {
-    col.Field("EmployeeID").HeaderTemplate("#employeetemplate").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("FirstName").Width("140").Add();
-    col.Field("BirthDate").HeaderTemplate("#datetemplate").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("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").HeaderTemplate("#customerTemplate").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").HeaderTemplate("#freightTemplate").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("140").HeaderTemplate("#datetemplate").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+}).HeaderCellInfo("onHeaderCellInfo").Render()
 
 <style>
-    .e-grid .e-icon-userlogin::before {
-        width: 15px !important;
-        content: '\e7d4';
+    @@font-face {
+        font-family: 'ej2-headertemplate';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+        font-weight: normal;
+        font-style: normal;
     }
 
-    .e-grid .e-icon-calender::before {
-        width: 15px !important;
-        content: '\e7b5';
+    .e-icon-calender::before {
+        font-family: 'ej2-headertemplate';
+        content: "\e960";
     }
-</style>
 
+    .e-icon-userlogin::before {
+        font-family: 'ej2-headertemplate';
+        content: "\e702";
+    }
+</style>
 
+<script id="customerTemplate" type="text/x-template">
+    <div>
+        <span class="e-icon-userlogin e-icons employee">Customer ID</span>
+    </div>
+</script>
+<script id="freightTemplate" type="text/x-template">
+    <div id='dropdown'></div>
+</script>
 <script id="datetemplate" type="text/x-template">
-    <span class="e-icon-calender e-icons headericon"></span> Order Date
+    <div style="display:inline-flex">
+        <div id="switch"></div>
+        <label style="padding: 0px 0px 0px 10px" id="dateLabel">Order Date</label>
+    </div>
 </script>
 
-<script id="employeetemplate" type="text/x-template">
-    <span class="e-icon-userlogin e-icons employee"></span> Emp ID
+<script>
+    var headerText = "Order Date";
+    var dropdownData = ["Freight", "Shipment", "Cargo"]
+
+
+    function onHeaderCellInfo(args) {
+        if (args.cell.column.field === 'Freight') {
+
+            var dropdownElement = args.node.querySelector('#dropdown');
+            if (dropdownElement) {
+                new ej.dropdowns.DropDownList({
+                    index: "0",
+                    width: "130",
+                    dataSource: dropdownData
+                }).appendTo(dropdownElement);
+                }
+
+        }
+        if (args.cell.column.field === 'OrderDate') {
+            var switchElement = args.node.querySelector('#switch');
+            if (switchElement) {
+                new ej.buttons.Switch({
+                    change: onSwitchToggle
+                }).appendTo(switchElement);
+            }
+
+        }
+    }
+    function onSwitchToggle(args) {
+        headerText = args.checked ? "Purchase Date" : "Order Date";
+        document.getElementById('dateLabel').innerText = headerText;
+    }
 </script>

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

@@ -1,29 +1,72 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
+<ejs-grid id="Grid" dataSource="@(ViewBag.DataSource)" headerCellInfo="onHeaderCellInfo">
     <e-grid-columns>
-        <e-grid-column field="EmployeeID" headerTemplate="#employeetemplate" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="FirstName" width="140"></e-grid-column>
-        <e-grid-column field="BirthDate" headerTemplate="#datetemplate" textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="City" width="120"></e-grid-column>
-        <e-grid-column field="Country" width="140"></e-grid-column>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerTemplate="#customerTemplate" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText='Freight' width="120" headerTemplate="#freightTemplate" textAlign="Right"></e-grid-column>
+        <e-grid-column field="OrderDate" headerTemplate="#datetemplate" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
 
-    <style>
-        .e-grid .e-icon-userlogin::before {
-            width: 15px !important;
-            content: '\e7d4';
-        }
+<style>
+    @@font-face {
+        font-family: 'ej2-headertemplate';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+    .e-icon-calender::before {
+        font-family: 'ej2-headertemplate';
+        content: "\e960";
+    }
 
-        .e-grid .e-icon-calender::before {
-            width: 15px !important;
-            content: '\e7b5';
-        }
-    </style>
+    .e-icon-userlogin::before {
+        font-family: 'ej2-headertemplate';
+        content: "\e702";
+    }
+</style>
 
-    <script id="datetemplate" type="text/x-template">
-        <span class="e-icon-calender e-icons headericon"></span> Order Date
-    </script>
+<script id="customerTemplate" type="text/x-template">
+    <div>
+        <span class="e-icon-userlogin e-icons employee">Customer ID</span>
+    </div>
+</script>
+<script id="freightTemplate" type="text/x-template">
+    <div id='dropdown'></div>
+</script>
+<script id="datetemplate" type="text/x-template">
+    <div style="display:inline-flex">
+        <div id="switch"></div>
+        <label style="padding: 0px 0px 0px 10px" id="dateLabel">Order Date</label>
+    </div>
+</script>
 
-    <script id="employeetemplate" type="text/x-template">
-        <span class="e-icon-userlogin e-icons employee"></span> Emp ID
-    </script>
+<script>
+    var headerText = "Order Date";
+    var dropdownData = ["Freight", "Shipment", "Cargo"]
+    function onHeaderCellInfo(args) {
+        if (args.cell.column.field === 'Freight') {
+                var dropdownElement = args.node.querySelector('#dropdown');
+                if (dropdownElement) {
+                    new ej.dropdowns.DropDownList({
+                        index:"0",
+                        width:"130",
+                        dataSource: dropdownData
+                    }).appendTo(dropdownElement);
+                }
+        }
+        if (args.cell.column.field === 'OrderDate')
+        {
+            var switchElement = args.node.querySelector('#switch');
+            if (switchElement) {
+                new ej.buttons.Switch({
+                    change: onSwitchToggle
+                }).appendTo(switchElement);
+            }
+
+        }
+    }
+    function onSwitchToggle(args) {
+        headerText = args.checked ? "Purchase Date" : "Order Date";
+        document.getElementById('dateLabel').innerText = headerText;
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/headertext.cs

@@ -0,0 +1,7 @@
+public IActionResult Index()
+{
+    var Order = InventoryDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    ViewBag.dropdownData = new string[] { "Header", "Both" };
+    return View();
+}

ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor

@@ -0,0 +1,21 @@
+<div style="display: flex">
+    <label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
+    <span style="height:fit-content">
+        @Html.EJS().DropDownList("Wrap").Index(0).Width("180px").DataSource(@ViewBag.dropdownData).Change("valueChange").Render()
+    </span>
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowTextWrap().Columns(col =>
+{
+    col.Field("Inventor").HeaderText("Inventor Name").Width("130").Add();
+    col.Field("NumberOfPatentFamilies").HeaderText("Number of Patent Families").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("Country").HeaderText("Country").Width("100").Add();
+    col.Field("Active").HeaderText("Active").Width("100").Add();
+    col.Field("Mainfieldsofinvention").HeaderText("Main Fields Of Invention").Width("150").Add();
+}).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Header); }).Render()
+
+<script>
+    function valueChange(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.textWrapSettings.wrapMode = args.value;
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper

@@ -0,0 +1,23 @@
+<div style="display: flex">
+    <label style="padding: 3px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
+    <span style="height:fit-content">
+        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="valueChange"></ejs-dropdownlist>
+    </span>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowTextWrap=true>
+    <e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>
+    <e-grid-columns>
+        <e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="150"></e-grid-column>
+        <e-grid-column field="Country" headerText="Country" width="100"></e-grid-column>
+        <e-grid-column field="Active" headerText="Active" textAlign="Right" width="100"></e-grid-column>
+        <e-grid-column field="Mainfieldsofinvention" headerText="Main Fields Of Invention" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script type="text/javascript">
+    function valueChange(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.textWrapSettings.wrapMode = args.value;
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/columntext.cs

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

ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor

@@ -0,0 +1,28 @@
+<div style="padding:0px 0px 20px 0px">
+    @Html.EJS().Button("buttons").Content("Change Header Text").Render()
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Render()
+
+<script type="text/javascript">
+    document.getElementById('buttons').addEventListener('click', function () {
+        const headerTextMap = {
+                OrderID: "Order ID",
+                CustomerID: "Customer ID",
+                Freight: "Freight Charge",
+                ShipCountry: "Ship To Country",
+        }
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.columnModel.forEach((column) => {
+            column.headerText = headerTextMap[column.field];
+        });
+        grid.refreshHeader();
+    });
+</script>
+

ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper

@@ -0,0 +1,30 @@
+<div style="padding:0px 0px 20px 0px">
+    <ejs-button id="buttons" content="Change Header Text">
+    </ejs-button>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" >
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script type="text/javascript">
+    document.getElementById('buttons').addEventListener('click', function () {
+        const headerTextMap = {
+            OrderID: "Order ID",
+            CustomerID: "Customer ID",
+            Freight: "Freight Charge",
+            ShipCountry: "Ship To Country",
+        }
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.columnModel.forEach((column) => {
+            column.headerText = headerTextMap[column.field];
+        });
+        grid.refreshHeader();
+
+    });
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/headertext.cs

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