GridComponent

23 Sep 202524 minutes to read

ejs-grid represents the Angular Grid Component.

<ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'></ejs-grid>

Properties

adaptiveUIMode AdaptiveMode

One of the adaptiveUIMode enumeration that specifies the Adaptive Mode. The default value is Both.

Defaults to Both

aggregates AggregateRowModel[]

Configures the Grid aggregate rows.

    <ejs-grid [dataSource]="data">
        <e-columns>
            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
            <e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right'></e-column>
        </e-columns>
        <e-aggregates>
            <e-aggregate>
                <e-columns>
                    <e-column type="Sum" field="Freight" format="C2">
                        <ng-template #footerTemplate let-data>Sum:{{data.Sum}}</ng-template>
                    </e-column>
                </e-columns>
            </e-aggregate>
        </e-aggregates>
    </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { AggregateService,GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [AggregateService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Check the Aggregates for its configuration.

Defaults to []

allowExcelExport boolean

If allowExcelExport set to true, then it will allow the user to export grid to Excel file.

Check the ExcelExport to configure exporting document.

<ejs-grid [dataSource]='data' [toolbar]='toolbar' [allowExcelExport]='true'>
</ejs-grid>

import { Component, OnInit} from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, ToolbarService, ExcelExportService} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [ToolbarService, ExcelExportService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public toolbar: string[];
    public ngOnInit(): void { 
        this.data = orderDetails;
        this.toolbar = ['ExcelExport'];
    }
}

Defaults to false

allowFiltering boolean

If allowFiltering set to true the filter bar will be displayed.
If set to false the filter bar will not be displayed.
Filter bar allows the user to filter grid records with required criteria.

Check the Filtering to customize its default behavior.

<ejs-grid [dataSource]='data' [allowFiltering]='true'>
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, FilterService} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[FilterService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public ngOnInit(): void { 
        this.data = orderDetails;
    }
}

Defaults to false

allowGrouping boolean

If allowGrouping set to true, then it will allow the user to dynamically group or ungroup columns.
Grouping can be done by drag and drop columns from column header to group drop area.

Check the Grouping to customize its default behavior.

<ejs-grid [dataSource]='data' [allowGrouping]='true'>
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent,GroupService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[GroupService]
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to false

allowKeyboard boolean

Enables or disables the key board interaction of Grid.

Defaults to true

allowMultiSorting boolean

If allowMultiSorting set to true, then it will allow the user to sort multiple column in the grid.

allowSorting should be true.

<ejs-grid [dataSource]='data' [allowSorting]='true' [allowMultiSorting]='true'>
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, SortService} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[SortService]
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to false

allowPaging boolean

If allowPaging is set to true, the pager renders at the footer of the Grid. It is used to handle page navigation in the Grid.

Check the Paging to configure the grid pager.

Defaults to false

allowPdfExport boolean

If allowPdfExport set to true, then it will allow the user to export grid to Pdf file.

Check the Pdfexport to configure the exporting document.

<ejs-grid [dataSource]='data' [toolbar]='toolbar' [allowPdfExport]='true'>
</ejs-grid>

import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [ToolbarService, PdfExportService ]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public toolbar: string[];
    public ngOnInit(): void { 
        this.data = orderDetails;
        this.toolbar = ['PdfExport'];
    }
}

Defaults to false

allowReordering boolean

If allowReordering is set to true, Grid columns can be reordered.
Reordering can be done by drag and drop of a particular column from one index to another index.

If Grid is rendered with stacked headers, reordering is allowed only at the same level as the column headers.

<ejs-grid [dataSource]='data' [allowReordering]="true">
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, ReorderService} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[ReorderService]
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to false

allowResizing boolean

If allowResizing is set to true, Grid columns can be resized.

<ejs-grid [dataSource]='data' [allowResizing]="true">
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, ResizeService} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[ResizeService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to false

allowRowDragAndDrop boolean

If allowRowDragAndDrop is set to true, you can drag and drop grid rows at another grid.

<ejs-grid [dataSource]='data' [allowRowDragAndDrop]='true'>
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, RowDDService} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[RowDDService]
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to false

allowSelection boolean

If allowSelection is set to true, it allows selection of (highlight row) Grid records by clicking it.

<ejs-grid [dataSource]='data' [allowSelection]='true'>
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to true

allowSorting boolean

If allowSorting is set to true, it allows sorting of grid records when column header is clicked.

Check the Sorting to customize its default behavior.

<ejs-grid [dataSource]='data' [allowSorting]='true'>
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, SortService} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[SortService]
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to false

allowTextWrap boolean

If allowTextWrap set to true,
then text content will wrap to the next line when its text content exceeds the width of the Column Cells.

<ejs-grid [dataSource]='data' [allowTextWrap]='true'>
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to false

autoFit boolean

If autoFit set to true, then it will auto fit the columns based on given width.

Defaults to false

childGrid GridModel

Defines Grid options to render child Grid.
It requires the queryString for parent
and child relationship.

Check the Child Grid for its configuration.

Defaults to ’’

clipMode ClipMode

Defines the mode of clip. The available modes are,
Clip: Truncates the cell content when it overflows its area.
Ellipsis: Displays ellipsis when the cell content overflows its area.
EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area,
also it will display the tooltip while hover on ellipsis is applied.

<ejs-grid [dataSource]='data' [clipMode]="Ellipsis">
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderDetails;
    }
}

Defaults to Ellipsis

clipboardModule Clipboard

clipboardModule is used to handle Grid copy action.

columnChooserSettings ColumnChooserSettingsModel

Configures the column chooser in the Grid.

Defaults to { columnChooserOperator: ‘startsWith’ }

columnMenuItems ColumnMenuItem[]|ColumnMenuItemModel[]

columnMenuItems defines both built-in and custom column menu items.

The available built-in items are,

AutoFitAll - Auto fit the size of all columns.
AutoFit - Auto fit the current column.
Group - Group by current column.
Ungroup - Ungroup by current column.
SortAscending - Sort the current column in ascending order.
SortDescending - Sort the current column in descending order.
Filter - Filter options will show based on filterSettings property like checkbox filter, excel filter, menu filter.

Defaults to null

columnMenuModule ColumnMenu

The columnMenuModule is used to manipulate column menu items and its action in the Grid.

columnQueryMode ColumnQueryModeType

columnQueryModeprovides options to retrive data from the datasource.Their types are

All: It Retrives whole datasource.
Schema: Retrives data for all the defined columns in grid from the datasource.
ExcludeHidden: Retrives data only for visible columns of grid from the dataSource.

Defaults to All

columns Column[]|string[]|ColumnModel[]

Defines the schema of dataSource.
If the columns declaration is empty or undefined then the columns are automatically generated from data source.

<ejs-grid [dataSource]="data">
    <e-columns>
        <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
        <e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right'></e-column>
    </e-columns>
</ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to []

contextMenuItems ContextMenuItem[]|ContextMenuItemModel[]

contextMenuItems defines both built-in and custom context menu items.

The available built-in items are,

AutoFitAll - Auto fit the size of all columns.
AutoFit - Auto fit the current column.
Group - Group by current column.
Ungroup - Ungroup by current column.
Edit - Edit the current record.
Delete - Delete the current record.
Save - Save the edited record.
Cancel - Cancel the edited state.
Copy - Copy the selected records.
PdfExport - Export the grid as Pdf format.
ExcelExport - Export the grid as Excel format.
CsvExport - Export the grid as CSV format.
SortAscending - Sort the current column in ascending order.
SortDescending - Sort the current column in descending order.
FirstPage - Go to the first page.
PrevPage - Go to the previous page.
LastPage - Go to the last page.
NextPage - Go to the next page.

