GridComponent
represents the react Grid.
<GridComponent dataSource={data} allowPaging={true} allowSorting={true}/>
One of the adaptiveUIMode enumeration that specifies the Adaptive Mode. The default value is Both.
Defaults to Both
Configures the Grid aggregate rows.
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Inject,AggregateColumnsDirective, AggregateDirective, AggregatesDirective, Aggregate } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public footerSum(props: any) : any {
return(<span>Sum: {props.Sum}</span>)
}
public render(){
return <GridComponent dataSource={data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' textAlign='Right'/>
<ColumnDirective field='Freight' headerText='Freight' textAlign='Right'/>
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='Freight' type='Sum' footerTemplate={this.footerSum} />
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</GridComponent>
} }
Check the
Aggregates
for its configuration.
Defaults to []
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.
import { ExcelExport, Grid, Inject, Toolbar, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
public toolbar: ToolbarItems[] = ['ExcelExport'];
public render() {
return (
<GridComponent dataSource={data} toolbar={this.toolbar} allowExcelExport={true} >
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
); } }
Defaults to false
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.
import { Filter, GridComponent, Inject } from '@syncfusion/ej2-react-grids'
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <GridComponent dataSource={data} allowFiltering={true}>
<Inject services={[Filter]} />
</GridComponent>
}
};
Defaults to false
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.
import { GridComponent, Group, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} allowGrouping={true}>
<Inject services={[Group]}/>
</GridComponent >
}
};
Defaults to false
boolean
Enables or disables the key board interaction of Grid.
Defaults to true
boolean
If allowMultiSorting
set to true, then it will allow the user to sort multiple column in the grid.
allowSorting
should be true.
import { GridComponent, Sort, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} allowSorting={true} allowMultiSorting={true}>
<Inject services={[Sort]}/>
</GridComponent >
}
};
Defaults to false
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
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.
import { PdfExport, Grid, Inject, Toolbar, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
public toolbar: ToolbarItems[] = ['PdfExport'];
public render() {
return (
<GridComponent dataSource={data} toolbar={this.toolbar} allowPdfExport={true} >
<Inject services={[Toolbar, PdfExport]}/>
</GridComponent>
); } }
Defaults to false
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.
import { GridComponent, Reorder, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} allowReordering={true}>
<Inject services={[Reorder]}/>
</GridComponent >
} };
Defaults to false
boolean
If allowResizing
is set to true, Grid columns can be resized.
import { GridComponent, Resize , Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} allowResizing={true}>
<Inject services={[Resize ]}/>
</GridComponent >
} };
Defaults to false
boolean
If allowRowDragAndDrop
is set to true, you can drag and drop grid rows at another grid.
import { GridComponent, RowDD , Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} allowRowDragAndDrop={true}>
<Inject services={[RowDD]}/>
</GridComponent >
} };
Defaults to false
boolean
If allowSelection
is set to true, it allows selection of (highlight row) Grid records by clicking it.
import { GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} allowSelection={true}/>
} };
Defaults to true
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.
import { GridComponent, Sort, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} allowSorting={true}>
<Inject services={[Sort]}/>
</GridComponent >
}
};
Defaults to false
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.
import { GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} allowTextWrap={true}/>
} };
Defaults to false
boolean
If autoFit
set to true, then it will auto fit the columns based on given width.
Defaults to false
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 ”
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.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return (
<GridComponent dataSource={inventoryData}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Name of the Inventor' clipMode='Clip' />
<ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' clipMode='Ellipsis' />
</ColumnsDirective>
</GridComponent>
) } };
Defaults to Ellipsis
clipboardModule
is used to handle Grid copy action.
Configures the column chooser in the Grid.
Defaults to { columnChooserOperator: ‘startsWith’ }
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
ColumnMenu
The columnMenuModule
is used to manipulate column menu items and its action in the Grid.
columnQueryMode
provides 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
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.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return (
<GridComponent dataSource={inventoryData}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Name of the Inventor'/>
<ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' />
</ColumnsDirective>
</GridComponent>
) } };
Defaults to []
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
The contextMenuModule
is used to handle context menu items and its action in the Grid.
string
Defines the own class for the grid element.
Defaults to ”
ActionArgs
Gets or sets the current action details.
Defaults to {}
Object[]
Gets the currently visible records of the Grid.
Defaults to []
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.
import {GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return (
<GridComponent dataSource={data} />
) } };
Defaults to []
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.
Defaults to null
The editModule
is used to handle Grid content manipulation.
Configures the edit settings.
import { Edit, EditSettingsModel, Inject, GridComponent,Toolbar,ToolbarItems} from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
public toolbarOptions: ToolbarItems[] = ['Add', "Delete", "Edit"];
public render() {
return <GridComponent dataSource={data} editSettings={this.editOptions} toolbar={this.toolbarOptions} >
<Inject services={[Edit,Toolbar]} />
</GridComponent>
} }
Defaults to { allowAdding: false, allowEditing: false, allowDeleting: false, mode:‘Normal’,allowEditOnDblClick: true, showConfirmDialog: true, showDeleteConfirmDialog: false }
string
Defines the version for Grid persistence.
Defaults to ”
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.
Defaults to null
boolean
If enableAdaptiveUI
set to true the grid filter, sort, and edit dialogs render adaptively.
Defaults to false
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.
import {GridComponent} from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <GridComponent dataSource={data} enableAltRow={false} />
} };
Defaults to true
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
.
import {GridComponent, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public settings: SelectionSettingsModel = { cellSelectionMode: 'Box', mode: 'Cell'};
public render() {
return <GridComponent dataSource={data} enableAutoFill={true} selectionSettings={this.settings} />
} };
Defaults to false
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.
import { GridComponent, VirtualScroll, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} height={300} enableVirtualization={true} enableColumnVirtualization={true}>
<Inject services={[VirtualScroll]}/>
</GridComponent >
} };
Defaults to false
boolean
If enableHeaderFocus
set to true, then header element will be focused when focus moves to grid.
Defaults to false
boolean
If enableHover
is set to true, the row hover is enabled in the Grid.
import {GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <GridComponent dataSource={data} enableHover={true} />
} };
Defaults to true
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
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
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.
import { GridComponent, InfiniteScroll, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} height={300} enableInfiniteScrolling={true}>
<Inject services={[InfiniteScroll]}/>
</GridComponent >
} };
Defaults to false
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
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
boolean
Specifies the shimmer effect for Grid virtual and infinite scrolling.
Defaults to true
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.
import { GridComponent, VirtualScroll, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render(){
return <GridComponent dataSource={data} height={300} enableVirtualization={true}>
<Inject services={[VirtualScroll]}/>
</GridComponent >
} };
Defaults to false
ExcelExport
The excelExportModule
is used to handle Excel exporting feature in the Grid.
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.
Configures the filter settings of the Grid.
import { Filter, FilterSettingsModel, GridComponent, Inject } from '@syncfusion/ej2-react-grids'
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public FilterOptions: FilterSettingsModel = { type: 'Menu' };
public render() {
return <GridComponent dataSource={data} filterSettings={this.FilterOptions} allowFiltering={true} >
<Inject services={[Filter]} />
</GridComponent>
} };
Defaults to {columns: [], type: ‘FilterBar’, mode: ‘Immediate’, showFilterBarStatus: true, immediateModeDelay: 1500 , operators: {}}
number
Gets or sets the number of frozen columns.
import { Freeze, FilterSettingsModel, GridComponent, Inject } from '@syncfusion/ej2-react-grids'
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <GridComponent dataSource={data} frozenColumns={1} >
<Inject services={[Freeze]} />
</GridComponent>
} };
Defaults to 0
number
Gets or sets the number of frozen rows.
import { Freeze, FilterSettingsModel, GridComponent, Inject } from '@syncfusion/ej2-react-grids'
import * as React from 'react';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <GridComponent dataSource={data} frozenRows={1} >
<Inject services={[Freeze]} />
</GridComponent>
} };
Defaults to 0
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.import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (<GridComponent dataSource={data} gridLines='Both' />);
}
}
Defaults to Default
The groupModule
is used to manipulate grouping behavior in the Grid.
Configures the group settings.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Group, Inject } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (
<GridComponent dataSource={data} allowGrouping={true} groupSettings={{ columns: ['Freight'] }}>
<ColumnsDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Group]}/>
</GridComponent>);
}
}
Defaults to {showDropArea: true, showToggleButton: false, showGroupedColumn: false, showUngroupButton: true, columns: []}
string
| number
Defines the scrollable height of the grid content.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (<GridComponent dataSource={data} height="400" />);
}
}
Defaults to ‘auto’
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
InfiniteScroll
The infiniteScrollModule
is used to manipulate infinite scrolling in the Grid.
Configures the infinite scroll settings.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, Inject, InfiniteScroll, InfiniteScrollSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public infiniteOptions: InfiniteScrollSettingsModel = { enableCache: true, maxBlocks: 3, initialBlocks: 3 };
public render() {
return (
<GridComponent dataSource={data} height="300" enableInfiniteScrolling={true} infiniteScrollSettings={ this.infiniteOptions } pageSettings={ { pageSize: 50 } }>
<Inject services={[InfiniteScroll]}/>
</GridComponent>);
}
}
Defaults to { enableCache: false, maxBlocks: 5, initialBlocks: 5 }
KeyboardEvents
The keyboardModule
is used to manipulate keyboard interactions in the Grid.
Configures the Loading Indicator of the Grid.
Defaults to {indicatorType: ‘Spinner’}
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Configures the pager in the Grid.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, Inject, Page, PageSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public pageOptions: PageSettingsModel = { currentPage: 1, pageSize: 12, pageCount: 8, pageSizes: true };
public render() {
return (
<GridComponent dataSource={data} allowPaging={true} pageSettings={this.pageOptions}>
<Inject services={[Page]}/>
</GridComponent>);
}
}
Defaults to {currentPage: 1, pageSize: 12, pageCount: 8, enableQueryString: false, pageSizes: false, template: null}
The pagerModule
is used to manipulate paging in the Grid.
string
| Function
It used to render pager template
Defaults to null
ParentDetails
Gets the parent Grid details.
Defaults to {}
PdfExport
The pdfExportModule
is used to handle PDF exporting feature in the Grid.
Defines the print modes. The available print modes are
AllPages
: Prints all pages of the Grid.CurrentPage
: Prints the current page of the Grid.import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, Inject, Page, Toolbar } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (
<GridComponent dataSource={data} printMode='CurrentPage' toolbar={['Print']} allowPaging={true}>
<Inject services={[Page, Toolbar]}/>
</GridComponent>);
}
}
Defaults to AllPages
The printModule
is used to handle the printing feature of the Grid.
Query
Defines the external Query
that will be executed along with data processing.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component<{}, {}> {
public data = new DataManager({
adaptor: new ODataAdaptor,
url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
});
public query = new Query().addParams('ej2grid', 'true');
public render() {
return (<GridComponent dataSource={data} query={this.query} />);
}
}
Defaults to null
string
Defines the relationship between parent and child datasource. It acts as the foreign key for parent datasource.
Defaults to ”
The reorderModule
is used to manipulate reordering in the Grid.
boolean
requireTemplateRef
is set to false in the load event, then the template element can’t be accessed in grid queryCellInfo, and rowDataBound events.Defaults to true
Defines the resizing behavior of the Grid.
Defaults to {mode:“Normal”}
RowDD
The rowDragAndDropModule
is used to manipulate row reordering in the Grid.
Configures the row drop settings.
Defaults to {targetID: ”}
number
Defines the height of Grid rows.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (<GridComponent dataSource={data} rowHeight="20" />);
}
}
Defaults to null
Defines the grid row elements rendering direction. The available directions are,
Horizontal
: Renders the grid row elements in the horizontal directionVertical
: Renders the grid row elements in the vertical directionDefaults to Horizontal
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.
Defaults to null
The scrollModule
is used to manipulate scrolling in the Grid.
The searchModule
is used to manipulate searching in the Grid.
Configures the search behavior in the Grid.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, SearchSettingsModel } from '@syncfusion/ej2-react-grids';
import { Page, Toolbar, Search } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public searchOptions: SearchSettingsModel = { fields: ['CustomerName'], key: 'Ha' };
public render() {
return (
<GridComponent dataSource={data} toolbar={['Search']} searchSettings={this.searchOptions}>
<ColumnsDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Search, Toolbar]}/>
</GridComponent>);
}
}
Defaults to { ignoreCase: true, fields: [], operator: ‘contains’, key: ” }
number
The selectedRowIndex
allows you to select a row at initial rendering.
You can also get the currently selected row index.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (<GridComponent dataSource={data} selectedRowIndex={5} />);
}
}
Defaults to -1
The selectionModule
is used to manipulate selection behavior in the Grid.
Configures the selection settings.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public selectionOptions: SelectionSettingsModel = { mode: 'Cell', cellSelectionMode: 'Box', type: 'Multiple' };
public render() {
return (<GridComponent dataSource={data} selectionSettings={this.selectionOptions} />);
}
}
Defaults to {mode: ‘Row’, cellSelectionMode: ‘Flow’, type: ‘Single’}
boolean
If showColumnChooser
is set to true, it allows you to dynamically show or hide columns.
Check the
ColumnChooser
for its configuration.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, Inject, ColumnChooser, Toolbar } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (
<GridComponent dataSource={data} toolbar={['ColumnChooser']} showColumnChooser={true}>
<Inject services={[ColumnChooser, Toolbar]}/>
</GridComponent>);
}
}
Defaults to false
boolean
If showColumnMenu
set to true, then it will enable the column menu options in each columns.
Check the
Column menu
for its configuration.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnMenu } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (
<GridComponent dataSource={data} showColumnMenu={true}>
<Inject services={[ColumnMenu]} />
</GridComponent>);
}
}
Defaults to false
The showHider
is used to manipulate column’s show/hide operation in the Grid.
Defaults to ”
The sortModule
is used to manipulate sorting in the Grid.
Configures the sort settings.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Sort, SortSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public sortingOptions: SortSettingsModel = { columns: [{ field: 'CustomerName', direction: 'Ascending' }] };
public render() {
return (
<GridComponent dataSource={data} allowSorting={true} sortSettings={this.sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Sort]} />
</GridComponent>);
}
}
Defaults to {columns:[]}
Configures the text wrap in the Grid.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (<GridComponent dataSource={data} allowTextWrap={true} textWrapSettings={{ 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:
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.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return (
<GridComponent dataSource={data} toolbar={['Search','Print']}>
<Inject services={[Toolbar]}/>
</GridComponent>);
}
}
Defaults to null
The toolbarModule
is used to manipulate ToolBar items and its action in the Grid.
string
| Function
It used to render toolbar template
Defaults to null
string
| number
Defines the Grid width.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { data } from './data';
export default class App extends React.Component<{}, {}> {
public render() {
return ( <GridComponent dataSource={data} width="700" />);
}
}
Defaults to ‘auto’
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
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 thedataBound
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
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
Apply the changes to the Grid without refreshing the rows.
Parameter | Type | Description |
---|---|---|
changes | BatchChanges |
Defines changes to be updated. |
Returns void
Calculates the page size by parent element height
Parameter | Type | Description |
---|---|---|
containerHeight | number | string |
specifies the container height |
Returns number
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
Deselects the currently selected cells.
Returns void
Clears all the filtered rows of the Grid.
Parameter | Type | Description |
---|---|---|
fields (optional) | string[] |
Defines the Fields |
Returns void
Clears all the grouped columns of the Grid.
Returns void
Deselects the currently selected rows.
Returns void
Deselects the current selected rows and cells.
Returns void
Clears all the sorted columns of the Grid.
Returns void
Cancels edited state.
Returns void
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
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
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
Delete any visible row by TR element.
Parameter | Type | Description |
---|---|---|
tr | HTMLTableRowElement |
Defines the table row element. |
Returns void
Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
Returns void
Destroys the given template reference.
Parameter | Type | Description |
---|---|---|
propertyNames (optional) | string[] |
Defines the collection of template name. |
index (optional) | any |
specifies the index |
Returns void
Collapses all the detail rows of the Grid.
Returns void
Expands all the detail rows of the Grid.
Returns void
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
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
If Grid is in editable state, you can save a record by invoking endEdit.
Returns void
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
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
Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.
Returns Object
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
Gets a Column by column name.
Parameter | Type | Description |
---|---|---|
field | string |
Specifies the column name. |
Returns Column
Gets a column by UID.
Parameter | Type | Description |
---|---|---|
uid | string |
Specifies the column UID. |
Returns Column
Gets the collection of column fields.
Returns string[]
Gets a column header by column name.
Parameter | Type | Description |
---|---|---|
field | string |
Specifies the column name. |
Returns Element
Gets a column header by column index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the column index. |
Returns Element
Gets a column header by UID.
Parameter | Type | Description |
---|---|---|
uid | string |
Specifies the column uid. |
Returns Element
Gets a column index by column name.
Parameter | Type | Description |
---|---|---|
field | string |
Specifies the column name. |
Returns number
Gets a column index by UID.
Parameter | Type | Description |
---|---|---|
uid | string |
Specifies the column UID. |
Returns number
Gets the columns from the Grid.
Parameter | Type | Description |
---|---|---|
isRefresh (optional) | boolean |
Defines the boolean whether to refresh |
Returns Column[]
Gets the content div of the Grid.
Returns Element
Gets the content table of the Grid.
Returns Element
Get current visible data of grid.
Returns Object[]
Gets the data module.
Returns Data
Gets all the Grid’s data rows.
Returns Element[]
Get the current Filter operator and field.
Returns FilterUI
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
Gets the footer div of the Grid.
Returns Element
Gets the footer table element of the Grid.
Returns Element
Gets the foreign columns from Grid.
Returns Column[]
Gets all the Grid’s frozen table data rows.
Returns Element[]
Gets a frozen left column header by column index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the column index. |
Returns Element
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
Gets a frozen right column header by column index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the column index. |
Returns Element
Gets all the Grid’s frozen right table data rows.
Returns Element[]
Gets a frozen right tables row element by index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the row index. |
Returns Element
Gets the Grid’s frozen right content rows from frozen grid.
Returns Element[]
Gets a frozen tables row by index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the row index. |
Returns Element
Gets the header div of the Grid.
Returns Element
Gets the header table element of the Grid.
Returns Element
Gets the hidden columns from the Grid.
Returns Column[]
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
Gets a movable column header by column index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the column index. |
Returns Element
Gets all the Grid’s movable table data rows.
Returns Element[]
Gets a movable tables row by index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the row index. |
Returns Element
Gets the Grid’s movable content rows from frozen grid.
Returns Element[]
Gets the pager of the Grid.
Returns Element
Get the properties to be maintained in the persisted state.
Returns string
Get the names of the primary key columns of the Grid.
Returns string[]
Gets a row by index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the row index. |
Returns Element
Get row index by primary key or row data.
Parameter | Type | Description |
---|---|---|
value | string | Object |
Defines the primary key value. |
Returns number
Get a row information based on cell
Parameter | Type | Description |
---|---|---|
target | Element | EventTarget |
specifies the element |
Returns RowInfo
Gets all the data rows of the Grid.
Returns Element[]
Gets the collection of selected columns uid.
Returns string[]
Gets the collection of selected records.
Returns Object[]
Gets the collection of selected row and cell indexes.
Returns ISelectedCell[]
Gets the collection of selected row indexes.
Returns number[]
Gets the collection of selected rows.
Returns Element[]
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
Gets UID by column name.
Parameter | Type | Description |
---|---|---|
field | string |
Specifies the column name. |
Returns string
Gets the visible columns from the Grid.
Returns Column[]
Navigates to the specified target page.
Parameter | Type | Description |
---|---|---|
pageNo | number |
Defines the page number to navigate. |
Returns void
Collapses all the grouped rows of the Grid.
Returns void
Groups a column by column name.
Parameter | Type | Description |
---|---|---|
columnName | string |
Defines the column name to group. |
Returns void
Expands all the grouped rows of the Grid.
Returns void
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
Hides the scrollbar placeholder of Grid content when grid content is not overflown.
Returns void
By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.
Returns void
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
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
By default, prints all the pages of the Grid and hides the pager.
You can customize print options using the
printMode
.
Returns void
Refreshes the Grid header and content.
Returns void
Refreshes the Grid column changes.
Returns void
Refreshes the Grid header.
Returns void
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
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
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
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
Saves the cell that is currently edited. It does not save the value to the DataSource.
Returns void
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
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
Selects a collection of cells by row and column indexes.
Parameter | Type | Description |
---|---|---|
rowCellIndexes | ISelectedCell[] |
Specifies the row and column indexes. |
Returns void
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
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
Selects a collection of rows by indexes.
Parameter | Type | Description |
---|---|---|
rowIndexes | number[] |
Specifies the row indexes. |
Returns void
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
Sends a Post request to export Grid to CSV file in server side.
Parameter | Type | Description |
---|---|---|
url | string |
Pass Url for server side pdf export action. |
Returns void
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. |
Returns void
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. |
Returns void
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
Sets the content div of the Grid to replace the old Grid content.
Parameter | Type | Description |
---|---|---|
element | Element |
Specifies the Grid content. |
Returns void
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
Sets the header div of the Grid to replace the old header.
Parameter | Type | Description |
---|---|---|
element | Element |
Specifies the Grid header. |
Returns void
Sets the header table of the Grid to replace the old one.
Parameter | Type | Description |
---|---|---|
element | Element |
Specifies the Grid header table. |
Returns void
Sets the pager of the Grid to replace the old pager.
Parameter | Type | Description |
---|---|---|
element | Element |
Specifies the Grid pager. |
Returns void
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
To manually show the vertical row mode filter dialog
Returns void
To manually show the vertical row sort filter dialog
Returns void
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
By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.
Returns void
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
Starts edit the selected row. At least one row must be selected before invoking this method.
editSettings.allowEditing
should be true.
import { render, } from 'react-dom';
import React, { Component } from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Grid, Edit, EditSettingsModel, Inject } from '@syncfusion/ej2-react-grids';
import { data } from './dataSource';
export default class App extends React.Component<{}, {}>{
public grid: Grid | null;
public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
click() {
// Select the row in given index
this.grid.selectRow(1);
// Edit the seleted row
this.grid.startEdit();
}
public render() {
return (
<div>
<button onClick={this.click.bind(this)}>Click</button>
<GridComponent dataSource={data} editSettings={this.editOptions} ref={g => this.grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' isPrimaryKey={true} width='100' textAlign="Right" />
<ColumnDirective field='CustomerID' width='100' />
</ColumnsDirective>
<Inject services={[Edit]} />
</GridComponent>
</div>
)
}
};
Returns void
Ungroups a column by column name.
import { render, } from 'react-dom';
import React, { Component } from 'react';
import { GridComponent, ColumnDirective, ColumnsDirective, Grid, Group, GroupSettingsModel, Inject } from '@syncfusion/ej2-react-grids';
import { data } from './dataSource';
export default class App extends React.Component<{}, {}>{
public grid: Grid | null;
public groupOptions: GroupSettingsModel = { columns: ["CustomerID"] };
click() {
// Ungroup a column by field name.
this.grid.ungroupColumn('CustomerID');
}
public render() {
return (
<div>
<button onClick={this.click.bind(this)}>Click</button>
<GridComponent dataSource={data} allowGrouping={true} groupSettings={this.groupOptions} ref={g => this.grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[Group]} />
</GridComponent>
</div>
)
}
};
Parameter | Type | Description |
---|---|---|
columnName | string |
Defines the column name to ungroup. |
Returns void
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
Defines the text of external message.
Parameter | Type | Description |
---|---|---|
message | string |
Defines the message to update. |
Returns void
To update the specified row by given values without changing into edited state.
import { render, } from 'react-dom';
import React, { Component } from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Grid, Edit, EditSettingsModel, Inject } from '@syncfusion/ej2-react-grids';
import { data } from './dataSource';
export default class App extends React.Component<{}, {}>{
public grid: Grid | null;
public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, mode: 'Batch' };
click() {
// Update a specified row by given options
this.grid.updateRow(1, { OrderID: 10248, CustomerID: 'HANAR', ShipCountry: 'Germany' });
}
public render() {
return (
<div>
<button onClick={this.click.bind(this)}>Click</button>
<GridComponent dataSource={data} editSettings={this.editOptions} ref={g => this.grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' isPrimaryKey={true} width='100' textAlign="Right" />
<ColumnDirective field='CustomerID' width='100' />
<ColumnDirective field='ShipCountry' width='100' />
</ColumnsDirective>
<Inject services={[Edit]} />
</GridComponent>
</div>
)
}
};
Parameter | Type | Description |
---|---|---|
index | number |
Defines the row index. |
data | Object |
Defines the data object to be updated. |
Returns void
EmitType<
PageEventArgs
|GroupEventArgs
|FilterEventArgs
|SearchEventArgs
|SortEventArgs
|AddEventArgs
|SaveEventArgs
|EditEventArgs
|DeleteEventArgs
|ActionEventArgs
|NotifyArgs
>
Triggers when Grid actions such as sorting, filtering, paging, grouping etc., starts.
import { render, } from 'react-dom';
import React, { Component } from 'react';
import { GridComponent, Page, PageEventArgs, Inject } from '@syncfusion/ej2-react-grids';
import { data } from './dataSource';
export default class App extends React.Component<{}, {}>{
// For Paging action
actionBegin(args: PageEventArgs) {
alert(args.requestType);
}
public render() {
return (<GridComponent dataSource={data} allowPaging={true} actionBegin={this.actionBegin}>
<Inject services={[Page]} />
</GridComponent>
)
}
};
EmitType<
PageEventArgs
|GroupEventArgs
|FilterEventArgs
|SearchEventArgs
|SortEventArgs
|AddEventArgs
|SaveEventArgs
|EditEventArgs
|DeleteEventArgs
|ActionEventArgs
|NotifyArgs
>
Triggers when Grid actions such as sorting, filtering, paging, grouping etc. are completed.
Triggers when any Grid action failed to achieve the desired results.
EmitType<BatchAddArgs>
Triggers when records are added in batch mode.
EmitType<BatchCancelArgs>
Triggers when cancel the batch edit changes batch mode.
EmitType<BatchDeleteArgs>
Triggers when records are deleted in batch mode.
EmitType<BeforeAutoFillEventArgs>
Triggers before Grid autoFill action.
Triggers before records are added in batch mode.
EmitType<BeforeBatchDeleteArgs>
Triggers before records are deleted in batch mode.
Triggers before records are saved in batch mode.
Triggers before Grid copy action.
Triggers before data is bound to Grid.
EmitType<Object>
Triggers before Grid data is exported to Excel file.
EmitType<AdaptiveDialogEventArgs>
Triggers before adaptive filter and sort dialogs open.
EmitType<ColumnChooserEventArgs>
Triggers before the columnChooser open.
EmitType<BeforePasteEventArgs>
Triggers before Grid paste action.
EmitType<Object>
Triggers before Grid data is exported to PDF document.
Triggers before the print action starts.
Triggers before the record is to be edit.
EmitType<CellDeselectEventArgs>
Triggers when a particular selected cell is deselected.
EmitType<CellDeselectEventArgs>
Triggers before the selected cell is deselecting.
Triggers when the cell is being edited.
Triggers when the cell is being saved.
Triggers after the cell is saved.
Triggers after a cell is selected.
EmitType<CellSelectingEventArgs>
Triggers before any cell selection occurs.
EmitType<CheckBoxChangeEventArgs>
Triggers when the check box state change in checkbox column.
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.
EmitType<ColumnDeselectEventArgs>
Triggers when a selected column is deselected.
EmitType<ColumnDeselectEventArgs>
Triggers before deselecting the selected column.
Triggers when column header element is dragged (moved) continuously.
Triggers when column header element drag (move) starts.
Triggers when a column header element is dropped on the target column.
EmitType<MenuEventArgs>
Triggers when click on column menu.
EmitType<ColumnMenuOpenEventArgs>
Triggers before column menu opens.
EmitType<ColumnSelectEventArgs>
Triggers after a column is selected.
EmitType<ColumnSelectingEventArgs>
Triggers before column selection occurs.
EmitType<CommandClickEventArgs>
Triggers when command button is clicked.
EmitType<ContextMenuClickEventArgs>
Triggers when click on context menu.
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before context menu opens.
EmitType<Object>
Triggers when the component is created.
EmitType<Object>
Triggers when data source is populated in the Grid.
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.
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.
EmitType<Object>
Triggers when the component is destroyed.
EmitType<DetailDataBoundEventArgs>
Triggers after detail row expands.
This event triggers at initial expand.
EmitType<AggregateQueryCellInfoEventArgs>
Triggers before exporting aggregate cell to Excel document. You can also customize the PDF cells.
EmitType<ExcelExportCompleteArgs>
Triggers after Grid data is exported to Excel file.
EmitType<ExcelHeaderQueryCellInfoEventArgs>
Triggers before exporting each header cell to Excel file. You can also customize the Excel cells.
EmitType<ExcelQueryCellInfoEventArgs>
Triggers before exporting each cell to Excel file. You can also customize the Excel cells.
EmitType<ExportDetailDataBoundEventArgs>
Triggers before exporting each detail Grid to PDF document.
EmitType<ExportDetailTemplateEventArgs>
Triggers before exporting each detail template.
EmitType<ExportGroupCaptionEventArgs>
Triggers before exporting each caption row to PDF/Excel/CSV document. You can also customize the export caption row values.
EmitType<HeaderCellInfoEventArgs>
Triggered for stacked header.
EmitType<KeyboardEventArgs>
Triggers when any keyboard keys are pressed inside the grid.
Triggers when collapse the caption row in lazy load grouping.
Triggers when expand the caption row in lazy load grouping.
EmitType<Object>
This event allows customization of Grid properties before rendering.
EmitType<AggregateQueryCellInfoEventArgs>
Triggers before exporting aggregate cell to PDF document. You can also customize the PDF cells.
EmitType<PdfExportCompleteArgs>
Triggers after Grid data is exported to PDF document.
EmitType<PdfHeaderQueryCellInfoEventArgs>
Triggers before exporting each header cell to PDF document. You can also customize the PDF cells.
EmitType<PdfQueryCellInfoEventArgs>
Triggers before exporting each cell to PDF document. You can also customize the PDF cells.
Triggers after print action is completed.
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.
EmitType<RecordClickEventArgs>
Triggers when record is clicked.
EmitType<RecordDoubleClickEventArgs>
Triggers when record is double clicked.
Triggers when column resize starts.
Triggers when column resize ends.
Triggers on column resizing.
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.
EmitType<RowDeselectEventArgs>
Triggers when a selected row is deselected.
EmitType<RowDeselectingEventArgs>
Triggers before deselecting the selected row.
Triggers when row elements are dragged (moved) continuously.
Triggers when row element’s drag(move) starts.
Triggers when row element’s before drag(move).
Triggers when row elements are dropped on the target row.
Triggers after a row is selected.
EmitType<RowSelectingEventArgs>
Triggers before row selection occurs.
EmitType<ClickEventArgs>
Triggers when toolbar item is clicked.