Search results

Change Column Header Text Dynamically in ASP.NET MVC Grid control

20 Apr 2021 / 1 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.

Copied to clipboard
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.

Copied to clipboard
Copied to clipboard
@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("ShipCountry").HeaderText("Ship Country").Width("120").Add();


    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.
Copied to clipboard
public IActionResult Index()
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();