Syncfusion AI Assistant

How can I help you?

Row in Angular Grid Component

19 Mar 202624 minutes to read

Each row typically represents a single record or item from a data source. Rows in a grid are used to present data in a tabular format. Each row displays a set of values representing the fields of an individual data record. Rows allow interaction with the data in the grid. Rows can be selected, edited, sorted, filtered, and configured to trigger events based on actions.

Key row management features:

  • Dynamic row styling based on data conditions.
  • Customizable row heights for optimal content display.
  • Interactive hover effects and visual feedback.
  • Frozen rows for persistent header information.
  • Programmatic row addition, modification, and visibility control.
  • Comprehensive row data access and manipulation methods.

Styling rows

Customizing the styles of rows in a Syncfusion® Angular Grid allows modification of row appearance to meet specific design requirements. This feature is useful when highlighting certain rows or changing the font style, background color, and other properties of the row to enhance the visual appeal of the grid. To customize the row styles in the grid, the Syncfusion® Angular Grid component provides CSS, properties, methods, and event support.

Using event

The rowDataBound event provides the most flexible approach for row styling, triggering for every row during data binding. This event handler receives RowDataBoundEventArgs containing row details, enabling conditional styling based on data values.

Here’s an example of customizing the rows styles based on the value of the “Freight” column using the rowDataBound event. This example involves checking the value of the “Freight” column for each row and adding a CSS class to the row based on the value. The CSS classes “below-30”, “below-80”, and “above-80” can be defined in the stylesheet to apply the desired styles to the rows.

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

