Angular

Search results

GridModel API in Angular Grid API component

Interface for a class Grid

Properties

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

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>`

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.

beforeDataBound
`EmitType<BeforeDataBoundArgs>`

Triggers before data is bound to Grid.

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 cell is saved.

cellSaved
`EmitType<CellSaveArgs>`

Triggers when 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.

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<MenuEventArgs>`

Triggers when click on context menu.

contextMenuOpen
`EmitType<BeforeOpenCloseMenuEventArgs>`

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.

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<RowDeselectEventArgs>`

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.

aggregates
`AggregateRowModel[]`

Configures the Grid aggregate rows.

<div id='Grid'></grid>

import { Grid, Aggregate } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Aggregate);
let grid: Grid = new Grid({
    dataSource: data,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'Freight', headerText: 'Freight', width: 150, textAlign: 'Right', format:'C2' },
    ],
    aggregates: [{
        columns: [{type: 'Sum',field: 'Freight',format: 'C2',footerTemplate: 'Sum: ${Sum}'}]
    }]
});
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Toolbar, ExcelExport } from '@syncfusion/ej2-grids';
import { orderDetails } from './data-source';
Grid.Inject(Toolbar, ExcelExport);
let grid: Grid = new Grid(
  {
    dataSource: orderDetails,
    allowExcelExport: true,
    toolbar: ['ExcelExport'],
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Filter } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Filter);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowFiltering: true,
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Group } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Group);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowGrouping: true,
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Sort } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Sort);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowSorting: true,
    allowMultiSorting: true,
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Toolbar, PdfExport } from '@syncfusion/ej2-grids';
import { orderDetails } from './data-source';
Grid.Inject(Toolbar, PdfExport);
let grid: Grid = new Grid(
  {
    dataSource: orderDetails,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Reorder } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Reorder);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowReordering: true,
  });
grid.appendTo('#Grid');

allowResizing
`boolean`

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

<div id='Grid'></grid>

import { Grid, Resize } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Resize );
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowResizing: true,
  });
grid.appendTo('#Grid');

allowRowDragAndDrop
`boolean`

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

<div id='Grid'></grid>

import { Grid, RowDD  } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(RowDD );
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowRowDragAndDrop: true, 
  });
grid.appendTo('#Grid');

allowSelection
`boolean`

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

<div id='Grid'></grid>

import { Grid, Selection  } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Selection );
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowSelection: true,
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Sort } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Sort);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowSorting: true,
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowTextWrap: true, 
  });
grid.appendTo('#Grid');

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
`string`

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    clipMode: 'Ellipsis',
  });
grid.appendTo('#Grid');

columnChooserSettings
`ColumnChooserSettingsModel`

Configures the column chooser in the Grid.

columnMenuItems
`string[]` | `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
`string`

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    columns: [
      { field: 'CategoryName', headerText: 'Category Name', width: 150 },
      { field: 'ProductName', headerText: 'Product Name', width: 150 },
    ],
  });
grid.appendTo('#Grid');

