Style and appearance in EJ2 JavaScript Grid control

2 Feb 20246 minutes to read

The Grid control offers various ways to customize its appearance using both default CSS and custom themes. Let’s go over some common approaches:

Default CSS overrides:

You can use custom CSS to override the default styles of the Grid control. This allows you to change colors, fonts, paddings, and more. You can inspect the generated HTML of the Grid using browser developer tools to identify the relevant CSS classes and styles.

Here’s a basic example of how you can override the header background color of the Grid:

/* In your control's CSS file */
.e-grid .e-headercell {
    background-color: #333; /* Override the header background color */
    color: #fff;
}

Change header background

Using theme studio:

Syncfusion’s Theme Studio tool allows you to create custom themes for all their controls, including the Grid. This is a more advanced approach that lets you define a comprehensive set of styles to achieve a consistent look and feel throughout your application.

  1. Visit the Syncfusion Theme Studio.
  2. Select the Grid control from the left panel.
  3. Customize various aspects of the control’s appearance, such as colors, typography, and spacing.
  4. Once done, you can download the generated CSS file and include it in your EJ2 JavaScript project.

Customizing the grid root element

To customize the appearance of the root element of the Syncfusion EJ2 JavaScript Grid control, you can use CSS. Here’s an example of how to modify the font family and row colors using CSS:

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

grid root element

The above code snippet, the .e-grid class targets the root element of the Syncfusion EJ2 JavaScript Grid control, and the font-family property is set to cursive to change the font family of the grid content.

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.

ej.grids.Grid.Inject(ej.grids.Page, ej.grids.Selection);
var grid = new ej.grids.Grid({
    dataSource: data,
    selectionSettings: { type: 'Multiple' },
    allowPaging: true,
    pageSettings: { pageSize: 8 },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', type: 'number', textAlign: 'Right', isPrimaryKey: true, width: 100 },
        { field: 'CustomerID', headerText: 'Customer ID', type: 'string', width: 120 },
        { field: 'Freight', headerText: 'Freight', type: 'number', format: 'C2', textAlign: 'Right', width: 100 },
        { field: 'ShipName', headerText: 'Ship Name', type: 'string', width: 180 },
    ],
    height: 273
});
grid.appendTo('#Grid');
<!DOCTYPE html><html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <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>
<script src="https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container" style="height:350px;">
        <div id="Grid"></div>        
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also