Search results

Style and Appearance in JavaScript Grid control

08 Dec 2022 / 2 minutes to read

To modify the Grid appearance, you need to override the default CSS of grid. Please 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.

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

Source
Preview
index.ts
index.html
Copied to clipboard
import { Grid, Page, Selection } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(Page, Selection);

let grid: Grid = new 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');
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-calendars/styles/material.css" rel="stylesheet" />
    
    
    
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <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>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style='height:350px;'>
        <div id='Grid'></div>        
    </div>
</body>
</html>

See Also