Defaults to null

contextMenuModule ContextMenu

The contextMenuModule is used to handle context menu items and its action in the Grid.

cssClass string

Defines the own class for the grid element.

Defaults to ’’

currentAction ActionArgs

Gets or sets the current action details.

Defaults to {}

currentViewData Object[]

Gets the currently visible records of the Grid.

Defaults to []

dataSource Object|DataManager|DataResult

It is used to render grid table rows.
If the dataSource is an array of JavaScript objects,
then Grid will create instance of DataManager
from this dataSource.
If the dataSource is an existing DataManager,
the Grid will not initialize a new one.

Check the available Adaptors to customize the data operation.

<ejs-grid [dataSource]="data"> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to []

detailTemplate any

The detail template allows you to show or hide additional information about a particular row.

It accepts either the template string or the HTML element ID.

Defaults to null

editModule Edit

The editModule is used to handle Grid content manipulation.

editSettings EditSettingsModel

Configures the edit settings.

<ejs-grid [dataSource]="data" [editSettings]='editSettings' [toolbar]='toolbar'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent, EditService, ToolbarService, EditSettingsModel,ToolbarItems} from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [EditService, ToolbarService]
})
export class AppComponent implements OnInit{
    public data: Object[];
    public editSettings: EditSettingsModel;
    public toolbar: ToolbarItems[];
    public ngOnInit(): void {
        this.data = orderData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }
}

Defaults to { allowAdding: false, allowEditing: false, allowDeleting: false, mode:’Normal’,allowEditOnDblClick: true, showConfirmDialog: true, showDeleteConfirmDialog: false }

ej2StatePersistenceVersion string

Defines the version for Grid persistence.

Defaults to ’’

emptyRecordTemplate any

The empty record template that renders customized element or text or image instead of displaying the empty record message in the grid.

It accepts either the template string or the HTML element ID.

Defaults to null

enableAdaptiveUI boolean

If enableAdaptiveUI set to true the grid filter, sort, and edit dialogs render adaptively.

Defaults to false

enableAltRow boolean

If enableAltRow is set to true, the grid will render with e-altrow CSS class to the alternative tr elements.

Check the AltRow to customize the styles of alternative rows.

<ejs-grid [dataSource]="data" [enableAltRow]="true"> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to true

enableAutoFill boolean

If enableAutoFill is set to true, then the auto fill icon will displayed on cell selection for copy cells.
It requires the selection mode to be Cell and cellSelectionMode to be Box.

<ejs-grid [dataSource]="data" [enableAutoFill]="true" [selectionSettings]="selectionOptions" > </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent,SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public selectionOptions: SelectionSettingsModel;
    public ngOnInit(): void {
        this.data = orderData;
        this.selectionOptions = { cellSelectionMode: 'Box', mode: 'Cell' };
    }
}

Defaults to false

enableColumnSpan boolean

Enables or disables column spanning for adjacent cells with similar data.
When enabled, the grid merges adjacent cells with identical data between columns into a single cell, spanning multiple columns to enhance data presentation.

<ejs-grid [dataSource]="data" [enableColumnSpan]="true" > </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to false

enableColumnVirtualization boolean

If enableColumnVirtualization set to true, then the Grid will render only the columns visible within the view-port
and load subsequent columns on horizontal scrolling. This helps to load large dataset of columns in Grid.

<ejs-grid [dataSource]="data" height='300' [enableVirtualization]='true' [enableColumnVirtualization]='true'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent,VirtualScrollService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[VirtualScrollService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to false

enableHeaderFocus boolean

If enableHeaderFocus set to true, then header element will be focused when focus moves to grid.

Defaults to false

enableHover boolean

If enableHover is set to true, the row hover is enabled in the Grid.

<ejs-grid [dataSource]="data" [enableHover]="true" > </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to true

enableHtmlSanitizer boolean

Specifies whether to display or remove the untrusted HTML values in the Grid component.
If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.

Defaults to false

enableImmutableMode boolean

If enableImmutableMode is set to true, the grid will reuse old rows if it exists in the new result instead of
full refresh while performing the grid actions.

Defaults to false

enableInfiniteScrolling boolean

If enableInfiniteScrolling set to true, then the data will be loaded in Grid when the scrollbar reaches the end.
This helps to load large dataset in Grid.

<ejs-grid [dataSource]="data" height='300' enableInfiniteScrolling='true' > </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent,InfiniteScrollService  } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [InfiniteScrollService]
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to false

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRowSpan boolean

Enables or disables row spanning for adjacent cells with similar data.
When enabled, the grid merges adjacent cells with identical data between rows into a single cell, spanning multiple rows to improve readability.

<ejs-grid [dataSource]="data" [enableRowSpan]="true" > </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit{
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableStickyHeader boolean

If ‘enableStickyHeader’ set to true, then the user can able to make the column headers visible when the document is scrolled.

Defaults to false

enableVirtualMaskRow boolean

Specifies the shimmer effect for Grid virtual and infinite scrolling.

Defaults to true

enableVirtualization boolean

If enableVirtualization set to true, then the Grid will render only the rows visible within the view-port
and load subsequent rows on vertical scrolling. This helps to load large dataset in Grid.

<ejs-grid [dataSource]="data" height='300' [enableVirtualization]='true'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent,VirtualScrollService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[VirtualScrollService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to false

excelExportModule ExcelExport

The excelExportModule is used to handle Excel exporting feature in the Grid.

exportGrids string[]

Defines the id of the grids that needs to be exported

Defaults to null

The filterModule is used to manipulate filtering in the Grid.

filterSettings FilterSettingsModel

Configures the filter settings of the Grid.

<ejs-grid [dataSource]="data" [allowFiltering]='true' [filterSettings]='filterOptions' > </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent,FilterSettingsModel, FilterService  } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[FilterService]
})
export class AppComponent implements OnInit{
    public data: Object[];
    public filterOptions: FilterSettingsModel;
    public ngOnInit(): void {
        this.data = orderData;
        this.filterOptions = { type: 'Menu'};
    }
}

Defaults to {columns: [], type: ‘FilterBar’, mode: ‘Immediate’, showFilterBarStatus: true, immediateModeDelay: 1500 , operators: {}}

frozenColumns number

Gets or sets the number of frozen columns.

<ejs-grid [dataSource]="data" [frozenColumns]='1' > </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent,FreezeService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[FreezeService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to 0

frozenRows number

Gets or sets the number of frozen rows.

<ejs-grid [dataSource]="data" [frozenRows]='2' > </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent,FreezeService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[FreezeService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to 0

gridLines GridLine

Defines the mode of grid lines. The available modes are,

Both: Displays both 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.

    <ejs-grid [dataSource]='data' gridLines='Both'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to Default

groupModule Group

The groupModule is used to manipulate grouping behavior in the Grid.

groupSettings GroupSettingsModel

Configures the group settings.

    <ejs-grid [dataSource]='data' [allowGrouping]="true" [groupSettings]="groupOptions">
        <e-columns>
            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
            <e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right'></e-column>
        </e-columns>
    </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GroupService, GroupSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [GroupService]
})
export class AppComponent {
    public data: Object[];
    public groupOptions: GroupSettingsModel;
    public ngOnInit(): void {
        this.data = orderData;
        this.groupOptions = { columns: ['Freight'] };
    }
}

Defaults to {showDropArea: true, showToggleButton: false, showGroupedColumn: false, showUngroupButton: true, columns: []}

height string|number

Defines the scrollable height of the grid content.

    <ejs-grid [dataSource]='data' height='400'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to ‘auto’

