Customize Column Styles in ASP.NET Core Grid control

22 Oct 2021 / 1 minute to read

You can customize the appearance of the header and content of a particular column using the customAttributes property.

To customize the grid column, follow the given steps:

Step 1:

Create a CSS class with custom style to override the default style for rowcell and headercell.

.e-grid .e-rowcell.customcss{
    background-color: #ecedee;
    color: 'red';
    font-family: 'Bell MT';
    font-size: 20px;
}

.e-grid .e-headercell.customcss{
    background-color: #2382c3;
    color: white;
    font-family: 'Bell MT';
    font-size: 20px;
}

Step 2:

Add the custom CSS class to the specified column by using the customAttributes property.

<e-grid-column field="Freight" headerText="Freight" width="150"  customAttributes=@(new { @class="customcss" } )></e-grid-column>

tagHelper

custom-column-style.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  allowFiltering="true" >
    <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" customAttributes=@(new{@class="customcss"}) width="150" ></e-grid-column>        
        <e-grid-column field="ShipCity" headerText="Shio City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<style>

.e-grid .e-rowcell.customcss{
    background-color: #ecedee;
    color: 'red';
    font-family: 'Bell MT';
    font-size: 20px;
}

.e-grid .e-headercell.customcss{
    background-color: #2382c3;
    color: white;
    font-family: 'Bell MT';
    font-size: 20px;
}

</style>

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}