Skip to content

Commit 7743164

Browse files
MaithiliyKMaithiliyK
authored
Merge pull request #3225 from syncfusion-content/896909-columnheader
documentation(896909):Column headers topic
2 parents 88a760b + 0084660 commit 7743164

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+1882
-422
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
public IActionResult Index()
22
{
3-
var Emp = EmployeeDetails.GetAllRecords();
4-
ViewBag.DataSource = Emp;
5-
return View();
6-
}
3+
var orders = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = orders;
5+
return View();
6+
}

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

Lines changed: 63 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,75 @@
1-
@Html.EJS().Grid("HeaderTemplate").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
22
{
3-
col.Field("EmployeeID").HeaderTemplate("#employeetemplate").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4-
col.Field("FirstName").Width("140").Add();
5-
col.Field("BirthDate").HeaderTemplate("#datetemplate").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6-
col.Field("City").Width("120").Add();
7-
col.Field("Country").Width("140").Add();
8-
9-
}).AllowPaging().Render()
10-
3+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("140").HeaderTemplate("#customerTemplate").Add();
5+
col.Field("Freight").HeaderText("Freight").Width("120").HeaderTemplate("#freightTemplate").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("OrderDate").HeaderText("Order Date").Width("140").HeaderTemplate("#datetemplate").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
}).HeaderCellInfo("onHeaderCellInfo").Render()
118