hierarchyPrintMode HierarchyGridPrintMode

Defines the hierarchy grid print modes. The available modes are

Expanded - Prints the master grid with expanded child grids.
All - Prints the master grid with all the child grids.
None - Prints the master grid alone.

Defaults to Expanded

infiniteScrollModule InfiniteScroll

The infiniteScrollModule is used to manipulate infinite scrolling in the Grid.

infiniteScrollSettings InfiniteScrollSettingsModel

Configures the infinite scroll settings.

    <ejs-grid [dataSource]='data' [enableInfiniteScrolling]='true' [infiniteScrollSettings]='infiniteOptions' [pageSettings]='pageOptions' height:'400'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { InfiniteScrollService, InfiniteScrollSettingsModel, PageSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [InfiniteScrollService]
})
export class AppComponent {
    public data: Object[];
    public pageOptions: PageSettingsModel;
    public infiniteOptions: InfiniteScrollSettingsModel;
    public ngOnInit(): void {
        this.data = orderData;
        this.pageOptions = { pageSize: 50 };
        this.infiniteOptions = { enableCache: true, maxBlocks: 3, initialBlocks: 3 };
    }
}

Defaults to { enableCache: false, maxBlocks: 5, initialBlocks: 5 }

keyboardModule KeyboardEvents

The keyboardModule is used to manipulate keyboard interactions in the Grid.

loadingIndicator LoadingIndicatorModel

Configures the Loading Indicator of the Grid.

Defaults to {indicatorType: ‘Spinner’}

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

pageSettings PageSettingsModel

Configures the pager in the Grid.

    <ejs-grid [dataSource]='data' [allowPaging]='true' [pageSettings]='pageOptions'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { PageService, PageSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
     providers: [PageService]
})
export class AppComponent {
    public data: Object[];
    public optiopageOptionsns: PageSettingsModel;
    public ngOnInit(): void {
        this.data = orderData;
        this.pageOptions = { currentPage: 1, pageSize: 12, pageCount: 8, pageSizes: true };
    }
}

Defaults to {currentPage: 1, pageSize: 12, pageCount: 8, enableQueryString: false, pageSizes: false, template: null}

pagerModule Page

The pagerModule is used to manipulate paging in the Grid.

pagerTemplate any

It used to render pager template

Defaults to null

parentDetails ParentDetails

Gets the parent Grid details.

Defaults to {}

pdfExportModule PdfExport

The pdfExportModule is used to handle PDF exporting feature in the Grid.

printMode PrintMode

Defines the print modes. The available print modes are

AllPages: Prints all pages of the Grid.
CurrentPage: Prints the current page of the Grid.

    <ejs-grid [dataSource]='data' printMode='CurrentPage' [allowPaging]='true' [toolbar]='toolbarOptions'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { PageService, ToolbarService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
     providers: [PageService, ToolbarService]
})
export class AppComponent {
    public data: Object[];
    public toolbarOptions: string[];
    public ngOnInit(): void {
        this.data = orderData;
        this.toolbarOptions = ['Print'];
    }
}

Defaults to AllPages

printModule Print

The printModule is used to handle the printing feature of the Grid.

query Query

Defines the external Query
that will be executed along with data processing.

    <ejs-grid [dataSource]='data' [query]='query'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public data: DataManager;
    public query: Query;
    public ngOnInit(): void {
        this.data = new DataManager({
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders?$top=7',
            adaptor: new ODataAdaptor()
        });
        this.query = new Query().addParams('ej2grid', 'true');
    }
}

Defaults to null

queryString string

Defines the relationship between parent and child datasource. It acts as the foreign key for parent datasource.

Defaults to ’’

reorderModule Reorder

The reorderModule is used to manipulate reordering in the Grid.

requireTemplateRef boolean

If requireTemplateRef is set to false in the load event, then the template element can’t be accessed in grid queryCellInfo, and rowDataBound events.
By default, React’s grid queryCellInfo and rowDataBound events allow access to the template element.
Avoid accessing the template elements in the grid queryCellInfo and rowDataBound events to improve rendering performance by setting this value as false.

Defaults to true

resizeSettings ResizeSettingsModel

Defines the resizing behavior of the Grid.

Defaults to {mode:”Normal”}

rowDragAndDropModule RowDD

The rowDragAndDropModule is used to manipulate row reordering in the Grid.

rowDropSettings RowDropSettingsModel

Configures the row drop settings.

Defaults to {targetID: ‘’}

rowHeight number

Defines the height of Grid rows.

    <ejs-grid [dataSource]='data' rowHeight='20'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to null

rowRenderingMode RowRenderingDirection

Defines the grid row elements rendering direction. The available directions are,

Horizontal: Renders the grid row elements in the horizontal direction
Vertical: Renders the grid row elements in the vertical direction

Defaults to Horizontal

rowTemplate any

The row template that renders customized rows from the given template.
By default, Grid renders a table row for every data source item.

It accepts either template string or HTML element ID.

The row template must be a table row.
Check the Row Template customization.

Defaults to null

scrollModule Scroll

The scrollModule is used to manipulate scrolling in the Grid.

searchModule Search

The searchModule is used to manipulate searching in the Grid.

searchSettings SearchSettingsModel

Configures the search behavior in the Grid.

    <ejs-grid [dataSource]='data' [searchSettings]='searchOptions' [toolbar]='toolbarOptions'>
        <e-columns>
            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
            <e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right'></e-column>
        </e-columns>
    </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { ToolbarService, SearchService, SearchSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
     providers: [ToolbarService, SearchService]
})
export class AppComponent {
    public data: Object[];
    public toolbarOptions: string[];
    public searchOptions: SearchSettingsModel;
    public ngOnInit(): void {
        this.data = orderData;
        this.toolbarOptions = ['Search'];
        this.searchOptions = { fields: ['CustomerName'], key: 'Ha' };
    }
}

Defaults to { ignoreCase: true, fields: [], operator: ‘contains’, key: ‘’ }

selectedRowIndex number

The selectedRowIndex allows you to select a row at initial rendering.
You can also get the currently selected row index.

    <ejs-grid [dataSource]='data' [selectedRowIndex]='5'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to -1

selectionModule Selection

The selectionModule is used to manipulate selection behavior in the Grid.

selectionSettings SelectionSettingsModel

Configures the selection settings.

    <ejs-grid [dataSource]='data' [selectionSettings]='selectionOptions'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public data: Object[];
    public selectionOptions: SelectionSettingsModel;
    public ngOnInit(): void {
        this.data = orderData;
        this.selectionOptions = { mode: 'Cell', cellSelectionMode: 'Box', type: 'Multiple' };
    }
}

Defaults to {mode: ‘Row’, cellSelectionMode: ‘Flow’, type: ‘Single’}

showColumnChooser boolean

If showColumnChooser is set to true, it allows you to dynamically show or hide columns.

Check the ColumnChooser for its configuration.

    <ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' [showColumnChooser]='true'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { ColumnChooserService , ToolbarService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
     providers: [ColumnChooserService, ToolbarService]
})
export class AppComponent {
    public data: Object[];
    public toolbarOptions: string[];
    public ngOnInit(): void {
        this.data = orderData;
        this.toolbarOptions = ['ColumnChooser'];
    }
}

Defaults to false

showColumnMenu boolean

If showColumnMenu set to true, then it will enable the column menu options in each columns.

Check the Column menu for its configuration.

    <ejs-grid [dataSource]='data' showColumnMenu='true'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { ColumnMenuService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [ColumnMenuService]
})
export class AppComponent {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to false

showHider ShowHide

The showHider is used to manipulate column’s show/hide operation in the Grid.

Defaults to ’’

sortModule Sort

The sortModule is used to manipulate sorting in the Grid.

sortSettings SortSettingsModel

Configures the sort settings.

