In KendoReact Grid, when using grouping with multiple hierarchy levels, the Grid automatically adds extra horizontal space inside the <td> elements (indentation for group levels).

Technically this makes sense, because each group level needs visual offset.
However, the problem is that there is no built-in way to control or configure this spacing.

As a result:

• extra empty space appears inside <td> cells

• the Grid content becomes wider than expected

• this breaks layout and design, especially in custom UI / strict design systems

Why doesn’t KendoReact Grid expose any API or configuration to control this indentation / spacing for grouped rows?

Is there:

• an official way to customize or limit this space?

• a recommended approach to override or manage this behavior without breaking Grid internals?

Any guidance or best practices would be appreciated.

Example:

In KendoReact Grid, when using grouping with multiple hierarchy levels, the Grid automatically adds extra horizontal space inside the <td> elements (indentation for group levels).

Technically this makes sense, because each group level needs visual offset.
However, the problem is that there is no built-in way to control or configure this spacing.

As a result:

• extra empty space appears inside <td> cells

• the Grid content becomes wider than expected

• this breaks layout and design, especially in custom UI / strict design systems

Why doesn’t KendoReact Grid expose any API or configuration to control this indentation / spacing for grouped rows?

Is there:

• an official way to customize or limit this space?

• a recommended approach to override or manage this behavior without breaking Grid internals?

Any guidance or best practices would be appreciated.

Example:

Hi team, 

As the title says, I have a use case where I want to render a Grid without the Header Row. My use case is i want to easily display a small grid (2 columns) and the header row is unnecessary and takes up space, the data speaks for itsself.

I tried to use the rows.data attr to conditionally ignore the header row, but it turns out that rows.data only executes for the data rows (obviously) and the only other optiosn are groupHEader and groupFooter.

Can you help at all?

Thanks,
Grant

Hi team,

I'm working with KendoReact Grid and need to strongly type the `dataItem` property in custom cell components. Currently, `GridCustomCellProps` has `dataItem: any`, which loses type safety.

I've been creating wrapper types like:

// Base generic type for any Kendo component with dataItem
type WithTypedDataItem<K, D> = Omit<K, 'dataItem'> & { dataItem: D };

// Specific type aliases for common use cases
type TGridCustomCellProps<T> = WithTypedDataItem<GridCustomCellProps, T>;
// ... others

Questions:
1. Is there a native/commonly accepted way to type `dataItem` that I'm missing?
2. Are there plans to add generic type parameters to `GridCustomCellProps` (e.g., `GridCustomCellProps<TDataItem>`) in future releases?

This would improve type safety across Grid, ComboBox, DropDownList, and other components that use dataItem.

Thanks,
Grant

Hi,

When a grid is grouped, and its scroll mode is 'virtual', drag the scroll bar down to the middle, then change the data to a smaller set of data. The grid is not rendering the new data, the scroll bar size is changed, indicating the grid is aware of the new data size, but it just doesn't render the rows.

If the Grid is not grouped, this won't be an issue.

Please see this example: https://codesandbox.io/p/sandbox/headless-leftpad-m75s56?file=%2Fapp%2Fapp.tsx

Steps to reproduce the issue:

- Use mouse to drag the grid scrollbar down to the middle.

- Click Short Data button.

- The scroll bar size has changed, but the grid is not showing data, 

- Drag the scrollbar, the grid shows the data again.

Thanks,

Jie

Hi Support,

The GanttHandle mentioned here https://www.telerik.com/kendo-react-ui/components/gantt/api/gantthandle does not appear to be exported.

This means a ref can not be used in a un typesafe manner.

Can this be exported in a future release?

Thanks

David

Hi kendo-react devs.

I'm coming from Kendo UI for jQuery and am beginning Kendo UI for React.

I have localisation implemented in a .net9 + react project; however, I can't get the messages/default text in the kendoui react components (grid pager) to update when the language changes.

This is an overview of the project's localization implementation:

Do you have a project/demo app with both react-i18next and localization of kendoui messages/texts (like "items per page", etc.)?

