Style and Appearance

14 Nov 20222 minutes to read

To modify the Grid appearance, you need to override the default CSS of grid. Find the CSS structure that can be used to modify the Grid appearance. Also, you have an option to create your own custom theme for all the JavaScript controls using our Theme Studio.

Customizing the Grid root element

Use the below CSS to customize the Grid root element.

.e-grid {
      font-family: cursive;
}

You can modify the grid styling appearance by overriding the default CSS style of the Grid.

In the following sample, the font family of grid content is changed to cursive, and the background color of rows, selected rows, alternate rows, and row hovering color is modified using the below CSS styles.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true">
    <e-grid-selectionSettings type="Multiple"></e-grid-selectionSettings>
    <e-grid-pagesettings pageSize="8"></e-grid-pagesettings>
    <e-grid-columns>    
        <e-grid-column field="OrderID" headerText="Order ID" type="number" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" type="number" format="C2" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" type="string" width="180"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<style>

    .e-grid {
        font-family: cursive;
    }

    .e-grid .e-row:hover .e-rowcell {
        background-color: rgb(204, 229, 255) !important;
    }

    .e-grid .e-rowcell.e-selectionbackground {
        background-color: rgb(230, 230, 250);
     }

    .e-grid .e-row.e-altrow {
        background-color: rgb(150, 212, 212);
     }

    .e-grid .e-row {
        background-color: rgb(180, 180, 180);
    }
    
</style>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}s