contextMenuItems
`string[]` | `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.

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
  });
grid.appendTo('#Grid');

detailTemplate
`string`

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.

<div id='Grid'></grid>

import { Grid, Toolbar, Edit } from '@syncfusion/ej2-grids';
import { data } from './data-source';
Grid.Inject(Toolbar,Edit);
let grid: Grid = new Grid({
    dataSource: data,
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
});
grid.appendTo('#Grid');

ej2StatePersistenceVersion
`string`

Defines the version for Grid persistence.

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    enableAltRow: false,
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    enableAutoFill: true,
    selectionSettings:{mode:'Cell',cellSelectionMode:'Box'}
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, VirtualScroll} from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(VirtualScroll);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    enableVirtualization: true,
    enableColumnVirtualization: true,
    height: 300,
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    enableHover: true,
  });
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, InfiniteScroll} from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(InfiniteScroll);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    enableInfiniteScrolling: true,
    height: 300,   
  });
grid.appendTo('#Grid');

enablePersistence
`boolean`

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

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.

<div id='Grid'></grid>

import { Grid, VirtualScroll } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(VirtualScroll);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    enableVirtualization: true,
    height: 300  
  });
grid.appendTo('#Grid');

filterSettings
`FilterSettingsModel`

Configures the filter settings of the Grid.

<div id='Grid'></grid>

import { Grid, Filter } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Filter);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    allowFiltering: true,
    filterSettings: { type:'Menu'},
  });
grid.appendTo('#Grid');

frozenColumns
`number`

Gets or sets the number of frozen columns.

<div id='Grid'></grid>

import { Grid, Freeze } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Freeze);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    frozenColumns: 2,
  });
grid.appendTo('#Grid');

frozenRows
`number`

Gets or sets the number of frozen rows.

<div id='Grid'></grid>

import { Grid, Freeze } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
Grid.Inject(Freeze);
let grid: Grid = new Grid(
  {
    dataSource: categoryData,
    frozenRows: 2,
  });
grid.appendTo('#Grid');

gridLines
`string`

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: data,
gridLines: 'Both',
});
grid.appendTo('#Grid');

groupSettings
`GroupSettingsModel`

Configures the group settings.

<div id='Grid'></grid>

import { Grid, Group } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Group);
let grid: Grid = new Grid({
    dataSource: data,
    allowGrouping: true,
    groupSettings: { columns: ['Freight'] },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'Freight', headerText: 'Freight', width: 150, textAlign: 'Right', format:'C2' },
    ],
});
grid.appendTo('#Grid');

height
`string` | `number`

Defines the scrollable height of the grid content.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
    dataSource: data,
    height: '400',
});
grid.appendTo('#Grid');

hierarchyPrintMode
`string`

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.

<div id='Grid'></grid>

import { Grid, InfiniteScroll } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(InfiniteScroll);
let grid: Grid = new Grid({
    dataSource: data,
    height: 300,
    pageSettings: { pageSize: 50 },
    enableInfiniteScrolling: true,
    infiniteScrollSettings: { enableCache: true, maxBlocks: 3, initialBlocks: 3 },
});
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Page);
let grid: Grid = new Grid({
    dataSource: data,
    allowPaging:true,
    pageSettings: { currentPage: 1, pageSize: 12, pageCount: 8, pageSizes: true },
});
grid.appendTo('#Grid');

pagerTemplate
`string`

It used to render pager template

parentDetails
`ParentDetails`

Gets the parent Grid details.

printMode
`string`

Defines the print modes. The available print modes are

AllPages: Prints all pages of the Grid.

CurrentPage: Prints the current page of the Grid.

<div id='Grid'></grid>

import { Grid, Page, Toolbar } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Page,Toolbar);
let grid: Grid = new Grid({
dataSource: data,
toolbar: ['Print'],
printMode: 'CurrentPage',
allowPaging: true,
});
grid.appendTo('#Grid');

query
`Query`

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

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';
let data: DataManager = new DataManager({
    url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/?$top=7',
    adaptor: new ODataAdaptor
});
let grid: Grid = new Grid({
    dataSource: data,
    query: new Query().addParams('ej2grid', 'true'),
});
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
    dataSource: data,
    rowHeight: 20,
});
grid.appendTo('#Grid');

rowRenderingMode
`string`

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`

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.

<div id='Grid'></grid>

import { Grid, Search, Toolbar } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Search,Toolbar);
let grid: Grid = new Grid({
    dataSource: data,
    toolbar: ['Search'],
    searchSettings: { fields: ['CustomerID'], key: 'ha' },
    columns: [ 
        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
        { field: 'Freight', headerText: 'Freight', width: 150, textAlign: 'Right', format:'C2' },
    ]
});
grid.appendTo('#Grid');

selectedRowIndex
`number`

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

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
    dataSource: data,
    selectedRowIndex: 5,
});
grid.appendTo('#Grid');

selectionSettings
`SelectionSettingsModel`

Configures the selection settings.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
    dataSource: data,
    selectionSettings: { mode: 'Cell', cellSelectionMode: 'Box', type: 'Multiple' },
});
grid.appendTo('#Grid');

