Change Column Header Text Dynamically
2 Mar 20221 minute to read
You can change the column HeaderText
dynamically through an external button.
Follow the given steps to change the header text dynamically:
Step 1: Get the column object corresponding to the field name by using the getColumnByField
method. Then, change the header text value.
var column = grid.getColumnByField("ShipCity"); // Get column object.
column.headerText = 'Changed Text';
Step 2: To reflect the changes in the grid header, invoke the refreshHeader
method.
grid.refreshHeader();
@Html.EJS().Button("change-text").Content("Change Header Text").IsPrimary(true).Render()
@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 Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowPaging().Render()
<script>
document.getElementById('change-text').addEventListener('click', () => { // changing the header text for ShipCity column.
var grid = document.getElementById("Grid").ej2_instances[0];
var column = grid.getColumnByField("Freight"); // get the JSON object of the column corresponding to the field name.
column.headerText = "Changed Text"; // assign a new header text to the column.
grid.refreshHeader();
});
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}