    <ejs-grid [dataSource]='data' [allowSorting]='true' [sortSettings]='sortOptions'>
        <e-columns>
            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
            <e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right'></e-column>
        </e-columns>
    </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { SortService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [SortService]
})
export class AppComponent {
    public data: Object[];
    public sortOptions: object;
    public ngOnInit(): void {
        this.data = orderData;
        this.sortOptions = { columns: [{ field: 'CustomerName', direction: 'Ascending' }] };
    }
}

Defaults to {columns:[]}

textWrapSettings TextWrapSettingsModel

Configures the text wrap in the Grid.

    <ejs-grid [dataSource]='data' allowTextWrap='true' [textWrapSettings]='wrapOption'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public data: Object[];
    public wrapOption: Object;
    public ngOnInit(): void {
        this.data = orderData;
        this.wrapOption = { wrapMode: 'Both' };
    }
}

Defaults to {wrapMode:”Both”}

toolbar defines the ToolBar items of the Grid.
It contains built-in and custom toolbar items.
If a string value is assigned to the toolbar option, it is considered as the template for the whole Grid ToolBar.
If an array value is assigned, it is considered as the list of built-in and custom toolbar items in the Grid’s Toolbar.

The available built-in ToolBar items are:

Add: Adds a new record.
Edit: Edits the selected record.
Update: Updates the edited record.
Delete: Deletes the selected record.
Cancel: Cancels the edit state.
Search: Searches records by the given key.
Print: Prints the Grid.
ExcelExport - Export the Grid to Excel(excelExport() method manually to make export.)
PdfExport - Export the Grid to PDF(pdfExport() method manually to make export.)
CsvExport - Export the Grid to CSV(csvExport() method manually to make export.)

The following code example implements the custom toolbar items.

Check the Toolbar to customize its default items.

    <ejs-grid [dataSource]='data' [toolbar]='toolbarOptions'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { ToolbarService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
     providers: [ToolbarService]
})
export class AppComponent {
    public data: Object[];
    public toolbarOptions: string[];
    public ngOnInit(): void {
        this.data = orderData;
        this.toolbarOptions = ['Search','Print'];
    }
}

Defaults to null

toolbarModule Toolbar

The toolbarModule is used to manipulate ToolBar items and its action in the Grid.

toolbarTemplate any

It used to render toolbar template

Defaults to null

width string|number

Defines the Grid width.

    <ejs-grid [dataSource]='data' width='700'> </ejs-grid>

import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}

Defaults to ‘auto’

Methods

addRecord

Adds a new record to the Grid. Without passing parameters, it adds empty rows.

editSettings.allowEditing should be true.

Parameter	Type	Description
data (optional)	`Object`	Defines the new add record data.
index (optional)	`number`	Defines the row index to be added

Returns void

autoFitColumns

Changes the column width to automatically fit its content to ensure that the width shows the content without wrapping/hiding.

This method ignores the hidden columns.

Uses the autoFitColumns method in the dataBound event to resize at initial rendering.

By specifying the start row index and end row index, providing the range within which the maximum width for that column should be considered when applying autoFitColumns.

The width of header rows is always calculated. If the width of a header row exceeds the specified range, its width will be allocated to the specific content rows.

Parameter	Type	Description
fieldNames (optional)	`string` \| `string[]`	Defines the column names.
startRowIndex (optional)	`number`	Specifies the start index of the content row.
endRowIndex (optional)	`number`	Specifies the end index of content row.

Returns void

batchAsyncUpdate

Apply the changes to the Grid in one batch after 50ms without refreshing the rows.

Parameter	Type	Description
changes	`BatchChanges`	Defines changes to be updated.

Returns void

batchUpdate

Apply the changes to the Grid without refreshing the rows.

Parameter	Type	Description
changes	`BatchChanges`	Defines changes to be updated.

Returns void

calculatePageSizeByParentHeight

Calculates the page size by parent element height

Parameter	Type	Description
containerHeight	`number` \| `string`	specifies the container height

Returns number

changeDataSource

Remove the existing columns along with the grid actions like sorting, filtering, searching, grouping, aggregate, etc., and grid will refresh with new columns based on the updated new data source.

If no columns are specified while changing the data source, then the columns are auto generated in the Grid based on the list of columns in the updated data source.

Parameter	Type	Description
dataSource (optional)	`Object` \| `DataManager` \| `DataResult`	Assign the new datasource.
columns (optional)	`Column[]` \| `string[]` \| `ColumnModel[]`	Defines columns.

Returns void

clearCellSelection

Deselects the currently selected cells.

Returns void

clearFiltering

Clears all the filtered rows of the Grid.

Parameter	Type	Description
fields (optional)	`string[]`	Defines the Fields

Returns void

clearGrouping

Clears all the grouped columns of the Grid.

Returns void

clearRowSelection

Deselects the currently selected rows.

Returns void

clearSelection

Deselects the current selected rows and cells.

Returns void

clearSorting

Clears all the sorted columns of the Grid.

Returns void

closeEdit

Cancels edited state.

Returns void

copy

Copy the selected rows or cells data into clipboard.

Parameter	Type	Description
withHeader (optional)	`boolean`	Specifies whether the column header text needs to be copied along with rows or cells.

Returns void

csvExport

Export Grid data to CSV file.

Parameter	Type	Description
excelExportProperties (optional)	`ExcelExportProperties`	Defines the export properties of the Grid.
isMultipleExport (optional)	`boolean`	Define to enable multiple export.
workbook (optional)	`Workbook`	Defines the Workbook if multiple export is enabled.
isBlob (optional)	`boolean`	If ‘isBlob’ set to true, then it will be returned as blob data.

Returns Promise

deleteRecord

Delete a record with Given options. If fieldname and data is not given then grid will delete the selected record.

editSettings.allowDeleting should be true.

Parameter	Type	Description
fieldname (optional)	`string`	Defines the primary key field, ‘Name of the column’.
data (optional)	`Object`	Defines the JSON data of the record to be deleted.

Returns void

deleteRow

Delete any visible row by TR element.

Parameter	Type	Description
tr	`HTMLTableRowElement`	Defines the table row element.

Returns void

destroy

Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).

Returns void

destroyTemplate

Destroys the given template reference.

Parameter	Type	Description
propertyNames (optional)	`string[]`	Defines the collection of template name.
index (optional)	`any`	specifies the index
callback (optional)	`Function`	Defines the callback function that is triggered after the template is cleared

Returns void

detailCollapseAll

Collapses all the detail rows of the Grid.

Returns void

detailExpandAll

Expands all the detail rows of the Grid.

Returns void

editCell

Changes a particular cell into edited state based on the row index and field name provided in the batch mode.

Parameter	Type	Description
index	`number`	Defines row index to edit a particular cell.
field	`string`	Defines the field name of the column to perform batch edit.

Returns void

enableToolbarItems

Enables or disables ToolBar items.

Parameter	Type	Description
items	`string[]`	Defines the collection of itemID of ToolBar items.
isEnable	`boolean`	Defines the items to be enabled or disabled.

Returns void

endEdit

If Grid is in editable state, you can save a record by invoking endEdit.

Returns void

excelExport

Export Grid data to Excel file(.xlsx).

Parameter	Type	Description
excelExportProperties (optional)	`ExcelExportProperties`	Defines the export properties of the Grid.
isMultipleExport (optional)	`boolean`	Define to enable multiple export.
workbook (optional)	`Workbook`	Defines the Workbook if multiple export is enabled.
isBlob (optional)	`boolean`	If ‘isBlob’ set to true, then it will be returned as blob data.