showColumnChooser
`boolean`

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

Check the ColumnChooser for its configuration.

<div id='Grid'></grid>

import { Grid, ColumnChooser, Toolbar } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(ColumnChooser, Toolbar);
let grid: Grid = new Grid({
    dataSource: data,
    toolbar: ['ColumnChooser'],
    showColumnChooser: true,
});
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, ColumnMenu } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(ColumnMenu);
let grid: Grid = new Grid({
    dataSource: data,
    showColumnMenu: true,
});
grid.appendTo('#Grid');

sortSettings
`SortSettingsModel`

Configures the sort settings.

<div id='Grid'></grid>

import { Grid, Sort } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Sort);
let grid: Grid = new Grid({
    dataSource: data,
    allowSorting: true,
    sortSettings: { columns: [{ field: 'OrderID', direction: 'Ascending' }] },
    columns: [
        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
        { field: 'Freight', headerText: 'Freight', width: 150, textAlign: 'Right', format:'C2' },
    ]
});
grid.appendTo('#Grid');

textWrapSettings
`TextWrapSettingsModel`

Configures the text wrap in the Grid.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
    dataSource: data,
    allowTextWrap: true,
    textWrapSettings: { wrapMode: 'Both' },
});
grid.appendTo('#Grid');

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.

<div id='Grid'></grid>

import { Grid, Toolbar } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Toolbar);
let grid: Grid = new Grid({
    dataSource: data,
    toolbar: ['Search','Print'],
});
grid.appendTo('#Grid');

toolbarTemplate
`string`

It used to render toolbar template

width
`string` | `number`

Defines the Grid width.

<div id='Grid'></grid>

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
    dataSource: data,
    width: '700',
});
grid.appendTo('#Grid');

Contents

Properties
actionBegin
actionComplete
actionFailure
batchAdd
batchCancel
batchDelete
beforeAutoFill
beforeBatchAdd
beforeBatchDelete
beforeBatchSave
beforeCopy
beforeDataBound
beforeExcelExport
beforeOpenAdaptiveDialog
beforeOpenColumnChooser
beforePaste
beforePdfExport
beforePrint
beginEdit
cellDeselected
cellDeselecting
cellEdit
cellSave
cellSaved
cellSelected
cellSelecting
checkBoxChange
columnDataStateChange
columnDeselected
columnDeselecting
columnDrag
columnDragStart
columnDrop
columnMenuClick
columnMenuOpen
columnSelected
columnSelecting
commandClick
contextMenuClick
contextMenuOpen
created
dataBound
dataSourceChanged
dataStateChange
destroyed
detailDataBound
excelAggregateQueryCellInfo
excelExportComplete
excelHeaderQueryCellInfo
excelQueryCellInfo
exportDetailDataBound
exportGroupCaption
headerCellInfo
keyPressed
lazyLoadGroupCollapse
lazyLoadGroupExpand
load
pdfAggregateQueryCellInfo
pdfExportComplete
pdfHeaderQueryCellInfo
pdfQueryCellInfo
printComplete
queryCellInfo
recordClick
recordDoubleClick
resizeStart
resizeStop
resizing
rowDataBound
rowDeselected
rowDeselecting
rowDrag
rowDragStart
rowDragStartHelper
rowDrop
rowSelected
rowSelecting
toolbarClick
aggregates
allowExcelExport
allowFiltering
allowGrouping
allowKeyboard
allowMultiSorting
allowPaging
allowPdfExport
allowReordering
allowResizing
allowRowDragAndDrop
allowSelection
allowSorting
allowTextWrap
childGrid
clipMode
columnChooserSettings
columnMenuItems
columnQueryMode
columns
contextMenuItems
cssClass
currentAction
dataSource
detailTemplate
editSettings
ej2StatePersistenceVersion
enableAdaptiveUI
enableAltRow
enableAutoFill
enableColumnVirtualization
enableHeaderFocus
enableHover
enableImmutableMode
enableInfiniteScrolling
enablePersistence
enableRtl
enableStickyHeader
enableVirtualMaskRow
enableVirtualization
filterSettings
frozenColumns
frozenRows
gridLines
groupSettings
height
hierarchyPrintMode
infiniteScrollSettings
loadingIndicator
locale
pageSettings
pagerTemplate
parentDetails
printMode
query
queryString
resizeSettings
rowDropSettings
rowHeight
rowRenderingMode
rowTemplate
searchSettings
selectedRowIndex
selectionSettings
showColumnChooser
showColumnMenu
sortSettings
textWrapSettings
toolbar
toolbarTemplate
width

