HelpBot Assistant

How can I help you?

Cell Customization and Styling in Angular Grid Component

19 Mar 202624 minutes to read

A cell in the Syncfusion® Angular Grid component represents the smallest unit of data within the grid. Each cell corresponds to the intersection of a row and a column, and it is responsible for displaying the value associated with that specific row-column combination. Cells can display plain text, formatted values, or fully customized content, making them highly flexible for presenting structured data in a grid layout. to create interactive and visually appealing data presentations.

Displaying the HTML content

Displaying HTML content in a grid can be useful when displaying formatted content, such as images, links, or tables, in a tabular format. The Grid component allows HTML tags to be displayed in the grid header and content. By default, HTML content is encoded to prevent potential security vulnerabilities. However, the disableHtmlEncode property can be set to false to display HTML tags without encoding. This feature is useful when displaying HTML content in a grid cell.

In the following example, the EJ2 Toggle Switch Button component is added to enable and disable the disableHtmlEncode property. When the switch is toggled, the change event is triggered and the disableHtmlEncode property of the column is updated accordingly. The refreshColumns method is called to refresh the grid and display the updated content.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs,  ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule, } from '@syncfusion/ej2-angular-buttons';
import { DetailRowService, GridComponent, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule ],
    providers: [DetailRowService],
    standalone: true,
    selector: 'app-root',
    template: `
        <div> <label style="padding: 10px 10px"> Enable or disable HTML Encode </label>
        <ejs-switch id="switch" (change)="change($event)"></ejs-switch>
        </div>
        <ejs-grid #grid [dataSource]='data' [height]='300' style="padding: 5px 5px">
            <e-columns>
                <e-column field='OrderID' headerText= 'Order ID' textAlign='Right' width=140></e-column>
                <e-column field='CustomerID' headerText="<strong> Customer ID </strong>" width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=80></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
            </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;

    change(args: ChangeEventArgs) {
        if (args.checked) {
            (this.grid as GridComponent).getColumnByField('CustomerID').disableHtmlEncode = false;
        } else {
            (this.grid as GridComponent).getColumnByField('CustomerID').disableHtmlEncode = true;
        }
        (this.grid as GridComponent).refreshColumns();
    }

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The disableHtmlEncode property of the column can also be disabled using getColumns method on change event of Switch component. This is demonstrated in the following code snippet:

change(args) {
  if (args.checked) {
    this.grid.getColumns()[1].disableHtmlEncode = false;
  } else {
    this.grid.getColumns()[1].disableHtmlEncode = true;
  }
  this.grid.refresh();
}
  • The disableHtmlEncode property disables HTML encoding for the corresponding column in the grid.
  • If the property is set to true, any HTML tags in the column’s data will be displayed.
  • If the property is set to false, the HTML tags will be removed and displayed as plain text.
  • Disabling HTML encoding can potentially introduce security vulnerabilities, so use caution when enabling this feature.
  • If enableHtmlSanitizer property of grid is set to true, then the content is sanitized to prevent any potential security vulnerabilities.

Autowrap the grid content

The auto wrap feature allows cell content in the grid to wrap to the next line when it exceeds the boundary of the specified cell width. Cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion® Grid, an appropriate width must be set for the columns. The column width defines the maximum width of a column and helps wrap content automatically.

To enable auto wrap, set the allowTextWrap property to true. The wrap mode can also be configured by setting the textWrapSettings.wrapMode property.

Grid provides three wrap mode options:

  • Both - Default value. Wraps both header and content text.
  • Header - Wraps only column header text.
  • Content - Wraps only cell content text.

The following example demonstrates setting the allowTextWrap property to true and specify the wrap mode as Content by setting the textWrapSettings.wrapMode property. Also change the textWrapSettings.wrapMode property to Content and Both on changing the dropdown value using the change event of the DropDownList component.

import { inventoryData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { GridComponent, GridModule, PageService, TextWrapSettingsModel, WrapMode } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule, DropDownListAllModule],
  providers: [PageService],
  standalone: true,
  selector: 'app-root',
  template: ` 
    <div style="display: flex">
    <label style="padding: 5px 5px 5px 0"> Change the wrapmode of auto wrap feature: </label> 
    <ejs-dropdownlist
    index="0"
    width="100"
    [dataSource]="ddlData"
    (change)="valueChange($event)">
  </ejs-dropdownlist>
  </div>
    <ejs-grid #grid style="padding: 5px 5px" [dataSource]='data' allowPaging='true' allowTextWrap='true' [textWrapSettings]='wrapSettings' height='237'>
        <e-columns>
            <e-column field='Inventor' headerText='Inventor Name' width='180' textAlign="Right"></e-column>
            <e-column field='NumberofPatentFamilies' headerText="Number of Patent Families" width='180' textAlign="Right"></e-column>
            <e-column field='Country' headerText='Country' width='140'></e-column>
            <e-column field='Active' width='120'></e-column>
            <e-column field='Mainfieldsofinvention' headerText='Main fields of invention' width='200'></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  public wrapSettings?: TextWrapSettingsModel;
  @ViewChild('grid')
  public grid?: GridComponent;
  public ddlData: object[] = [
    { text: 'Content', value: 'Content' },
    { text: 'Both', value: 'Both' },
  ];

  ngOnInit(): void {
    this.data = inventoryData;
    this.wrapSettings = { wrapMode: 'Content' };
  }

  valueChange(args: ChangeEventArgs): void {
    (this.grid as GridComponent).textWrapSettings.wrapMode = args.value as WrapMode;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid’s width.
  • If a column’s header text contains no white space, the text may not be wrapped.
  • If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, the headerTemplate and template properties of the column can be used to customize the appearance of the header and cell content.

Customize cell styles

Customizing grid cell styles allows modification of cell appearance in the grid control to meet specific design requirements. The font, background color, and other cell styles can be customized using grid events, CSS, properties, or method support.

Using event

The queryCellInfo event of the grid can be used to customize cell appearance. This event triggers when the grid renders each header cell and provides an object containing information about the header cell. This object can be used to modify header cell styles.

The following example demonstrates adding the queryCellInfo event handler to the grid. In the event handler, the current column is checked to determine if it is the “Freight” field, and the appropriate CSS class is applied to the cell based on its value.

import { columnDataType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { Column, DetailRowService, GridModule, QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule ],
  providers: [DetailRowService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid [dataSource]='data' [enableHover]='false' [allowSelection]='false' [height]='315' (queryCellInfo)='customizeCell($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=80></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

  public data?: object[];

  ngOnInit(): void {
    this.data = data;
  }

  customizeCell({ data, cell, column }: QueryCellInfoEventArgs) {
    if ((column as Column).field === 'Freight') {
      const freightData = (data as columnDataType).Freight
      if (freightData <= 30) {
        (cell as Element).classList.add('below-30');
      }
      else if (freightData > 30 && freightData < 80) {
        (cell as Element).classList.add('below-80');
      } else {
        (cell as Element).classList.add('above-80');
      }
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The queryCellInfo event is triggered for every cell of the grid, so it may impact grid performance when used to modify a large number of cells.

Using CSS

Styles can be applied to cells using CSS selectors. The Grid provides a class name for each cell element, which can be used to apply styles to specific cells or cells in a particular column. The e-rowcell class is used to style row cells, and the e-selectionbackground class is used to change the background color of selected rows.

.e-grid td.e-cellselectionbackground {
  background: #9ac5ee;
  font-style: italic;
}

The following example demonstrates CSS-based cell styling for selected rows using custom class names.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { DetailRowService, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [DetailRowService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [height]='315' [selectionSettings]="selectOptions">
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
                        <e-column field='ShipName' headerText='Ship Name' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data: any;
    public selectOptions: any= {
        mode: 'Cell',
        type: 'Multiple',
    };
    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Using property

To customize the style of grid cells, define the customAttributes property in the column definition object. The customAttributes property takes an object with name-value pairs to customize CSS properties for grid cells. Multiple CSS properties can be set to the custom class using the customAttributes property.

.custom-css {
  background: #d7f0f4;
  font-style: italic;
  color: navy;
}

Here, the customAttributes property of the “Ship City” column is set to an object that contains the CSS class “custom-css”. This CSS class is applied to all cells in the “Ship City” column of the grid.

{
    field: 'ShipCity', headerText: 'Ship City', customAttributes: {class: 'custom-css'}, width: '120'
}

The following example demonstrates customAttributes property usage for styling “Order ID” and “Ship City” columns.

import { data } from './datasource';
import { Component, NgModule, OnInit } from '@angular/core';
import { DetailRowService, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule],
    providers: [DetailRowService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [height]='315'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' [customAttributes]="{class: 'custom-css'}"
                         textAlign='Right' width=100></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='ShipCity' headerText='Ship City' [customAttributes]="{class: 'custom-css'}" width=130 ></e-column>
                        <e-column field='ShipName' headerText='Ship Name' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom attributes apply to all cells in the specified column, including header and content cells.

Using methods

The Grid provides the following methods to customize the appearance of grid column headers and cells:

  1. getHeaderContent: This method is used to customize column header appearance. The header element is accessed using the querySelector method, and styles are applied using the style property of the cell element.

  2. getCellFromIndex: This method is used to customize the appearance of a specific cell in the grid by specifying the row and column index of the target cell.

The following example demonstrates the use of the getColumnHeaderByIndex and getCellFromIndex methods to customize the appearance of the “Customer ID” column header and specific cell inside the dataBound event of the grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DetailRowService, GridComponent, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [DetailRowService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [height]='315' (dataBound)="dataBound()">
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
                        <e-column field='ShipName' headerText='Ship Name' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {
    @ViewChild('grid', { static: true })
    public grid?: GridComponent;
    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
    dataBound() {
        let header = (this.grid as GridComponent).getHeaderContent().querySelector('.e-headercell');
        (header as HTMLElement).style.backgroundColor = 'red';
        (header as HTMLElement).style.color = 'white';
        let cell = (this.grid as GridComponent).getCellFromIndex(1, 2);
        (cell as HTMLElement).style.background = '#f9920b';
        (cell as HTMLElement).style.color = 'white';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Make sure to pass the correct row and column indices to getCellFromIndex method, or else the appearance of the wrong cell might get customized.

Clip Mode

The clip mode feature is useful when grid cells contain long text or content that overflows the cell’s width or height. It provides options to display overflow content by truncating it, displaying an ellipsis, or displaying an ellipsis with a tooltip. This feature is enabled by setting the clipMode property to one of the available options.

Three types of clipMode are available:

  • Clip: Truncates overflowing content without visual indicators.
  • Ellipsis: Displays ellipsis (…) for overflowing content.
  • EllipsisWithTooltip: Shows ellipsis with hover tooltip displaying full content.

The following example demonstrates clip mode functionality with dynamic switching using a DropDownList change event. The refresh method applies the updated clip mode settings.

import { inventoryData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { ClipMode, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule,DropDownListAllModule ],
  providers: [PageService],
  standalone: true,
  selector: 'app-root',
  template: `
    <div style="display: flex">
    <label style="padding: 10px 10px 26px 0"> Change the clip mode: </label>
    <ejs-dropdownlist
    style="margin-top:5px"
    index="0"
    width="150"
    [fields]='fields'
    [dataSource]="ddlData"
    (change)="valueChange($event)"></ejs-dropdownlist>
    </div>
    <ejs-grid #grid style="padding: 5px 5px" [dataSource]='data' allowPaging='true'>
        <e-columns>
          <e-column field='MainFieldsofInvention' headerText='Invention' width='130'></e-column>
          <e-column field='Inventor' headerText='Inventor'  width='80'></e-column>
          <e-column field='NumberofPatentFamilies' headerText='Count'  width='100'></e-column>
          <e-column field='Country' headerText='Country' width='80'></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public fields: object = { text: 'text', value: 'value' };
  public ddlData: object[] = [
    { text: 'Ellipsis', value: 'Ellipsis' },
    { text: 'Clip', value: 'Clip' },
    { text: 'Ellipsis with Tooltip', value: 'EllipsisWithTooltip' },
  ];
  ngOnInit(): void {
    this.data = inventoryData;
  }
  valueChange(args: ChangeEventArgs): void {
    (this.grid as GridComponent).getColumnByField('MainFieldsofInvention').clipMode = (args.value as ClipMode);
    (this.grid as GridComponent).refresh();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • By default, clipMode value is Ellipsis.
  • When the width property is set for a column, the clip mode feature is automatically applied to that column if content exceeds the specified width.
  • The Clip mode should be used with caution, as it may result in important information being truncated. The Ellipsis or EllipsisWithTooltip modes are generally recommended instead.

Tooltip

The Syncfusion® Grid displays information about grid columns when the user hovers over them with the mouse.

Render bootstrap tooltip in grid cells

Integrate Bootstrap tooltips with grid cells for custom tooltip styling and behavior. This approach requires Bootstrap framework installation and configuration.

Step 1: Install Bootstrap and jQuery packages:

npm install @ng-bootstrap/ng-bootstrap
npm install jquery

Configure angular.json with required styles and scripts:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/@syncfusion/ej2-material-theme/styles/material3.css"
],
"scripts": ["node_modules/jquery/dist/jquery.min.js"]

Step 2: Add Bootstrap CDN links to index.html:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

Step 3: Implement Bootstrap tooltip with Angular life cycle hooks:

import { AfterViewChecked, Component } from '@angular/core';
import { orderDataSource } from './data';
import 'bootstrap';
declare var $: any;
@Component({
  selector: 'app-root',
  template: `
  <div>
    <ejs-grid [dataSource]='data' [allowPaging]='true'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120>
        <ng-template #template let-data>
          <div class="row clearfix">
            <div class="col-md-2" style="text-align:right">
              <div
                data-toggle="tooltip"
                data-container="body"
                [title]="data.CustomerID"
                data-placement="left"
                data-delay='{"show":"800", "hide":"300"}'>
                <i class="fas fa-pencil-alt"></i> {{data.CustomerID }}
              </div>
            </div>
          </div>
        </ng-template>
        </e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
      </e-columns>
    </ejs-grid>
 </div>`
})
export class AppComponent implements AfterViewChecked {
  public data = orderDataSource;

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip();
  }
}

The following screenshot represents the Bootstrap tooltip for the “CustomerID” field:

Bootstrap tooltip

  • Bootstrap CDN links are required in the HTML file for proper functionality.
  • The ngAfterViewChecked life cycle hook ensures tooltip initialization after view rendering.

Display custom tooltip for columns

The Grid provides a feature to display custom tooltips for its columns using the EJ2 Tooltip component. This allows providing additional information about columns when the user hovers over them.

To enable custom tooltips for columns in the grid, the grid control is rendered inside the Tooltip component and the target is set as .e-rowcell. This displays the tooltip when hovering over grid cells.

The tooltip content for grid cells can be changed by using the following code in the beforeRender event.

beforeRender(args): void {
  if (args.target.classList.contains('e-rowcell')) {
    // Customize tooltip content based on cell data
    this.tooltip.content = 'This is value "' + args.target.innerText + '" ';
  }
}

The following example demonstrates customizing the tooltip content for grid cells by using the beforeRender event of the EJ2 Tooltip component.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { TooltipComponent, TooltipEventArgs, TooltipModule } from '@syncfusion/ej2-angular-popups';

@Component({
    imports: [  GridModule, ButtonModule, TooltipModule ],
    standalone: true,
    selector: 'app-root',
    template: `  <ejs-tooltip #tooltip target=".e-rowcell" (beforeRender)="beforeRender($event)">
                    <ejs-grid [dataSource]='data' [height]='315'>
                        <e-columns>
                            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                        </e-columns>
                    </ejs-grid>
                </ejs-tooltip>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('tooltip')
    public tooltip?: TooltipComponent;
    ngOnInit(): void {
        this.data = data;
    }
    beforeRender(args: TooltipEventArgs): void {
        if (args.target.classList.contains('e-rowcell')) {
            (this.tooltip as TooltipComponent).content = 'The value is "' + args.target.innerText + '" ';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Grid lines

The gridLines in a grid are used to separate cells with horizontal and vertical lines for better readability. Grid lines are enabled by setting the gridLines property to one of the following values:

Modes Actions
Both Displays both the horizontal and vertical grid lines.
None No grid lines are displayed.
Horizontal Displays the horizontal grid lines only.
Vertical Displays the vertical grid lines only.
Default Displays grid lines based on the theme.

The following example demonstrates setting the gridLines property based on changing the dropdown value using the change event of the DropDownList component.

import { inventoryData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { GridComponent, GridLine, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, DropDownListAllModule ],
    providers: [PageService],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
        <label style="padding:  5px 5px 5px 0"> Change the grid lines: </label> 
        <ejs-dropdownlist id="value" #dropdown index="0" width="100" [dataSource]="ddlData" (change)="valueChange($event)"></ejs-dropdownlist>
    </div>
    <ejs-grid #grid style="padding: 5px 5px" [dataSource]='data' height='290' gridLines='Default'>
        <e-columns>
            <e-column field='Inventor' headerText='Inventor Name' width='180' textAlign="Right"></e-column>
            <e-column field='NumberofPatentFamilies' headerText="Number of Patent Families" width='180' textAlign="Right"></e-column>
            <e-column field='Country' headerText='Country' width='140'></e-column>
            <e-column field='Active' width='120'></e-column>
            <e-column field='Mainfieldsofinvention' headerText='Main fields of invention' width='200'></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;
    public ddlData: object[] = [
        { text: 'Default', value: 'Default' },
        { text: 'Both', value: 'Both' },
        { text: 'Horizontal', value: 'Horizontal' },
        { text: 'Vertical', value: 'Vertical' },
        { text: 'None', value: 'None' },
    ];

    ngOnInit(): void {
        this.data = inventoryData;
    }

    valueChange(args: ChangeEventArgs): void {
        (this.grid as GridComponent).gridLines = args.value as GridLine
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, the grid renders with Default mode.

See Also