Returns Promise

filterByColumn

Filters grid row by column name with the given options.

Parameter	Type	Description
fieldName	`string`	Defines the field name of the column.
filterOperator	`string`	Defines the operator to filter records.
filterValue	`string` \| `number` \| `Date` \| `boolean` \| `number[]` \| `string[]` \| `Date[]` \| `boolean[]` \| `null`	Defines the value used to filter records.
predicate (optional)	`string`	Defines the relationship between one filter query and another by using AND or OR predicate.
matchCase (optional)	`boolean`	If match case is set to true, the grid filters the records with exact match. if false, it filters case insensitive records (uppercase and lowercase letters treated the same).
ignoreAccent (optional)	`boolean`	If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.
actualFilterValue (optional)	`string`	Defines the actual filter value for the filter column.
actualOperator (optional)	`string`	Defines the actual filter operator for the filter column.

Returns void

freezeRefresh

Initiates a complete refresh of the Grid’s column and layout.
This method forces a full re-render of the Grid, ensuring that any dynamic
changes to columns or layout are immediately reflected.

Returns void

getBatchChanges

Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.

Returns Object

getCellFromIndex

Gets a cell by row and column index.

Parameter	Type	Description
rowIndex	`number`	Specifies the row index.
columnIndex	`number`	Specifies the column index.

Returns Element

getColumnByField

Gets a Column by column name.

Parameter	Type	Description
field	`string`	Specifies the column name.

Returns Column

getColumnByUid

Gets a column by UID.

Parameter	Type	Description
uid	`string`	Specifies the column UID.
isColumns (optional)	`boolean`	Defines the all columns.

Returns Column

getColumnFieldNames

Gets the collection of column fields.

Returns string[]

getColumnHeaderByField

Gets a column header by column name.

Parameter	Type	Description
field	`string`	Specifies the column name.

Returns Element

getColumnHeaderByIndex

Gets a column header by column index.

Parameter	Type	Description
index	`number`	Specifies the column index.

Returns Element

getColumnHeaderByUid

Gets a column header by UID.

Parameter	Type	Description
uid	`string`	Specifies the column uid.

Returns Element

getColumnIndexByField

Gets a column index by column name.

Parameter	Type	Description
field	`string`	Specifies the column name.

Returns number

getColumnIndexByUid

Gets a column index by UID.

Parameter	Type	Description
uid	`string`	Specifies the column UID.

Returns number

getColumns

Gets the columns from the Grid.

Parameter	Type	Description
isRefresh (optional)	`boolean`	Defines the boolean whether to refresh

Returns Column[]

getContent

Gets the content div of the Grid.

Returns Element

getContentTable

Gets the content table of the Grid.

Returns Element

getCurrentViewRecords

Get current visible data of grid.

Returns Object[]

getDataModule

Returns the data module used by the grid.
Use this to access the current applied queries and data related configuration settings for the grid.

Returns Data

getDataRows

Gets all the Grid’s data rows.

Returns Element[]

getFilterUIInfo

Get the current Filter operator and field.

Returns FilterUI

getFilteredRecords

Get all filtered records from the Grid and it returns array of objects for the local dataSource, returns a promise object if the Grid has remote data.

Returns Object[] | Promise

getFooterContent

Gets the footer div of the Grid.

Returns Element

getFooterContentTable

Gets the footer table element of the Grid.

Returns Element

getForeignKeyColumns

Gets the foreign columns from Grid.

Returns Column[]

getFrozenDataRows

Gets all the Grid’s frozen table data rows.

Returns Element[]

getFrozenLeftColumnHeaderByIndex

Gets a frozen left column header by column index.

Parameter	Type	Description
index	`number`	Specifies the column index.

Returns Element

getFrozenRightCellFromIndex

Gets a frozen right table cell by row and column index.

Parameter	Type	Description
rowIndex	`number`	Specifies the row index.
columnIndex	`number`	Specifies the column index.

Returns Element

getFrozenRightColumnHeaderByIndex

Gets a frozen right column header by column index.

Parameter	Type	Description
index	`number`	Specifies the column index.

Returns Element

getFrozenRightDataRows

Gets all the Grid’s frozen right table data rows.

Returns Element[]

getFrozenRightRowByIndex

Gets a frozen right tables row element by index.

Parameter	Type	Description
index	`number`	Specifies the row index.

Returns Element

getFrozenRightRows

Gets the Grid’s frozen right content rows from frozen grid.

Returns Element[]

getFrozenRowByIndex

Gets a frozen tables row by index.

Parameter	Type	Description
index	`number`	Specifies the row index.

Returns Element

getHeaderContent

Gets the header div of the Grid.

Returns Element

getHeaderTable

Gets the header table element of the Grid.

Returns Element

getHiddenColumns

Gets the hidden columns from the Grid.

Returns Column[]

getMovableCellFromIndex

Gets a movable table cell by row and column index.

Parameter	Type	Description
rowIndex	`number`	Specifies the row index.
columnIndex	`number`	Specifies the column index.

Returns Element

getMovableColumnHeaderByIndex

Gets a movable column header by column index.

Parameter	Type	Description
index	`number`	Specifies the column index.

Returns Element

getMovableDataRows

Gets all the Grid’s movable table data rows.

Returns Element[]

getMovableRowByIndex

Gets a movable tables row by index.

Parameter	Type	Description
index	`number`	Specifies the row index.

Returns Element

getMovableRows

Gets the Grid’s movable content rows from frozen grid.

Returns Element[]

getPager

Gets the pager of the Grid.

Returns Element

getPersistData

Get the properties to be maintained in the persisted state.

Returns string

getPrimaryKeyFieldNames

Get the names of the primary key columns of the Grid.

Returns string[]

getRowByIndex

Gets a row by index.

Parameter	Type	Description
index	`number`	Specifies the row index.

Returns Element

getRowIndexByPrimaryKey

Get row index by primary key or row data.

Parameter	Type	Description
value	`string` \| `Object`	Defines the primary key value.

Returns number

getRowInfo

Get a row information based on cell

Parameter	Type	Description
target	`Element` \| `EventTarget`	specifies the element

Returns RowInfo

getRows

Gets all the data rows of the Grid.

Returns Element[]

getRowsObject

Get an array of row objects.

Returns Row[]

getSelectedColumnsUid

Gets the collection of selected columns uid.

Returns string[]

getSelectedRecords

Gets the collection of selected records.

Returns Object[]

getSelectedRowCellIndexes

Gets the collection of selected row and cell indexes.

Returns ISelectedCell[]

getSelectedRowIndexes

Gets the collection of selected row indexes.

Returns number[]

getSelectedRows

Gets the collection of selected rows.

Returns Element[]

getSummaryValues

To perform aggregate operation on a column.

Parameter	Type	Description
summaryCol	`AggregateColumnModel`	Pass Aggregate Column details.
summaryData	`Object`	Pass JSON Array for which its field values to be calculated.

Returns number

getUidByColumnField

Gets UID by column name.

Parameter	Type	Description
field	`string`	Specifies the column name.

Returns string

getVisibleColumns

Gets the visible columns from the Grid.

Returns Column[]

goToPage

Navigates to the specified target page.

Parameter	Type	Description
pageNo	`number`	Defines the page number to navigate.

Returns void

groupCollapseAll

Collapses all the grouped rows of the Grid.

Returns void

groupColumn

Groups a column by column name.

Parameter	Type	Description
columnName	`string`	Defines the column name to group.

Returns void

groupExpandAll

Expands all the grouped rows of the Grid.