Contents

Properties
actionBegin
actionComplete
actionFailure
batchAdd
batchCancel
batchDelete
beforeAutoFill
beforeBatchAdd
beforeBatchDelete
beforeBatchSave
beforeCopy
beforeDataBound
beforeExcelExport
beforeOpenAdaptiveDialog
beforeOpenColumnChooser
beforePaste
beforePdfExport
beforePrint
beginEdit
cellDeselected
cellDeselecting
cellEdit
cellSave
cellSaved
cellSelected
cellSelecting
checkBoxChange
columnDataStateChange
columnDeselected
columnDeselecting
columnDrag
columnDragStart
columnDrop
columnMenuClick
columnMenuOpen
columnSelected
columnSelecting
commandClick
contextMenuClick
contextMenuOpen
created
dataBound
dataSourceChanged
dataStateChange
destroyed
detailDataBound
excelAggregateQueryCellInfo
excelExportComplete
excelHeaderQueryCellInfo
excelQueryCellInfo
exportDetailDataBound
exportGroupCaption
headerCellInfo
keyPressed
lazyLoadGroupCollapse
lazyLoadGroupExpand
load
pdfAggregateQueryCellInfo
pdfExportComplete
pdfHeaderQueryCellInfo
pdfQueryCellInfo
printComplete
queryCellInfo
recordClick
recordDoubleClick
resizeStart
resizeStop
resizing
rowDataBound
rowDeselected
rowDeselecting
rowDrag
rowDragStart
rowDragStartHelper
rowDrop
rowSelected
rowSelecting
toolbarClick
aggregates
allowExcelExport
allowFiltering
allowGrouping
allowKeyboard
allowMultiSorting
allowPaging
allowPdfExport
allowReordering
allowResizing
allowRowDragAndDrop
allowSelection
allowSorting
allowTextWrap
childGrid
clipMode
columnChooserSettings
columnMenuItems
columnQueryMode
columns
contextMenuItems
cssClass
currentAction
dataSource
detailTemplate
editSettings
ej2StatePersistenceVersion
enableAdaptiveUI
enableAltRow
enableAutoFill
enableColumnVirtualization
enableHeaderFocus
enableHover
enableImmutableMode
enableInfiniteScrolling
enablePersistence
enableRtl
enableStickyHeader
enableVirtualMaskRow
enableVirtualization
filterSettings
frozenColumns
frozenRows
gridLines
groupSettings
height
hierarchyPrintMode
infiniteScrollSettings
loadingIndicator
locale
pageSettings
pagerTemplate
parentDetails
printMode
query
queryString
resizeSettings
rowDropSettings
rowHeight
rowRenderingMode
rowTemplate
searchSettings
selectedRowIndex
selectionSettings
showColumnChooser
showColumnMenu
sortSettings
textWrapSettings
toolbar
toolbarTemplate
width

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

GridModel API in Angular Grid API component

Properties

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

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

actionFailure EmitType<FailureEventArgs>

batchAdd EmitType<BatchAddArgs>

batchCancel EmitType<BatchCancelArgs>

batchDelete EmitType<BatchDeleteArgs>

beforeAutoFill EmitType<BeforeAutoFillEventArgs>

beforeBatchAdd EmitType<BeforeBatchAddArgs>

beforeBatchDelete EmitType<BeforeBatchDeleteArgs>

beforeBatchSave EmitType<BeforeBatchSaveArgs>

beforeCopy EmitType<BeforeCopyEventArgs>

beforeDataBound EmitType<BeforeDataBoundArgs>

beforeExcelExport EmitType<Object>