@Component({
    imports: [GridModule],
    providers: [DetailRowService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [enableHover]='false' 
              [allowSelection]='false' [height]='315' (rowDataBound)='rowDataBound($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;
    }
    rowDataBound(args: RowDataBoundEventArgs) {
        const Freight = 'Freight';
        if ((args.data as columnDataType)[Freight] < 30) {
            (args.row as Element).classList.add('below-30');
        } else if ((args.data as columnDataType)[Freight] >= 30 && ((args.data as columnDataType)[Freight] < 80)) {
            (args.row as Element).classList.add('below-80');
        } else {
            (args.row 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 provides similar functionality for individual cell customization and can be combined with row-level styling for comprehensive appearance control.

Using CSS

Row styles can be applied using CSS selectors. The Grid provides a class name for each row element, which can be used to apply styles to that specific row.

Customize alternate rows

The appearance of alternate rows can be customized using CSS. This can be useful for improving the readability of the data and making it easier to distinguish between rows. By default, The Grid provides the CSS class .e-altrow to style the alternate rows. This default style can be customized by overriding the .e-altrow class with custom CSS styles.

To change the background color of the alternate rows, add the following CSS code to the application’s stylesheet:

.e-grid .e-altrow {
    background-color: #fafafa;
}

The following example demonstrates using the .e-altrow class to style alternate rows:

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

@Component({
    imports: [GridModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=140>
                    </e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' 
                    format='C' width=120></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right'
                    format='yMd' width=140></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));

Customize selected row

The appearance of the selected row can be customized using CSS. This is useful when highlighting the currently selected row to improve the visual appeal of the Grid. By default, the Grid provides the CSS class .e-selectionbackground to style the selected row. This default style can be customized by overriding the .e-selectionbackground class with custom CSS styles.

.e-grid .e-selectionbackground {
    background-color: #f9920b;
}

Here’s an example of styling the selected row using the .e-selectionbackground class:

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

@Component({
    imports: [GridModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right'
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=140>
                    </e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right'
                    format='C' width=120></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' 
                    format='yMd' width=140></e-column>
                </e-columns>
               </ejs-grid>`,
    styles: [`
        .e-grid .e-selectionbackground {
            background-color: #f9920b;
        }
    `]
})
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));

Using methods

The Grid provides comprehensive methods for programmatic row styling and manipulation:

Method Description
getRowByIndex Returns the HTML element of a row at the specified index. This method applies custom styles to a specific row.
getRowIndexByPrimaryKey Returns the index of the row with the specified primary key. This method gets the index of a specific row and applies custom styles to it.
getRows Returns an array of all the row elements in the Grid. This method applies custom styles to all rows or to a specific set of rows based on conditions.
getRowInfo Returns the data object and index of the row corresponding to the specified row element. This method applies custom styles based on the data in a row.
getSelectedRowIndexes Returns an array of the indexes of the selected rows in the Grid. This method applies custom styles to the selected rows.
getSelectedRows Returns an array of the HTML elements representing the selected rows in the grid. This method directly loops through the selected rows and customizes their styles.

The following example demonstrates customizing the appearance of the row using the getRowByIndex method inside the dataBound event of the grid.

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

@Component({
  imports: [GridModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid #grid [dataSource]="data" (dataBound)="customizeRows()">
                <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="C" width="100">
                    </e-column>
                    <e-column field="OrderDate" headerText="Order Date" textAlign="Right" 
                    format="yMd" width="100"></e-column>
                </e-columns>
            </ejs-grid>`,
})
export class AppComponent implements OnInit {

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

  ngOnInit(): void {
    this.data = data;
  }
  public customizeRows() {
    ((this.grid as GridComponent).getRowByIndex(2) as HTMLElement).style.background = 'rgb(193, 228, 234)';
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Row height

The Grid allows customization of the height of rows based on needs. This feature is useful when displaying more content in a row or when reducing the height of rows to fit content. This can be achieved by using the rowHeight property of the Grid component. This property allows changing the height of the entire grid row to a desired value.

The following example demonstrates dynamically changing the height of the rows using the rowHeight property.

import { orderDetails } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule, ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
      <div>
          <button ejs-button id="small" cssClass="e-small" (click)="clickHandler($event)">
          Change height 20px</button>
          <button ejs-button id="medium" cssClass="e-small" (click)="clickHandler($event)">
          Default height 42px</button>
          <button ejs-button  id="big" cssClass="e-small" (click)="clickHandler($event)">
          Change height 60px</button>
      </div>
      <div class="control-section"  style="padding-top:5px">
          <ejs-grid #grid [dataSource]='data' rowHeight='42' height='300'>
              <e-columns>
                  <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'>
                  </e-column>
                  <e-column field='CustomerName' headerText='Customer Name' width='150'>
                  </e-column>
                  <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" 
                  textAlign='Right'> </e-column>
                  <e-column field='Freight' headerText='Freight' width='120' format='C2'
                  textAlign='Right'></e-column>
                  <e-column field='ShippedDate' headerText='Shipped Date' width='140' format='yMd' 
                  textAlign='Right'></e-column>
                  <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
              </e-columns>
          </ejs-grid>
      </div>`
})
export class AppComponent {

  public data?: Object[];

  @ViewChild('grid')
  public grid?: GridComponent;
  public heightRow: { [key: string]: number } = {
    small: 20,
    medium: 40,
    big: 60
  };
  ngOnInit(): void {
    this.data = orderDetails;
  }

  clickHandler(args: MouseEvent): void {
    (this.grid as GridComponent).rowHeight = this.heightRow[(args.target as HTMLElement).id];
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The rowHeight property can only be used to set the height of the entire grid row, not individual cells within a row.
  • The rowHeight property applies the height to all rows in the grid, including the header and footer rows.
  • Row-specific height customization requires the rowDataBound event approach.

Customize row height for a specific row

The row height for a particular row can be customized when displaying more content in a particular row, reducing the height of a row to fit content, or making a specific row stand out from the other rows in the grid. This can be achieved by using the rowHeight property of the Grid component along with the rowDataBound event. This event triggers every time a request is made to access row information, element, or data, and before the row element is appended to the Grid element.

In the following example, the row height for the row with “OrderID” as “10249” is set as ‘90px’ using the rowDataBound event.

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

@Component({
    imports: [ GridModule],
    providers: [DetailRowService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [height]='315' 
               (rowDataBound)='rowDataBound($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;
    }
    public rowDataBound(args: RowDataBoundEventArgs) {
        if ((args.data as columnDataType)['OrderID'] === 10249) {
            args.rowHeight = 90;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • In virtual scrolling mode, it is not applicable to set different row heights.
  • The row height of multiple rows can be customized by checking the relevant criteria in the rowDataBound event and setting the rowHeight property accordingly.
  • In the rowDataBound event handler, the current row can be accessed using the args.row property and the rowHeight property can be set for that row using the setAttribute method.

Row hover

Row hover functionality provides visual feedback during mouse interaction, enhancing data readability and user experience. The enableHover property controls hover effect availability across the entire Grid.

The following example demonstrates hover effect control through a Switch component:

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

@Component({
  imports: [GridModule,SwitchModule],
  providers: [DetailRowService],
  standalone: true,
  selector: 'app-root',
  template: `<div style="padding:0px 0px 20px 0px">
            <label> Enable/Disable Row Hover</label>
            <ejs-switch id="switch" [checked]="true" 
            (change)="toggleRowHover($event)"></ejs-switch>
            </div>
            <ejs-grid #grid [dataSource]='data'>
              <e-columns>
                  <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                  width=120></e-column>
                  <e-column field='CustomerID' headerText='Customer ID' width=150>
                  </e-column>
                  <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                  <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
              </e-columns>
            </ejs-grid>`
          
})
export class AppComponent implements OnInit {

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

  ngOnInit(): void {
    this.data = data;
  }
  toggleRowHover(args:CustomChangeEventArgs): void {
   (this.grid as GridComponent).enableHover = args.checked;
  }
  
}

interface CustomChangeEventArgs extends ChangeEventArgs {
  checked: boolean;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The enableHover property affects the entire Grid and cannot be applied to individual rows or columns.

Retrieve row information when hovering over a cell

Row information can be retrieved when hovering over a specific cell. This can be useful when displaying additional details or performing some action based on the data in the row. This can be achieved by using the rowDataBound event and the getRowInfo method of the Grid.

  • The rowDataBound event triggers every time a request is made to access row information, element, or data, before the row element is appended to the Grid element.
  • The getRowInfo method retrieves the row information when hovering over a specific cell. This method takes a single parameter, which is the target element that is being hovered over.

Here’s an example that demonstrates retrieving the row information when hovering over a cell using the rowDataBound event and getRowInfo method:

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

@Component({
  imports: [GridModule, TooltipModule ],
  standalone: true,
  selector: 'app-root',
  template: `<div id='show' style="padding:0px 0px 20px 0px;" ></div>
            <ejs-grid #grid [dataSource]='data' (rowDataBound)='rowDataBound($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=140>
                    </e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' 
                    format='C' width=120></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right'
                    format='yMd' width=120></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;
  }
  rowDataBound(args: RowDataBoundEventArgs): void {
    (args.row as HTMLElement).addEventListener('mouseover', (e: MouseEvent) => {
      const rowInformation = (this.grid as GridComponent).getRowInfo(e.target as HTMLElement);
      console.log(rowInformation);
      (document.getElementById('show') as HTMLElement).innerHTML = `
        <table style="border-collapse: collapse; width: 600px;">
          <tr style="border: 2px solid;">
            <td style="padding: 2px;"><b>Row Information:</b></td>
          </tr>
          <tr style="border: 2px solid; padding: 8px;">
            <th style="border: 2px solid; padding: 8px; width: 120px;"><b>Class Name</b>
            </th>
            <td style="border: 2px solid; padding: 8px;">${(rowInformation.row as Element).className}
            </td>
          </tr>
          <tr style="border: 2px solid;">
            <th style="border: 2px solid; padding: 8px;"><b>Row Index</b>
            </th>
            <td style="border: 2px solid; padding: 8px;">${rowInformation.rowIndex}
          </td>
          </tr>
         </table>`;
    });
  }

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

The getRowInfo method requires execution within the rowDataBound event context for proper functionality.

Row pinning (Frozen)

The Syncfusion® Angular Grid allows freezing rows to keep them visible while scrolling vertically through large datasets. This feature enhances the experience by maintaining important information within view at all times.

The frozenRows property in the Angular Grid is used to freeze a specified number of rows at the top of the grid, keeping them fixed while the rest of the content scrolls vertically.

In the following example, the frozenRows property is set to “3”. This configuration freezes the top three rows of the grid, and they will remain fixed in their positions while the rest of the grid can be scrolled vertically.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { EditService, FreezeService, GridComponent, GridModule, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { NumericTextBoxAllModule, NumericTextBoxComponent, RatingAllModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [
      GridModule,
      NumericTextBoxAllModule,
      RatingAllModule,
      ButtonModule
      ],
  providers: [FreezeService, SelectionService, EditService, ToolbarService],
  standalone: true,
  selector: 'app-root',
  template: `<div style="display: flex">
    <label style="padding: 5px 5px 5px 0"> Change the frozen rows: </label>
    <ejs-numerictextbox
      #frozenRows
      min="0"
      max="5"
      [validateDecimalOnType]="true"
      decimals="0"
      format="n"
      value="2"
      width="100px"
    ></ejs-numerictextbox>
    <div>
      <button style="margin-left:5px" ejs-button (click)="frozenRowsFn()">
        Update
      </button>
    </div>
  </div>
  <ejs-grid #grid style="padding: 5px 5px" [dataSource]='data' height=290 [frozenRows]='2' [allowSelection]='false'  [enableHover]='false'>
    <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
      <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
      <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right'></e-column>
      <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>
      <e-column field='ShipName' headerText='Ship Name' width=130></e-column>
      <e-column field='ShipAddress' headerText='Ship Address' width=140></e-column>
      <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
      <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
      <e-column field='ShipRegion' headerText='Ship Region' width=80></e-column>
      <e-column field='ShipPostalCode' headerText='Ship Postal Code' width=110></e-column>
      <e-column field='Freight' headerText='Freight' width=80></e-column>
    </e-columns>
  </ejs-grid>`
})
export class AppComponent implements OnInit {

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

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

  frozenRowsFn() {
    (this.grid as GridComponent).frozenRows = (this.frozenRows as NumericTextBoxComponent).value;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • Frozen rows must remain within the visible viewport area.
  • Row virtualization is supported with frozen rows for enhanced performance.
  • Frozen rows functionality can be combined with frozen columns for complete grid section freezing.

Frozen row line color customization

Frozen row visual appearance can be customized through CSS styling to match application design requirements. The .e-frozenrow-border class provides the styling target for frozen row borders.

.e-grid .e-frozenrow-border {
    background-color: rgb(5, 114, 47);
}

The following example demonstrates frozen row border customization:

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

@Component({
  imports: [ GridModule, ],
  providers: [FreezeService, SelectionService, EditService, ToolbarService],
  standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height=315 [allowSelection]='false' [frozenRows]='3' [enableHover]='false'>
    <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
      <e-column field='CustomerID' headerText='Customer ID' width=100 ></e-column>
      <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right'></e-column>
      <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>
      <e-column field='ShipName' headerText='Ship Name' width=130></e-column>
      <e-column field='ShipAddress' headerText='Ship Address' width=140 ></e-column>
      <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
      <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
      <e-column field='ShipRegion' headerText='Ship Region' width=80></e-column>
      <e-column field='ShipPostalCode' headerText='Ship Postal Code' width=110></e-column>
      <e-column field='Freight' headerText='Freight' 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));

Deprecated methods

Previous Current Explanation
getMovableRows() gridInstance.getMovableRows()[0].querySelectorAll(‘.e-unfreeze’) getRows() gridInstance.getRows()[0].querySelectorAll(‘.e-unfreeze’) The previous architecture used separate tables for left, right, and movable contents, returning only movable rows when calling the method, whereas the current architecture combines them into one table, returning all rows and introduces the e-unfreeze class for selecting movable rows
getFrozenRightRows() gridInstance.getFrozenRightRows()[0].querySelectorAll(‘.e-rightfreeze’) getRows() gridInstance.getRows()[0].querySelectorAll(‘.e-rightfreeze’) In the previous architecture, it returned only the table rows from the right freeze table, but in the current architecture, all rows of the entire table are returned, introducing the e-rightfreeze class for selecting right freeze rows.
getMovableRowByIndex()
getFrozenRowByIndex()
getFrozenRightRowByIndex() 		getRowByIndex() gridInstance.getRowByIndex(1).querySelectorAll(‘.e-unfreeze’) In the previous architecture, separate methods were used to select rows from different table sections, while in the current architecture, the getMovableRowByIndex(), getFrozenRightRowByIndex(), and getFrozenRowByIndex() methods now return the same table row based on the given index. Additionally, class names for table cells (td’s) have been separated into e-leftfreeze, e-unfreeze, and e-rightfreeze, making it easier to customize cells within a row.
getMovableCellFromIndex()
getFrozenRightCellFromIndex() 		getCellFromIndex() gridInstance.getCellFromIndex(1,1) In the previous approach, the getMovableCellFromIndex() method was used to choose a specific cell within the movable table, and the getFrozenRightCellFromIndex() method was utilized to target a particular cell within the right freeze table. However, in the current architecture, it is possible to select a specific cell in either the movable or right freeze table by using both the getFrozenRightCellFromIndex() and getMovableCellFromIndex() methods. This new method simplifies the process of selecting and retrieving specific cells within these tables, offering more versatility and convenience.
getMovableDataRows()
getFrozenRightDataRows()
getFrozenDataRows() 		getDataRows() gridInstance.getDataRows()[0].querySelectorAll(‘.e-unfreeze’) In the previous approach, there were separate methods (getMovableDataRows(), getFrozenRightDataRows(), and getFrozenDataRows()) for obtaining viewport data rows from the freeze, movable, and right tables individually. However, in the new approach, these methods have been enhanced to return the entire viewport data rows for all sections together, simplifying data retrieval. Specific cells within these rows can now be extracted using selectors such as e-leftfreeze for the left freeze, e-unfreeze for the movable, and e-rightfreeze for the right freeze tables, providing greater flexibility in working with the data.
getMovableColumnHeaderByIndex()
getFrozenRightColumnHeaderByIndex()
getFrozenLeftColumnHeaderByIndex() 		getColumnHeaderByIndex() gridInstance.getColumnHeaderByIndex(1) In the previous architecture, the methods selected movable, right freeze, and left freeze headers separately. However, in the new approach, when using the getMovableColumnHeaderByIndex(), getFrozenRightColumnHeaderByIndex(), and getFrozenLeftColumnHeaderByIndex() methods, the same results as in the previous architecture will still be obtained.

Validation messages displayed in frozen sections prevent scrolling until resolved, ensuring data integrity during editing operations.

Limitations

The autofill feature is not compatible with frozen rows.

Adding a new row programmatically

The Grid provides a way to add a new row to the grid programmatically. This feature is useful when adding a new record to the grid without manually entering data in the grid. This can be done using the addRecord method of the Grid.

The addRecord method takes two parameters:

  • The data object representing the new row to be added
  • The index at which the new row should be inserted. If no index is specified, the new row will be added at the end of the Grid.

Here’s an example that demonstrates adding a new row using the addRecord method

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { EditService, EditSettingsModel, GridComponent, GridModule } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [ GridModule, FormsModule, TimePickerModule, FormsModule, TextBoxModule, ButtonModule ],
    providers: [EditService],
    standalone: true,
    selector: 'app-root',
    template: `<div style="padding:0px 0px 20px 0px">
                    <button ejs-button id='add' (click)='addRow()'>Add New Row</button>
                </div>
                <ejs-grid #grid id="grid" [dataSource]='data' [editSettings]='editSettings'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right'
                        width=100 isPrimaryKey="true"></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120>
                        </e-column>
                        <e-column field='ShipCity' headerText='ShipCity' width=100>
                        </e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' 
                        format='C' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=150>
                        </e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

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

    ngOnInit(): void {
        this.data = data; // Initialize an empty array
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
    }
    addRow() {
        const newRecord = {
            OrderID: this.generateOrderId(),
            CustomerID: this.generateCustomerId(),
            ShipCity: this.generateShipCity(),
            Freight: this.generateFreight(),
            ShipName: this.generateShipName()
        };

        (this.grid as GridComponent).addRecord(newRecord, 0);
    }
    // Generate a random OrderID
    generateOrderId(): number {
        return Math.floor(10000 + Math.random() * 90000);
    }
    // Generate a random CustomerID
    generateCustomerId(): string {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let result = '';
        for (let i = 0; i < 5; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }
        return result;
    }
    // Generate a random ShipCity
    generateShipCity(): string {
        const cities = ['London', 'Paris', 'New York', 'Tokyo', 'Berlin'];
        return cities[Math.floor(Math.random() * cities.length)];
    }
    // Generate a random Freight value
    generateFreight(): number {
        return Math.random() * 100;
    }
    // Generate a random ShipName
    generateShipName(): string {
        const names = ['Que Delícia', 'Bueno Foods', 'Island Trading', 'Laughing Bacchus Winecellars'];
        return names[Math.floor(Math.random() * names.length)];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • When working with remote data, it is impossible to add a new row between the existing rows.
  • To add a new record to the beginning of the data source, pass “0” as the second parameter to the addRecord method.
  • If no index is specified, the new row will be added at the end of the grid.

Show or hide a row using external actions

In the Grid, rows can be shown or hidden based on some external action, such as a checkbox click. This can be useful in scenarios where certain rows should be hidden from the grid temporarily without removing them from the underlying data source. This can be achieved by using the getRowByIndex and getRowsObject methods of the grid along with the change event of the checkbox.

The getRowsObject method returns an array of row objects that represents all the rows in the grid. This method can be used to iterate through all the rows and access their data and index.

The getRowByIndex method returns the HTML element of a row at the specified index. This method can be used to retrieve a specific row and apply changes to it.

In the following example, the “onCheckBoxChange” method checks whether the checkbox is checked or not. If it is checked, the method iterates through all the rows in the grid using the getRowsObject method. For each row, it checks whether the value in the “CustomerID” column is equal to “VINET”. If it is, the index of that row is obtained using the getRowByIndex method and hidden by setting its display style to “none”. The index of the hidden row is also added to an array called “hiddenRows”.

If the checkbox is unchecked, the method iterates through the “hiddenRows” array and shows each row by setting its display style to an empty string. The “hiddenRows” array is also cleared.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { CheckBoxModule} from '@syncfusion/ej2-angular-buttons'
import { Component, ViewChild } from '@angular/core';
import { orderDetails, columnDataType } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-buttons';

@Component({
imports: [GridModule,CheckBoxModule],
standalone: true,
  selector: 'app-root',
  template: `<div style="padding:2px 0px 0px 0px">
                <ejs-checkbox #checkbox label='Show / Hide Row' 
                (change)="onCheckBoxChange($event)"></ejs-checkbox>
            </div>
            <p id="message">{{ message }}</p>
            <ejs-grid #grid [dataSource]='data' height='350'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' width='120' 
                    textAlign='Right'></e-column>
                    <e-column field='CustomerID' headerText='Customer Name' width='150'>
                    </e-column>
                    <e-column field='OrderDate' headerText='Order Date' width='130' 
                    format="yMd" textAlign='Right'>
                    </e-column>
                    <e-column field='Freight' headerText='Freight' width='120' format='C2' 
                    textAlign='Right'>
                    </e-column>
                    <e-column field='ShippedDate' headerText='Shipped Date' width='130' 
                    format="yMd" textAlign='Right'>
                    </e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width='150'>
                    </e-column>
                </e-columns>
            </ejs-grid>`,
})
export class AppComponent {

  public data: Object[] = [];
  public rowIndex?: number;
  public hiddenRows: number[] = [];
  @ViewChild('grid')
    public grid?: GridComponent;
  public message?: string = '';

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

  public onCheckBoxChange(args: ChangeEventArgs) {
    if (args.checked) {
      for (let i = 0; i < (this.grid as GridComponent).getRowsObject().length; i++) {
        if (((this.grid as GridComponent).getRowsObject()[i].data as columnDataType).CustomerID === 'VINET') {
          // check the row value
          this.rowIndex = (this.grid as GridComponent).getRowsObject()[i].index; //get particular row index
          ((this.grid as GridComponent).getRowByIndex(this.rowIndex) as HTMLElement).style.display =
            'none'; //hide row
          this.hiddenRows.push((this.rowIndex as number)); // add row index to hiddenRows array
        }
      }
      if (this.hiddenRows.length > 0) {
        this.message = `Rows with a customer name column value of VINET have been hidden`;
      }
    } else {
      // Show hidden rows
      this.hiddenRows.forEach((rowIndex: number) => {
        ((this.grid as GridComponent).getRowByIndex(rowIndex) as HTMLElement).style.display = '';
      });
      this.hiddenRows = [];
      this.message = 'Show all hidden rows';
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Get the row data and element

Grid provides several methods to retrieve row data and elements. This feature is useful when needing to access specific rows, perform custom operations, or manipulate the data displayed in the grid.

  1. getRowByIndex: This method returns the HTML element of a row at the specified index. It can be used to retrieve the element of a specific row in the grid.

     const rowElement = this.grid.getRowByIndex(rowIndex);

  2. getRowIndexByPrimaryKey: This method allows the row index to be retrieved based on a specific primary key value or row data.

     const rowIndex = this.grid.getRowIndexByPrimaryKey(primaryKey);

  3. getRowInfo:This method allows row information to be retrieved based on a cell target element.

     const rowInformation = this.grid.getRowInfo(targetElement);

  4. getRows: This method returns an array of all the row elements in the Grid. To retrieve both row data and row elements, the getRows method can be combined with the getRowInfo method.

      const rowElements = this.grid.getRows();

  5. getSelectedRowIndexes: This method allows the collection of indexes of the selected rows to be retrieved. However, it does not directly provide the row elements or the associated data. To access both the row elements and the data of the selected rows, the getSelectedRowIndexes method can be combined with the getRowByIndex and getRowInfo methods.

     const selectedIndexes = this.grid.getSelectedRowIndexes();

  6. getSelectedRows: This method returns an array of HTML elements representing the selected rows in the grid. By iterating over this array, each row element and its data can be accessed using the getRowInfo method. In this way, both the row elements and their associated data for the selected rows can be retrieved.

     const selectedRowElements = this.grid.getSelectedRows();

These methods can be combined for comprehensive row data access and manipulation scenarios, providing complete control over Grid row interactions and customization.

See Also