I really appreciate any help you can provide.

Morten

I have implemented Selection Aggregates to count content inside cells. For this I use the onSelectionChange prop, passing a selectionChange function that calls getStatusData from '@progress/kendo-react-grid' and stores the result in the statusData state.

Recently I added a requirement to highlight the row when I select a cell in that row, so I decided to use a custom row renderer via the rows prop and pass a row component.

But here’s the problem: as soon as I started using the custom row renderer, the double-click handling that used to work via the Grid's onRowDoubleClick stopped working. I tried handling the double-click directly on the <tr> by attaching an onDoubleClick handler, but that didn't help either.

As far as I can tell, the issue is that when I click a cell, onSelectionChange fires and I update the state with the result of getStatusData (which is necessary for Selection Aggregates). That state update causes my rows to re-render, and the double-click never fires. If I don't use a custom row renderer (which I need for row highlighting), I can attach onSelectionChange on the Grid, update the state on click for Selection Aggregates, and onRowDoubleClick works.

How can I combine Selection Aggregates, row highlighting when selecting a cell (currently implemented with the custom row renderer), and double-click handling?

Link for sandbox: https://codesandbox.io/p/sandbox/keen-andras-kyzf5c

Code:

import * as React from "react";
import {
  Grid,
  GridColumn as Column,
  GridSelectionChangeEvent,
  StatusBar,
  getStatusData,
  StatusItem,
  GridCustomRowProps,
} from "@progress/kendo-react-grid";
import sampleProducts from "./gd-sample-products";

const DATA_ITEM_KEY = "ProductID";

const App = () => {
  const [statusData, setStatusData] = React.useState<StatusItem[]>([
    { type: "count", formattedValue: "0", value: 0 },
  ]);

  const selectionChange = (event: GridSelectionChangeEvent) => {
    console.log("selectionChange single-click");
    setStatusData(
      getStatusData({
        dataItems: sampleProducts,
        target: event.target,
        select: event.select,
        dataItemKey: DATA_ITEM_KEY,
      })
    );
  };

  const CustomRow = (props: GridCustomRowProps) => {
    // console.log("CustomRow props: ", props);
    const available = !props.dataItem.Discontinued;
    const noBgr = { backgroundColor: "" };
    const customBgr = { backgroundColor: "lavender", fontWeight: "bold" };

    return (
      <tr
        {...props.trProps}
        style={available ? noBgr : customBgr}
        onDoubleClick={(e) => console.log("CustomRow onDoubleClick e: ", e)}
        onClick={(e) => {
          console.log("CustomRow single click");
        }}
      >
        {props.children}
      </tr>
    );
  };

  return (
    <>
      <div style={{ padding: "5px", color: "#999" }}>
        <div>Ctrl+Click/Enter - add to selection</div>
        <div>Shift+Click/Enter - select range </div>
      </div>
      <Grid
        rows={{ data: CustomRow }}
        onRowDoubleClick={(e) => console.log("onRowDoubleClick")}
        data={sampleProducts}
        autoProcessData={true}
        dataItemKey={DATA_ITEM_KEY}
        reorderable={true}
        navigatable={true}
        defaultSelect={{
          4: [0],
          5: [0],
          6: [0],
          7: [0],
        }}
        selectable={{ enabled: true, drag: true, cell: true, mode: "multiple" }}
        onSelectionChange={selectionChange}
      >
        <Column title="Products">
          <Column field="ProductID" title="Product ID" width="100px" />
          <Column field="ProductName" title="Product Name" width="300px" />
          <Column field="UnitsInStock" title="Units In Stock" />
          <Column field="UnitsOnOrder" title="Units On Order" />
          <Column field="ReorderLevel" title="Reorder Level" />
          <Column field="Discontinued" title="Discontinued" />
          <Column field="FirstOrderedOn" title="Date" format="{0:d}" />
        </Column>
        <StatusBar data={statusData} />
      </Grid>
    </>
  );
};
export default App;