beforeOpenAdaptiveDialog EmitType<AdaptiveDialogEventArgs>

beforeOpenColumnChooser EmitType<ColumnChooserEventArgs>

beforePaste EmitType<BeforePasteEventArgs>

beforePdfExport EmitType<Object>

beforePrint EmitType<PrintEventArgs>

beginEdit EmitType<BeginEditArgs>

cellDeselected EmitType<CellDeselectEventArgs>

cellDeselecting EmitType<CellDeselectEventArgs>

cellEdit EmitType<CellEditArgs>

cellSave EmitType<CellSaveArgs>

cellSaved EmitType<CellSaveArgs>

cellSelected EmitType<CellSelectEventArgs>

cellSelecting EmitType<CellSelectingEventArgs>

checkBoxChange EmitType<CheckBoxChangeEventArgs>

columnDataStateChange EmitType<ColumnDataStateChangeEventArgs>

columnDeselected EmitType<ColumnDeselectEventArgs>

columnDeselecting EmitType<ColumnDeselectEventArgs>

columnDrag EmitType<ColumnDragEventArgs>

columnDragStart EmitType<ColumnDragEventArgs>

columnDrop EmitType<ColumnDragEventArgs>

columnMenuClick EmitType<MenuEventArgs>

columnMenuOpen EmitType<ColumnMenuOpenEventArgs>

columnSelected EmitType<ColumnSelectEventArgs>

columnSelecting EmitType<ColumnSelectingEventArgs>

commandClick EmitType<CommandClickEventArgs>

contextMenuClick EmitType<MenuEventArgs>

contextMenuOpen EmitType<BeforeOpenCloseMenuEventArgs>

created EmitType<Object>

dataBound EmitType<Object>

dataSourceChanged EmitType<DataSourceChangedEventArgs>

dataStateChange EmitType<DataStateChangeEventArgs>

destroyed EmitType<Object>

detailDataBound EmitType<DetailDataBoundEventArgs>

excelAggregateQueryCellInfo EmitType<AggregateQueryCellInfoEventArgs>

excelExportComplete EmitType<ExcelExportCompleteArgs>

excelHeaderQueryCellInfo EmitType<ExcelHeaderQueryCellInfoEventArgs>

excelQueryCellInfo EmitType<ExcelQueryCellInfoEventArgs>

exportDetailDataBound EmitType<ExportDetailDataBoundEventArgs>

exportGroupCaption EmitType<ExportGroupCaptionEventArgs>

headerCellInfo EmitType<HeaderCellInfoEventArgs>

keyPressed EmitType<KeyboardEventArgs>

lazyLoadGroupCollapse EmitType<LazyLoadArgs>

lazyLoadGroupExpand EmitType<LazyLoadArgs>

load EmitType<Object>

pdfAggregateQueryCellInfo EmitType<AggregateQueryCellInfoEventArgs>

pdfExportComplete EmitType<PdfExportCompleteArgs>

pdfHeaderQueryCellInfo EmitType<PdfHeaderQueryCellInfoEventArgs>

pdfQueryCellInfo EmitType<PdfQueryCellInfoEventArgs>

printComplete EmitType<PrintEventArgs>

queryCellInfo EmitType<QueryCellInfoEventArgs>

recordClick EmitType<RecordClickEventArgs>

recordDoubleClick EmitType<RecordDoubleClickEventArgs>

resizeStart EmitType<ResizeArgs>

resizeStop EmitType<ResizeArgs>

resizing EmitType<ResizeArgs>

rowDataBound EmitType<RowDataBoundEventArgs>

rowDeselected EmitType<RowDeselectEventArgs>

rowDeselecting EmitType<RowDeselectEventArgs>

rowDrag EmitType<RowDragEventArgs>

rowDragStart EmitType<RowDragEventArgs>

rowDragStartHelper EmitType<RowDragEventArgs>

rowDrop EmitType<RowDragEventArgs>

rowSelected EmitType<RowSelectEventArgs>

rowSelecting EmitType<RowSelectingEventArgs>

toolbarClick EmitType<ClickEventArgs>