Returns void

hideColumns

Hides a column by column name.

Parameter	Type	Description
keys	`string` \| `string[]`	Defines a single or collection of column names.
hideBy (optional)	`string`	Defines the column key either as field name or header text.

Returns void

hideScroll

Hides the scrollbar placeholder of Grid content when grid content is not overflown.

Returns void

hideSpinner

By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.

Returns void

openColumnChooser

Column chooser can be displayed on screen by given position(X and Y axis).

Parameter	Type	Description
x (optional)	`number`	Defines the X axis.
y (optional)	`number`	Defines the Y axis.

Returns void

pdfExport

Export Grid data to PDF document.

Parameter	Type	Description
pdfExportProperties (optional)	`PdfExportProperties`	Defines the export properties of the Grid.
isMultipleExport (optional)	`boolean`	Define to enable multiple export.
pdfDoc (optional)	`Object`	Defined the Pdf Document if multiple export is enabled.
isBlob (optional)	`boolean`	If ‘isBlob’ set to true, then it will be returned as blob data.

Returns Promise

print

By default, prints all the pages of the Grid and hides the pager.

You can customize print options using the
printMode.

Returns void

refresh

Refreshes the Grid header and content.

Returns void

refreshColumns

Refreshes the Grid column changes.

Returns void

refreshHeader

Refreshes the Grid header.

Returns void

reorderColumnByIndex

Changes the Grid column positions by field index. If you invoke reorderColumnByIndex multiple times,
then you won’t get the same results every time.

Parameter	Type	Description
fromIndex	`number`	Defines the origin field index.
toIndex	`number`	Defines the destination field index.

Returns void

reorderColumnByModel

Reorders a column in the Grid using column models.
Moves the specified column (fromColumn) before the target column (toColumn),
supporting both standard and stacked header columns.

Parameter	Type	Description
fromColumn	`Column`	The column model to be moved.
toColumn	`Column`	The target column model before which the source column will be placed.

Returns void

reorderColumnByTargetIndex

Changes the Grid column positions by field index. If you invoke reorderColumnByTargetIndex multiple times,
then you will get the same results every time.

Parameter	Type	Description
fieldName	`string` \| `string[]`	Defines the field name.
toIndex	`number`	Defines the destination field index.

Returns void

reorderColumns

Changes the Grid column positions by field names.

Parameter	Type	Description
fromFName	`string` \| `string[]`	Defines the origin field name.
toFName	`string`	Defines the destination field name.

Returns void

reorderRows

Changes the Grid Row position with given indexes.

Parameter	Type	Description
fromIndexes	`number[]`	Defines the origin Indexes.
toIndex	`number`	Defines the destination Index.

Returns void

saveCell

Saves the cell that is currently edited. It does not save the value to the DataSource.

Returns void

search

Searches Grid records using the given key.
You can customize the default search option by using the
searchSettings.

Parameter	Type	Description
searchString	`string`	Defines the key.

Returns void

selectCell

Selects a cell by the given index.

Parameter	Type	Description
cellIndex	`IIndex`	Defines the row and column indexes.
isToggle (optional)	`boolean`	If set to true, then it toggles the selection.

Returns void

selectCells

Selects a collection of cells by row and column indexes.

Parameter	Type	Description
rowCellIndexes	`ISelectedCell[]`	Specifies the row and column indexes.

Returns void

selectCellsByRange

Selects a range of cells from start and end indexes.

Parameter	Type	Description
startIndex	`IIndex`	Specifies the row and column’s start index.
endIndex (optional)	`IIndex`	Specifies the row and column’s end index.

Returns void

selectRow

Selects a row by given index.

Parameter	Type	Description
index	`number`	Defines the row index.
isToggle (optional)	`boolean`	If set to true, then it toggles the selection.

Returns void

selectRows

Selects a collection of rows by indexes.

Parameter	Type	Description
rowIndexes	`number[]`	Specifies the row indexes.

Returns void

selectRowsByRange

Selects a range of rows from start and end row indexes.

Parameter	Type	Description
startIndex	`number`	Specifies the start row index.
endIndex (optional)	`number`	Specifies the end row index.

Returns void

serverCsvExport

Sends a Post request to export Grid to CSV file in server side.

Parameter	Type	Description
url	`string`	Pass Url for server side csv export action.
headers (optional)	`ExportHeaders`	The headers to include in the export request.

Returns void

serverExcelExport

Sends a Post request to export Grid to Excel file in server side.

Parameter	Type	Description
url	`string`	Pass Url for server side excel export action.
headers (optional)	`ExportHeaders`	The headers to include in the export request.

Returns void

serverPdfExport

Sends a Post request to export Grid to Pdf file in server side.

Parameter	Type	Description
url	`string`	Pass Url for server side pdf export action.
headers (optional)	`ExportHeaders`	The headers to include in the export request.

Returns void

setCellValue

Updates particular cell value based on the given primary key value.

Primary key column must be specified using columns.isPrimaryKey property.

Parameter	Type	Description
key	`string` \| `number`	Specifies the PrimaryKey value of dataSource.
field	`string`	Specifies the field name which you want to update.
value	`string` \| `number` \| `boolean` \| `Date` \| `null`	To update new value for the particular cell.

Returns void

setGridContent

Sets the content div of the Grid to replace the old Grid content.

Parameter	Type	Description
element	`Element`	Specifies the Grid content.

Returns void

setGridContentTable

Sets the content table of the Grid to replace the old content table.

Parameter	Type	Description
element	`Element`	Specifies the Grid content table.

Returns void

setGridHeaderContent

Sets the header div of the Grid to replace the old header.

Parameter	Type	Description
element	`Element`	Specifies the Grid header.

Returns void

setGridHeaderTable

Sets the header table of the Grid to replace the old one.

Parameter	Type	Description
element	`Element`	Specifies the Grid header table.

Returns void

setGridPager

Sets the pager of the Grid to replace the old pager.

Parameter	Type	Description
element	`Element`	Specifies the Grid pager.

Returns void

setRowData

Updates and refresh the particular row values based on the given primary key value.

Primary key column must be specified using columns.isPrimaryKey property.

Parameter	Type	Description
key	`string` \| `number`	Specifies the PrimaryKey value of dataSource.
rowData (optional)	`Object`	To update new data for the particular row.

Returns void

showAdaptiveFilterDialog

To manually show the vertical row mode filter dialog

Returns void

showAdaptiveSortDialog

To manually show the vertical row sort filter dialog

Returns void

showColumns

Shows a column by its column name.

Parameter	Type	Description
keys	`string` \| `string[]`	Defines a single or collection of column names.
showBy (optional)	`string`	Defines the column key either as field name or header text.

Returns void

showSpinner

By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.

Returns void

sortColumn

Sorts a column with the given options.

Parameter	Type	Description
columnName	`string`	Defines the column name to be sorted.
direction	`SortDirection`	Defines the direction of sorting field.
isMultiSort (optional)	`boolean`	Specifies whether the previous sorted columns are to be maintained.

Returns void

startEdit

Starts edit the selected row. At least one row must be selected before invoking this method.
editSettings.allowEditing should be true.

    <button #addBtnObj cssClass='e-info' (click)='click()'> Click </button>
	<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings'>
		<e-columns>
			<e-column field='OrderID' isPrimaryKey='true' textAlign='Right'>
			</e-column>
			<e-column field='CustomerID'></e-column>
		</e-columns>
	</ejs-grid>

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  providers: [EditService]
})
export class AppComponent {
  public data: Object[] = orderDetails;
  public editSettings: Object ={ allowEditing: true, allowAdding: true, allowDeleting: true };

