New to KendoReact? Learn about KendoReact Free.

GridHelper

The GridHelper is a component that wraps the KendoReact Grid to enhance its functionality by providing build-in feature for data operations, commonly requested functionality and user-friendly interface that gives the end-users different ways for customizing the KendoReact Grid, hide columns, export to PDF and Excel, etc.

Some of the features showcased in the GridHelper are part of the Premium offering of the Grid.

Getting Started

To use the GridHelper:

Copy the GridHelper file content from the example below and import it where the KendoReact Grid will be used
Wrap the KendoReact Grid within the GridHelper

The following example demonstrates all the features that are currently available for the GridHelper:

Change Theme

Theme

Loading ...

Features

The GridHelper provides the following enhancement over the KendoReact Grid:

Built-in data operations for paging, sorting, filtering, grouping.
Configuration button for enabling Grid's feature (paging, sorting, grouping, selection, filtering).
Configuration button for show/hide columns.
Global filter in the toolbar
Highlights for within the cells for the matching filter expression from the toolbar filter.
Built-in option for selection (requires dataItemKey to be set).
PDFExport
ExcelExport
Button for expand/collapse all groups
Event for getting an array with the selected dataItems

Properties

Most of the GridHelper features render elements in the Grid's toolbar and they are enabled through the GridHelper's toolbarSettings. Here is a list with all properties that can be set within the toolbarSettings:

externalFilter (boolean)—Renders input element in the Grid's toolbar for global search within the visible columns. The global filter will filter the underlying values within the data items by calling their toString method.
filterHighlights (boolean)—If a cell contains a text that matches the global filter value, that text will be wrapped in SPAN element to visualize the match.
expandCollapseAllButton (boolean)—Renders a button in the toolbar for expanding and collapsing all groups.
pdfExportButton (boolean)—Renders a button in the toolbar for PDF Export
excelExportButton (boolean)—Renders a button in the toolbar for Excel Export.
showFeaturesConfigurator (boolean)—Renders a button that opens a menu for enabling/disabling Grid features (paging, sorting, filtering, grouping, selection).

showColumnsConfigurator (boolean)—Renders a button that opens a menu for showing/hiding columns.

jsx

<GridHelper
    toolbarSettings={{
        filterHighlights: true,
        expandCollapseAllButton: true,
        pdfExportButton: true,
        excelExportButton: true,
        externalFilter: true,
        showFeaturesConfigurator: true,
        showColumnsConfigurator: true,
    }}

The data related settings for the GridHelper are set directly in the component:

initialDataState (State)—Sets the initial DataState of the Grid. Can be used for passing initial filter, sorting and group expressions and also for setting the paging properties take and skip.
jsx
```
initialDataState = {
    sort: [{ field: "code", dir: "asc" }],
    group: [{ field: 'Category.CategoryName', dir: 'asc' }],
    take: 10,
    skip: 0
};
```

Some properties can be set both to the GridHelper and the Grid:

pageable
sortable
filterable
groupable
dataItemKey
selectable
data

When the filterHighlights is enabled and if there is a custom cell for a column, ensure that you are returning the custom cell through the GridCellProps.render method. The following example demonstrates the syntax for setting a custom cells through the column's cells property.

jsx

const ProductNameCell = (props) => {
    const content = (
        <td {...props.tdProps}>
            <div>
                <span>{props.dataItem[props.field]}</span>
            </div>
        </td>
    );

    return props.render ? props.render.call(undefined, content, props) : content;
};

Events

onSelectedItemsChange—Event that fires every time the selection in the Grid changes and provides an array with the selected dataItems.
jsx
```
const onSelectedItemsChange = (ev) => {
    console.log(ev.selectedItems);
};
```

Additional information

The GridHelper toolbar is rendering its components within the Grid's toolbar. If custom content is add manually in the Grid's toolbar (through GridToolbar), that content will be included in the GridHelper's toolbar after the external filter input and before the buttons on the right side. If the toolbarSettings property of the GridToolbar is not set it will remove the toolbar or will render the one from the Grid (if present).

The externalFilter filters the stringified values of the underlying dataItem fields of the visible columns. However, the filterHighlights will highlight the matching strings within the cells and if the dataItem value does not match the rendered value in the cell, there will be mismatch between the filter and the highlight. In such cases the filterHighlights could be disabled.

For the showColumnsConfiguration it is mandatory to have unique titles for the columns (or unique fields if no titles are provided).