129
<style>
13-
.e-grid .e-icon-userlogin::before {
14-
width: 15px !important;
15-
content: '\e7d4';
10+
@@font-face {
11+
font-family: 'ej2-headertemplate';
12+
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
13+
font-weight: normal;
14+
font-style: normal;
1615
}
1716

18-
.e-grid .e-icon-calender::before {
19-
width: 15px !important;
20-
content: '\e7b5';
17+
.e-icon-calender::before {
18+
font-family: 'ej2-headertemplate';
19+
content: "\e960";
2120
}
22-
</style>
2321

22+
.e-icon-userlogin::before {
23+
font-family: 'ej2-headertemplate';
24+
content: "\e702";
25+
}
26+
</style>
2427

28+
<script id="customerTemplate" type="text/x-template">
29+
<div>
30+
<span class="e-icon-userlogin e-icons employee">Customer ID</span>
31+
</div>
32+
</script>
33+
<script id="freightTemplate" type="text/x-template">
34+
<div id='dropdown'></div>
35+
</script>
2536
<script id="datetemplate" type="text/x-template">
26-
<span class="e-icon-calender e-icons headericon"></span> Order Date
37+
<div style="display:inline-flex">
38+
<div id="switch"></div>
39+
<label style="padding: 0px 0px 0px 10px" id="dateLabel">Order Date</label>
40+
</div>
2741
</script>
2842

29-
<script id="employeetemplate" type="text/x-template">
30-
<span class="e-icon-userlogin e-icons employee"></span> Emp ID
43+
<script>
44+
var headerText = "Order Date";
45+
var dropdownData = ["Freight", "Shipment", "Cargo"]
46+
47+
48+
function onHeaderCellInfo(args) {
49+
if (args.cell.column.field === 'Freight') {
50+
51+
var dropdownElement = args.node.querySelector('#dropdown');
52+
if (dropdownElement) {
53+
new ej.dropdowns.DropDownList({
54+
index: "0",
55+
width: "130",
56+
dataSource: dropdownData
57+
}).appendTo(dropdownElement);
58+
}
59+
60+
}
61+
if (args.cell.column.field === 'OrderDate') {
62+
var switchElement = args.node.querySelector('#switch');
63+
if (switchElement) {
64+
new ej.buttons.Switch({
65+
change: onSwitchToggle
66+
}).appendTo(switchElement);
67+
}
68+
69+
}
70+
}
71+
function onSwitchToggle(args) {
72+
headerText = args.checked ? "Purchase Date" : "Order Date";
73+
document.getElementById('dateLabel').innerText = headerText;
74+
}
3175
</script>

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

Lines changed: 65 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,72 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
1+
<ejs-grid id="Grid" dataSource="@(ViewBag.DataSource)" headerCellInfo="onHeaderCellInfo">
22
<e-grid-columns>
3-
<e-grid-column field="EmployeeID" headerTemplate="#employeetemplate" textAlign="Right" width="120"></e-grid-column>
4-
<e-grid-column field="FirstName" width="140"></e-grid-column>
5-
<e-grid-column field="BirthDate" headerTemplate="#datetemplate" textAlign="Right" width="130"></e-grid-column>
6-
<e-grid-column field="City" width="120"></e-grid-column>
7-
<e-grid-column field="Country" width="140"></e-grid-column>
3+
<e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
4+
<e-grid-column field="CustomerID" headerTemplate="#customerTemplate" width="130"></e-grid-column>
5+
<e-grid-column field="Freight" headerText='Freight' width="120" headerTemplate="#freightTemplate" textAlign="Right"></e-grid-column>
6+
<e-grid-column field="OrderDate" headerTemplate="#datetemplate" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
87
</e-grid-columns>
98
</ejs-grid>
109

11-
<style>
12-
.e-grid .e-icon-userlogin::before {
13-
width: 15px !important;
14-
content: '\e7d4';
15-
}
10+
<style>
11+
@@font-face {
12+
font-family: 'ej2-headertemplate';
13+
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
14+
font-weight: normal;
15+
font-style: normal;
16+
}
17+
.e-icon-calender::before {
18+
font-family: 'ej2-headertemplate';
19+
content: "\e960";
20+
}
1621

17-
.e-grid .e-icon-calender::before {
18-
width: 15px !important;
19-
content: '\e7b5';
20-
}
21-
</style>
22+
.e-icon-userlogin::before {
23+
font-family: 'ej2-headertemplate';
24+
content: "\e702";
25+
}
26+
</style>
2227

23-
<script id="datetemplate" type="text/x-template">
24-
<span class="e-icon-calender e-icons headericon"></span> Order Date
25-
</script>
28+
<script id="customerTemplate" type="text/x-template">
29+
<div>
30+
<span class="e-icon-userlogin e-icons employee">Customer ID</span>
31+
</div>
32+
</script>
33+
<script id="freightTemplate" type="text/x-template">
34+
<div id='dropdown'></div>
35+
</script>
36+
<script id="datetemplate" type="text/x-template">
37+
<div style="display:inline-flex">
38+
<div id="switch"></div>
39+
<label style="padding: 0px 0px 0px 10px" id="dateLabel">Order Date</label>
40+
</div>
41+
</script>
2642

27-
<script id="employeetemplate" type="text/x-template">
28-
<span class="e-icon-userlogin e-icons employee"></span> Emp ID
29-
</script>
43+
<script>
44+
var headerText = "Order Date";
45+
var dropdownData = ["Freight", "Shipment", "Cargo"]
46+
function onHeaderCellInfo(args) {
47+
if (args.cell.column.field === 'Freight') {
48+
var dropdownElement = args.node.querySelector('#dropdown');
49+
if (dropdownElement) {
50+
new ej.dropdowns.DropDownList({
51+
index:"0",
52+
width:"130",
53+
dataSource: dropdownData
54+
}).appendTo(dropdownElement);
55+
}
56+
}
57+
if (args.cell.column.field === 'OrderDate')
58+
{
59+
var switchElement = args.node.querySelector('#switch');
60+
if (switchElement) {
61+
new ej.buttons.Switch({
62+
change: onSwitchToggle
63+
}).appendTo(switchElement);
64+
}
65+
66+
}
67+
}
68+
function onSwitchToggle(args) {
69+
headerText = args.checked ? "Purchase Date" : "Order Date";
70+
document.getElementById('dateLabel').innerText = headerText;
71+
}
72+
</script>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
public IActionResult Index()
2+
{
3+
var Order = InventoryDetails.GetAllRecords();
4+
ViewBag.DataSource = Order;
5+
ViewBag.dropdownData = new string[] { "Header", "Both" };
6+
return View();
7+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div style="display: flex">
2+
<label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
3+
<span style="height:fit-content">
4+
@Html.EJS().DropDownList("Wrap").Index(0).Width("180px").DataSource(@ViewBag.dropdownData).Change("valueChange").Render()
5+
</span>
6+
</div>
7+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowTextWrap().Columns(col =>
8+
{
9+
col.Field("Inventor").HeaderText("Inventor Name").Width("130").Add();
10+
col.Field("NumberOfPatentFamilies").HeaderText("Number of Patent Families").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
11+
col.Field("Country").HeaderText("Country").Width("100").Add();
12+
col.Field("Active").HeaderText("Active").Width("100").Add();
13+
col.Field("Mainfieldsofinvention").HeaderText("Main Fields Of Invention").Width("150").Add();
14+
}).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Header); }).Render()
15+
16+
<script>
17+
function valueChange(args) {
18+
var grid = document.getElementById("Grid").ej2_instances[0];
19+
grid.textWrapSettings.wrapMode = args.value;
20+
}
21+
</script>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div style="display: flex">
2+
<label style="padding: 3px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
3+
<span style="height:fit-content">
4+
<ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="valueChange"></ejs-dropdownlist>
5+
</span>
6+
</div>
7+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowTextWrap=true>
8+
<e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>
9+
<e-grid-columns>
10+
<e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
11+
<e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="150"></e-grid-column>
12+
<e-grid-column field="Country" headerText="Country" width="100"></e-grid-column>
13+
<e-grid-column field="Active" headerText="Active" textAlign="Right" width="100"></e-grid-column>
14+
<e-grid-column field="Mainfieldsofinvention" headerText="Main Fields Of Invention" width="150"></e-grid-column>
15+
</e-grid-columns>
16+
</ejs-grid>
17+
18+
<script type="text/javascript">
19+
function valueChange(args) {
20+
var grid = document.getElementById("Grid").ej2_instances[0];
21+
grid.textWrapSettings.wrapMode = args.value;
22+
}
23+
</script>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var orders = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = orders;
5+
return View();
6+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div style="padding:0px 0px 20px 0px">
2+
@Html.EJS().Button("buttons").Content("Change Header Text").Render()
3+
</div>
4+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
5+
{
6+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
8+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
9+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
10+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
11+
}).Render()
12+
13+
<script type="text/javascript">
14+
document.getElementById('buttons').addEventListener('click', function () {
15+
const headerTextMap = {
16+
OrderID: "Order ID",
17+
CustomerID: "Customer ID",
18+
Freight: "Freight Charge",
19+
ShipCountry: "Ship To Country",
20+
}
21+
var grid = document.getElementById("Grid").ej2_instances[0];
22+
grid.columnModel.forEach((column) => {
23+
column.headerText = headerTextMap[column.field];
24+
});
25+
grid.refreshHeader();
26+
});
27+
</script>
28+

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div style="padding:0px 0px 20px 0px">
2+
<ejs-button id="buttons" content="Change Header Text">
3+
</ejs-button>
4+
</div>
5+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" >
6+
<e-grid-columns>
7+
<e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
8+
<e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
9+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
10+
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
11+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
12+
</e-grid-columns>
13+
</ejs-grid>
14+
15+
<script type="text/javascript">
16+
document.getElementById('buttons').addEventListener('click', function () {
17+
const headerTextMap = {
18+
OrderID: "Order ID",
19+
CustomerID: "Customer ID",
20+
Freight: "Freight Charge",
21+
ShipCountry: "Ship To Country",
22+
}
23+
var grid = document.getElementById("Grid").ej2_instances[0];
24+
grid.columnModel.forEach((column) => {
25+
column.headerText = headerTextMap[column.field];
26+
});
27+
grid.refreshHeader();
28+
29+
});
30+
</script>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var orders = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = orders;
5+
return View();
6+
}

0 commit comments

Comments
 (0)