  @ViewChild('grid')
  public grid: GridComponent;

  public click() {
    // Select the Row in 1 index
    this.grid.selectRow(1);
    // Edit the seleted row
    this.grid.startEdit();
  }
}

Returns void

ungroupColumn

Ungroups a column by column name.

    <button #addBtnObj cssClass='e-info' (click)='click()'> Click </button>
	<ejs-grid #grid [dataSource]='data' allowGrouping='true' [groupSettings]="groupOptions">
		<e-columns>
			<e-column field='OrderID' textAlign='Right'></e-column>
			<e-column field='CustomerID'></e-column>
		</e-columns>
	</ejs-grid>

import { Component, ViewChild } from '@angular/core';
import { orderDetails } from './data';
import { GridComponent, GroupService, GroupSettingsModel } from '@syncfusion/ej2-angular-grids'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  providers: [GroupService]
})
export class AppComponent {
  public data: Object[] = orderDetails;
  public groupOptions: GroupSettingsModel = { columns: ["CustomerID"] };

  @ViewChild('grid')
  public grid: GridComponent;

  public click() {
    // Ungroup a column by field name.
    this.grid.ungroupColumn('CustomerID');
  }
}

Parameter	Type	Description
columnName	`string`	Defines the column name to ungroup.

Returns void

updateCell

To update the specified cell by given value without changing into edited state.

Parameter	Type	Description
rowIndex	`number`	Defines the row index.
field	`string`	Defines the column field.
value	`string` \| `number` \| `boolean` \| `Date`	Defines the value to be changed.

Returns void

updateExternalMessage

Defines the text of external message.

Parameter	Type	Description
message	`string`	Defines the message to update.

Returns void

updateRow

To update the specified row by given values without changing into edited state.

    <button #addBtnObj cssClass='e-info' (click)='click()'> Click </button>
	<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings'>
		<e-columns>
			<e-column field='OrderID' isPrimaryKey='true' textAlign='Right'></e-column>
			<e-column field='CustomerID'></e-column>
			<e-column field='ShipCountry'></e-column>
		</e-columns>
	</ejs-grid>

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  providers: [EditService]
})
export class AppComponent {
  public data: Object[] = orderDetails;
  public editSettings: Object = { allowEditing: true, mode: 'Batch' };

  @ViewChild('grid')
  public grid: GridComponent;

  public click() {
    // Update a specified row by given options
    this.grid.updateRow(1, { OrderID: 10248, CustomerID: 'HANAR', ShipCountry: 'Germany' });
  }
}

Parameter	Type	Description
index	`number`	Defines the row index.
data	`Object`	Defines the data object to be updated.

Returns void

Events

actionBegin EmitType< PageEventArgs|GroupEventArgs|FilterEventArgs|SearchEventArgs|SortEventArgs|AddEventArgs|SaveEventArgs|EditEventArgs|DeleteEventArgs|ActionEventArgs|NotifyArgs|ReorderEventArgs>

Triggers when Grid actions such as sorting, filtering, paging, grouping etc., starts.

import { Grid, Page, PageEventArgs } from '@syncfusion/ej2-grids';
import { orderDataSource } from './data-source';

Grid.Inject(Page);

let grid: Grid = new Grid({
  dataSource: orderDataSource,
  allowPaging: true,
  // For Paging action
  actionBegin: (args: PageEventArgs) => {
    console.log(args.requestType);
  }
});
grid.appendTo("#Grid");

actionComplete EmitType< PageEventArgs|GroupEventArgs|FilterEventArgs|SearchEventArgs|SortEventArgs|AddEventArgs|SaveEventArgs|EditEventArgs|DeleteEventArgs|ActionEventArgs|NotifyArgs|ReorderEventArgs>

Triggers when Grid actions such as sorting, filtering, paging, grouping etc. are completed.

actionFailure EmitType<FailureEventArgs>

Triggers when any Grid action failed to achieve the desired results.

batchAdd EmitType<BatchAddArgs>

Triggers when records are added in batch mode.

batchCancel EmitType<BatchCancelArgs>

Triggers when cancel the batch edit changes batch mode.

batchDelete EmitType<BatchDeleteArgs>

Triggers when records are deleted in batch mode.

beforeAutoFill EmitType<BeforeAutoFillEventArgs>

Triggers before Grid autoFill action.

beforeBatchAdd EmitType<BeforeBatchAddArgs>

Triggers before records are added in batch mode.

beforeBatchDelete EmitType<BeforeBatchDeleteArgs>

Triggers before records are deleted in batch mode.

beforeBatchSave EmitType<BeforeBatchSaveArgs>

Triggers before records are saved in batch mode.

beforeCopy EmitType<BeforeCopyEventArgs>

Triggers before Grid copy action.

beforeCustomFilterOpen EmitType<BeforeCustomFilterOpenEventArgs>

Event triggered before the custom filter dialog is opened.

beforeDataBound EmitType<BeforeDataBoundArgs>

Triggers before data is bound to Grid.

beforeDetailTemplateDetach EmitType<DetailTemplateDetachArgs>

Event triggered before a detail template row is removed from the DOM.
This event allows executing necessary cleanup operations or additional actions before the detail row is detached.

beforeExcelExport EmitType<Object>

Triggers before Grid data is exported to Excel file.

beforeOpenAdaptiveDialog EmitType<AdaptiveDialogEventArgs>

Triggers before adaptive filter and sort dialogs open.

beforeOpenColumnChooser EmitType<ColumnChooserEventArgs>

Triggers before the columnChooser open.

beforePaste EmitType<BeforePasteEventArgs>

Triggers before Grid paste action.

beforePdfExport EmitType<Object>

Triggers before Grid data is exported to PDF document.

beforePrint EmitType<PrintEventArgs>

Triggers before the print action starts.

beginEdit EmitType<BeginEditArgs>

Triggers before the record is to be edit.

cellDeselected EmitType<CellDeselectEventArgs>

Triggers when a particular selected cell is deselected.

cellDeselecting EmitType<CellDeselectEventArgs>

Triggers before the selected cell is deselecting.

cellEdit EmitType<CellEditArgs>

Triggers when the cell is being edited.

cellSave EmitType<CellSaveArgs>

Triggers when the cell is being saved.

cellSaved EmitType<CellSaveArgs>

Triggers after the cell is saved.

cellSelected EmitType<CellSelectEventArgs>

Triggers after a cell is selected.

cellSelecting EmitType<CellSelectingEventArgs>

Triggers before any cell selection occurs.

checkBoxChange EmitType<CheckBoxChangeEventArgs>

Triggers when the check box state change in checkbox column.

columnDataStateChange EmitType<ColumnDataStateChangeEventArgs>

Triggers when the grid actions such as Sorting, Paging, Grouping etc., are done to get column dataSource.
In this event,the current view column data and total record count should be assigned to the column dataSource based
on the action performed.

columnDeselected EmitType<ColumnDeselectEventArgs>

Triggers when a selected column is deselected.

columnDeselecting EmitType<ColumnDeselectEventArgs>

Triggers before deselecting the selected column.

columnDrag EmitType<ColumnDragEventArgs>

Triggers when column header element is dragged (moved) continuously.

columnDragStart EmitType<ColumnDragEventArgs>

Triggers when column header element drag (move) starts.

columnDrop EmitType<ColumnDragEventArgs>

Triggers when a column header element is dropped on the target column.

columnMenuClick EmitType<MenuEventArgs>

Triggers when click on column menu.

columnMenuClose EmitType<ColumnMenuOpenEventArgs>

Triggers before the column menu closes.
This event allows you to perform custom actions or cancel the closing of the column menu.

