I'm migrating KendoUI for jQuery to React. In jQuery version of Kendo Grid was possible to set "values" property to columns with "id" values.

In React version of the kendo grid, the "values" property for the GridColumn component is not available. How can I make the same like in jQuery version?

Thanks a lot for an each help.

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

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;

Hi,

If GridColumnProps has { hidden: true} in it, then GridColumnState won't be able to override the `hidden` property anymore.

Please see this example:

https://codesandbox.io/p/sandbox/stoic-wildflower-wn4lzn?file=%2Fapp%2Fapp.tsx%3A11%2C10-11%2C25

Line 15, customerID column's hidden is set to true. Clicking the "Hide" button won't show/hide that column. But if change customerID's `hidden` value to `false`, or just remove that hidden property at line 15. The "Hide" button will work.

Thanks,

Jie

Hi,

I'm trying to use rowSpannable with Grid, and I get the following error:

Property 'rowSpannable' does not exist on type 'IntrinsicAttributes & GridProps & RefAttributes<GridHandle | null>

Hi All,

I want to achieve a feature using DataGrid. Lets say we are binding Orders in the grid with Active and Order ID column

1. If Order is "Active" then I would like to show Checkbox to select that row.  The row should be highlighted upon selection just like the default row selection behavior in Kendo React Grid

2. If Order is "inActive" then I would like to hide the checkbox.  I do not want to make it visible disable checkbox.

Please suggest if anyone has done this kind of implementation earlier.  Please suggest any OOTB configuration or customization if we have any for Checkbox Column.

Hi

How to hide grid's "no record" completely? I just want to leave the grid blank, without the "No Records Available" block.

Thanks,

Jie