GridProps

Represents the props of the KendoReact Grid component.

NameTypeDefaultDescription

children?

React.ReactNode

Determines the children nodes.

className?

string

Sets a class of the Grid DOM element.

columnMenu?

"null" | ComponentType<GridColumnMenuProps>

Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level.

columnVirtualization?

boolean

Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.

data?

"null" | any[] | DataResult

Sets the data of the Grid (see example). If you use paging, the data option has to contain only the items for the current page.

dataItemKey?

string

Sets the Grid row key prop to the value of this field in the dataItem. If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling.

detail?

"null" | ComponentType<GridDetailRowProps>

Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items (see example). An item will be rendered as expanded if the value of its expandField is true.

editField?

string

Specifies the name of the field which will provide a Boolean representation of the edit state of the current item (more information and examples).

expandField?

string

Specifies the name of the field which will provide a Boolean representation of the expanded state of the item (see example).

filter?

CompositeFilterDescriptor

The descriptor by which the data is filtered (more information and examples). This affects the values and buttons in the FilterRow of the Grid.

filterable?

boolean

Enables the filtering of the columns with their field option set (more information and examples).

filterOperators?

GridFilterOperators

The filter operators for the Grid filters.

const customFilterOperators = {
    'text': [
        { text: 'grid.filterContainsOperator', operator: 'contains' }
    ],
    'numeric': [
        { text: 'grid.filterGtOperator', operator: 'gt' }
    ],
    'date': [
        { text: 'grid.filterAfterOperator', operator: 'gt' }
    ]
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { 'foo': 'A1', 'bar': 'B1' },
                { 'foo': 'A2', 'bar': 'B2' },
                { 'foo': 'A3', 'bar': 'B2' }
            ]
        };
    }
    render() {
        return (
            <div>
                <Grid
                    data={this.state.data}
                    reorderable={true}
                    filterable
                    filterOperators={customFilterOperators}
                >
                    <GridColumn field="foo" />
                    <GridColumn field="bar" />
                </Grid>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.querySelector('my-app'));

fixedScroll?

boolean

Determines if the scroll position will be updated after data change. If set to true the scroll will remain on the same position.

group?

GroupDescriptor[]

The descriptors by which the data will be grouped (more information and examples).

groupable?

boolean | GridGroupableSettings

Determines if grouping by dragging and dropping the column headers is allowed (more information and examples).

id?

string

Sets the id property of the top div element of the component.

navigatable?

boolean

If set to true, the user can use dedicated shortcuts to interact with the Grid. By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.

pageable?

boolean | GridPagerSettings

Configures the pager of the Grid (see example).

The available options are:

  • buttonCount: NumberSets the maximum numeric buttons count before the buttons are collapsed.
  • info: BooleanToggles the information about the current page and the total number of records.
  • type: PagerTypeAccepts the numeric (buttons with numbers) and input (input for typing the page number) values.
  • pageSizes: Boolean or Array<number>Shows a menu for selecting the page size.
  • previousNext: BooleanToggles the Previous and Next buttons.

pager?

"null" | ComponentType<PagerProps>

The pager component that the Grid will render instead of the built-in pager.

pageSize?

number

Defines the page size that is used by the Grid pager (see example). Required by the paging functionality.

reorderable?

boolean

If set to true, the user can reorder columns by dragging their header cells (see example).

resizable?

boolean

If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells (see example).

rowHeight?

number

Defines the row height and forces an equal height to all rows (see example).

scrollable?

ScrollMode

Defines the scroll mode that is used by the Grid (see example).

The available options are:

  • noneRenders no scrollbar.
  • scrollableThis is the default scroll mode. It requires the setting of the height option.
  • virtualDisplays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.

selectable?

GridSelectableSettings

The Grid selectable settings.

selectedField?

string

Specifies the name of the field which will provide a:

  • Boolean representation of the selected state of the item (see example) for row selection
  • String array of the selected columns of the item for cell selection

skip?

number

Defines the number of records that will be skipped by the pager (see example). Required by the paging functionality.

sort?

SortDescriptor[]

The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.

sortable?

SortSettings

Enables the sorting for the columns with their field option set (see example).

style?

React.CSSProperties

Represents the style HTML attribute.

take?

number

Alias of pageSize property. If take is set, pageSize will be ignored.

total?

number

Defines the total number of data items in all pages (see example). Required by the paging functionality.

Methods

cellRender

Fires when a cell is about to be rendered. Used to override the default appearance of the cell (see example).

Parameters

defaultRendering

"null" | ReactElement<HTMLTableCellElement>

props

GridCellProps

Returns

"null" | ReactElement<HTMLTableCellElement> | ReactElement<HTMLTableCellElement>[]

filterCellRender

Fires when a filter cell is about to be rendered. Overrides the default appearance of the filter cell.

Parameters

defaultRendering

"null" | ReactElement<any>

props

GridFilterCellProps

Returns

"null" | ReactElement<any>

headerCellRender

Fires when a header cell is about to be rendered. Overrides the default appearance of the header cell.

Parameters

defaultRendering

ReactNode

props

GridHeaderCellProps

Returns

ReactNode

onColumnReorder

Fires when the columns are reordered.

Parameters

event

GridColumnReorderEvent

onColumnResize

Fires when a column is resized.

Parameters

event

GridColumnResizeEvent

onDataStateChange

Fires when the data state of the Grid is changed (more information and example).

Parameters

event

GridDataStateChangeEvent

onExpandChange

Fires when the user tries to expand or collapse a row.

Parameters

event

GridExpandChangeEvent

onFilterChange

Fires when the Grid filter is modified through the UI (more information and examples). You have to handle the event yourself and filter the data.

Parameters

event

GridFilterChangeEvent

onGroupChange

Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data (more information and examples).

Parameters

event

GridGroupChangeEvent

onHeaderSelectionChange

Fires when the user clicks the checkbox of a column header whose field matches selectedField (more information and example).

Parameters

event

GridHeaderSelectionChangeEvent

onItemChange

Fires when the user changes the values of the item. The event is not debounced and fires on every onChange event of the input in the current EditCell (more information and examples).

Parameters

event

GridItemChangeEvent

onKeyDown

Fires when the user press keyboard key.

Parameters

event

GridKeyDownEvent

onNavigationAction

Fires when Grid keyboard navigation position is changed.

Parameters

event

GridNavigationActionEvent

onPageChange

Fires when the page of the Grid is changed (see example). You have to handle the event yourself and page the data.

Parameters

event

GridPageChangeEvent

onRowClick

Fires when the user clicks a row.

Parameters

event

GridRowClickEvent

onRowDoubleClick

Fires when the user double clicks a row.

Parameters

event

GridRowDoubleClickEvent

onScroll

Fires when Grid is scrolled.

Parameters

event

GridEvent

onSelectionChange

Fires when the user tries to select or deselect a row or cell.

Parameters

event

GridSelectionChangeEvent

onSortChange

Fires when the sorting of the Grid is changed (see example). You have to handle the event yourself and sort the data.

Parameters

event

GridSortChangeEvent

rowRender

Fires when a row is about to be rendered. Overrides the default appearance of the row.

Parameters

row

ReactElement<HTMLTableRowElement>

props

GridRowProps

Returns

ReactNode