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.

Getting Started

To use the GridHelper:

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

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

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.

  Copy Code    <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.

  Copy Code    initialDataState = {
          sort: [{ field: "code", dir: "asc" }],
          group: [{ field: 'Category.CategoryName', dir: 'asc' }],
          take: 10,
          skip: 0
      };

Some properties can be set to both - the GridHelper or 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.

Copy Code```jsx-no-run
    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.

  Copy Code    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).

Suggested Links

• Data Query Overview
• API Reference of the Grid
• API Index of the Grid
• React Data Grid High-Level Overview