columnMenuOpen EmitType<ColumnMenuOpenEventArgs>

Triggers before column menu opens.

columnSelected EmitType<ColumnSelectEventArgs>

Triggers after a column is selected.

columnSelecting EmitType<ColumnSelectingEventArgs>

Triggers before column selection occurs.

commandClick EmitType<CommandClickEventArgs>

Triggers when command button is clicked.

contextMenuClick EmitType<ContextMenuClickEventArgs>

Triggers when click on context menu.

contextMenuClose EmitType<ContextMenuOpenEventArgs>

Triggers before the context menu closes.
This event allows you to perform custom actions or cancel the closing of the context menu.

contextMenuOpen EmitType<ContextMenuOpenEventArgs>

Triggers before context menu opens.

created EmitType<Object>

Triggers when the component is created.

dataBound EmitType<Object>

Triggers when data source is populated in the Grid.

dataSourceChanged EmitType<DataSourceChangedEventArgs>

Triggers when the grid data is added, deleted and updated.
Invoke the done method from the argument to start render after edit operation.

dataStateChange EmitType<DataStateChangeEventArgs>

Triggers when the grid actions such as Sorting, Paging, Grouping etc., are done.
In this event,the current view data and total record count should be assigned to the dataSource based on the action performed.

destroyed EmitType<Object>

Triggers when the component is destroyed.

detailDataBound EmitType<DetailDataBoundEventArgs>

Triggers after detail row expands.

This event triggers at initial expand.

excelAggregateQueryCellInfo EmitType<AggregateQueryCellInfoEventArgs>

Triggers before exporting aggregate cell to Excel document. You can also customize the PDF cells.

excelExportComplete EmitType<ExcelExportCompleteArgs>

Triggers after Grid data is exported to Excel file.

excelHeaderQueryCellInfo EmitType<ExcelHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to Excel file.
You can also customize the Excel cells.

excelQueryCellInfo EmitType<ExcelQueryCellInfoEventArgs>

Triggers before exporting each cell to Excel file.
You can also customize the Excel cells.

exportDetailDataBound EmitType<ExportDetailDataBoundEventArgs>

Triggers before exporting each detail Grid to PDF document.

exportDetailTemplate EmitType<ExportDetailTemplateEventArgs>

Triggers before exporting each detail template.

exportGroupCaption EmitType<ExportGroupCaptionEventArgs>

Triggers before exporting each caption row to PDF/Excel/CSV document. You can also customize the export caption row values.

headerCellInfo EmitType<HeaderCellInfoEventArgs>

Triggered for stacked header.

keyPressed EmitType<KeyboardEventArgs>

Triggers when any keyboard keys are pressed inside the grid.

lazyLoadGroupCollapse EmitType<LazyLoadArgs>

Triggers when collapse the caption row in lazy load grouping.

lazyLoadGroupExpand EmitType<LazyLoadArgs>

Triggers when expand the caption row in lazy load grouping.

load EmitType<Object>

This event allows customization of Grid properties before rendering.

pdfAggregateQueryCellInfo EmitType<AggregateQueryCellInfoEventArgs>

Triggers before exporting aggregate cell to PDF document. You can also customize the PDF cells.

pdfExportComplete EmitType<PdfExportCompleteArgs>

Triggers after Grid data is exported to PDF document.

pdfHeaderQueryCellInfo EmitType<PdfHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to PDF document. You can also customize the PDF cells.

pdfQueryCellInfo EmitType<PdfQueryCellInfoEventArgs>

Triggers before exporting each cell to PDF document. You can also customize the PDF cells.

printComplete EmitType<PrintEventArgs>

Triggers after print action is completed.

queryCellInfo EmitType<QueryCellInfoEventArgs>

Triggered every time a request is made to access cell information, element, or data.
This will be triggered before the cell element is appended to the Grid element.

recordClick EmitType<RecordClickEventArgs>

Triggers when record is clicked.

recordDoubleClick EmitType<RecordDoubleClickEventArgs>

Triggers when record is double clicked.

resizeStart EmitType<ResizeArgs>

Triggers when column resize starts.

resizeStop EmitType<ResizeArgs>

Triggers when column resize ends.

resizing EmitType<ResizeArgs>

Triggers on column resizing.

rowDataBound EmitType<RowDataBoundEventArgs>

Triggered every time a request is made to access row information, element, or data.
This will be triggered before the row element is appended to the Grid element.

rowDeselected EmitType<RowDeselectEventArgs>

Triggers when a selected row is deselected.

rowDeselecting EmitType<RowDeselectingEventArgs>

Triggers before deselecting the selected row.

rowDrag EmitType<RowDragEventArgs>

Triggers when row elements are dragged (moved) continuously.

rowDragStart EmitType<RowDragEventArgs>

Triggers when row element’s drag(move) starts.

rowDragStartHelper EmitType<RowDragEventArgs>

Triggers when row element’s before drag(move).

rowDrop EmitType<RowDragEventArgs>

Triggers when row elements are dropped on the target row.

rowSelected EmitType<RowSelectEventArgs>

Triggers after a row is selected.

rowSelecting EmitType<RowSelectingEventArgs>

Triggers before row selection occurs.

toolbarClick EmitType<ClickEventArgs>

Triggers when toolbar item is clicked.

GridComponent

Properties

adaptiveUIMode AdaptiveMode

aggregates AggregateRowModel[]

allowExcelExport boolean

allowFiltering boolean

allowGrouping boolean

allowKeyboard boolean

allowMultiSorting boolean

allowPaging boolean

allowPdfExport boolean

allowReordering boolean

allowResizing boolean

allowRowDragAndDrop boolean

allowSelection boolean

allowSorting boolean

allowTextWrap boolean

autoFit boolean

childGrid GridModel

clipMode ClipMode

clipboardModule Clipboard

columnChooserSettings ColumnChooserSettingsModel

columnMenuItems ColumnMenuItem[]|ColumnMenuItemModel[]

columnMenuModule ColumnMenu

columnQueryMode ColumnQueryModeType

columns Column[]|string[]|ColumnModel[]

contextMenuItems ContextMenuItem[]|ContextMenuItemModel[]

contextMenuModule ContextMenu

cssClass string

currentAction ActionArgs

currentViewData Object[]

dataSource Object|DataManager|DataResult

detailTemplate any

editModule Edit

editSettings EditSettingsModel

ej2StatePersistenceVersion string

emptyRecordTemplate any

enableAdaptiveUI boolean

enableAltRow boolean

enableAutoFill boolean

enableColumnSpan boolean

enableColumnVirtualization boolean

enableHeaderFocus boolean

enableHover boolean

enableHtmlSanitizer boolean

enableImmutableMode boolean

enableInfiniteScrolling boolean

enablePersistence boolean

enableRowSpan boolean

enableRtl boolean

enableStickyHeader boolean

enableVirtualMaskRow boolean

enableVirtualization boolean

excelExportModule ExcelExport

exportGrids string[]

filterModule Filter

filterSettings FilterSettingsModel

frozenColumns number

frozenRows number

gridLines GridLine

groupModule Group

groupSettings GroupSettingsModel

height string|number

hierarchyPrintMode HierarchyGridPrintMode

infiniteScrollModule InfiniteScroll

infiniteScrollSettings InfiniteScrollSettingsModel

keyboardModule KeyboardEvents

loadingIndicator LoadingIndicatorModel

locale string

pageSettings PageSettingsModel

pagerModule Page

pagerTemplate any

parentDetails ParentDetails

pdfExportModule PdfExport

printMode PrintMode

printModule Print

query Query

queryString string

reorderModule Reorder

requireTemplateRef boolean