GridModel

23 Sep 202524 minutes to read

Interface for a class Grid

Properties

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.

    <ejs-grid [dataSource]='data' allowPaging='true' (actionBegin)='actionBegin($event)'>
    </ejs-grid>

import { Component } from '@angular/core';
import { orderDetails } from './data';
import { PageEventArgs, PageService } from '@syncfusion/ej2-angular-grids'

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

  // For Paging action
  public actionBegin(args: PageEventArgs) {
    console.log(args.requestType);
  }
}

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.

adaptiveUIMode AdaptiveMode

One of the adaptiveUIMode enumeration that specifies the Adaptive Mode. The default value is 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.

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'];
    }
}

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;
    }
}

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;
    }
}

allowKeyboard boolean

Enables or disables the key board interaction of Grid.

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;
    }
}

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.

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'];
    }
}

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;
    }
}

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;
    }
}

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;
    }
}

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;
    }
}

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;
    }
}

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;
    }
}

autoFit boolean

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

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.

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;
    }
}

columnChooserSettings ColumnChooserSettingsModel

Configures the column chooser in the Grid.

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.

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.

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;
    }
}

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.

cssClass string

Defines the own class for the grid element.

currentAction ActionArgs

Gets or sets the current action details.

currentViewData Object[]

Gets the currently visible records of the Grid.

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;
    }
}

detailTemplate string|Function

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.

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'];
    }
}

ej2StatePersistenceVersion string

Defines the version for Grid persistence.

emptyRecordTemplate string|Function

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.

enableAdaptiveUI boolean

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

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;
    }
}

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' };
    }
}

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;
    }
}

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;
    }
}

enableHeaderFocus boolean

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

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;
    }
}

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.

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.

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;
    }
}

enablePersistence boolean

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

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;
    }
}

enableRtl boolean

Enable or disable rendering component in right to left direction.

enableStickyHeader boolean

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

enableVirtualMaskRow boolean

Specifies the shimmer effect for Grid virtual and infinite scrolling.

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;
    }
}

exportGrids string[]

Defines the id of the grids that needs to be exported

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'};
    }
}

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;
    }
}

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;
    }
}

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;
    }
}

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'] };
    }
}

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;
    }
}

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.

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 };
    }
}

loadingIndicator LoadingIndicatorModel

Configures the Loading Indicator of the Grid.

locale string

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

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 };
    }
}

pagerTemplate string|Function

It used to render pager template

parentDetails ParentDetails

Gets the parent Grid details.

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'];
    }
}

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');
    }
}

queryString string

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

resizeSettings ResizeSettingsModel

Defines the resizing behavior of the Grid.

rowDropSettings RowDropSettingsModel

Configures the row drop settings.

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;
    }
}

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

rowTemplate string|Function

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.

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' };
    }
}

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;
    }
}

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' };
    }
}

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'];
    }
}

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;
    }
}

showHider ShowHide

The showHider is used to manipulate column’s show/hide operation 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' }] };
    }
}

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' };
    }
}

toolbar []

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'];
    }
}

toolbarTemplate string|Function

It used to render toolbar template

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;
    }
}