As stated in the subject. To reproduce:

• Create a blank react project as per the KendoReact Data Grid Getting Started documentation e.g.

npx create-react-app my-app --template typescript

• Change the react and react-dom dependencies in the generated package.json file from ^19.0.0 to ^18.0.0, add corresponding "@types/react": "^18.0.0" and "@types/react-dom": "^18.0.0" entries to devDependencies, and add a standard tsconfig.json file e.g.

{
    "compilerOptions": {
      "target": "es6",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": [
      "src"
    ]
  }

• Install required @progress packages as per the KendoReact Data Grid Getting Started documentation e.g.

npm i @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-data-tools @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-buttons @progress/kendo-react-treeview @progress/kendo-react-popup @progress/kendo-svg-icons @progress/kendo-theme-default

• Delete content generated by create-react-app which is not required e.g. App.test.tsx, logo.svg, reportWebVitals.ts, setupTests.ts and corresponding references
• Confirm you can run npm start with no webpack errors or warnings (see screenshot)
• Add a <Grid> with <GridNoRecords> to App.tsx e.g.

    <div className="App">
      <header className="App-header">
        <Grid>
          <GridNoRecords>This generates TS2786</GridNoRecords>
        </Grid>
      </header>
    </div>

Confirm that npm start results in error TS2786 (see screenshot).

Please see attached for the sample project (with the node_modules folder removed). I believe this error was introduced in v9.0.0 as part of the migration from classes to functional components.

The new Built-in State Management does not work with remote data. 

For example:

PageSize = 40.
Remotely fetch 40 items.
Click on page 2.
Remotely fetch 40 items.
The grid shows no items, since items 41-80 does not exist in the data provided.

Verified with support who suggested adding a feature request.

Add a Column Configurator that can be used to set the displayed columns and create multi-column headers

Hi team,

Is it possible to have the Enter key press automatically apply the filter when the filter menu is open and active similar to submitting a form?

For example in the Column Menu if I enter some text in the filter the Filter button becomes active, if I press the Enter key nothing happens, for the filter it would be nice if it can submit the filter like for normal forms where the enter key would submit the form.

Another example would be the Checkbox Menu Filter, if I check a checkbox in the filter the current active and focused element is the checkbox and if the Enter key is pressed then it de-selects the checkbox. This behaviour is not very useful, a better implementation would be on Enter press the filter is applied.

Thanks.

Hi,

I would like to have 'isnullorempty' filter for text field on Data Grid. There are 'isnull' and 'isempty' filters but it is not straightforward for non-engineer guys. If we have 'isnullorempty' filter, I think it is very useful. 

Other option, is there any way to customize filter operator by myself so that we can have any filter operation?  

Thank you,

Tatsuro Matsumoto.

We are using Kendoreact Data Grid with server side paging, sorting and filtering. 

Due to server side nature of those operations DataGrid re-renders bringing the scrollbar position to 0,0 position. 

Any div scrollbar position can be saved :

    const scrollEvent = (event) => {
        sessionStorage.setItem("facets_scrollY",event.target.scrollTop);
    }

and restored using reference an scrollTop/scrollLeft properties.

  ref.current.scrollTop = <value to set>
  ref.current.scrollLeft = <value to set>

Please provide this standard feature to be available on Kendo Data grid as well. 

Thank you

Hello,

Seems the link to the GridColumnMenu accessibility page from the DataGrid accessibility page is broken. 

Our tools are also warning us about empty links, caused by the GridColumnMenu button. How would we solve these?

Thank you,

Kristiyan Dimitrov

The issue can be seen on your demo at https://www.telerik.com/kendo-react-ui/components/grid/

Steps: 

1) Load the demo from https://www.telerik.com/kendo-react-ui/components/grid/

2) Click on (x) in customerID grouping 

3) Look at the console and see the line with exception: 

The problem is that `e.originalEvent.target` is an svg object and it's className property is an object, not a string. The object is `SVGAnimatedString {baseVal: '', animVal: ''}` and it doesn't have the method indexOf.

Please fix asap.

I have one column that contains mix of boolean and string values. When I attempt to apply a filter function to that column, it generates an error for the boolean value true because indexOf cannot be performed on a boolean. When I have other formats along with strings and I use filter="text", I would like the value to be converted to string in the filter function rather than modifying the data on my end before calling the filter function, because that would actually be incorrect data.

Example

https://www.telerik.com/kendo-react-ui/components/grid/filtering/

If I change

<Column field="Discontinued" width="190px" filter="boolean" /> 

to

<Column field="Discontinued" width="190px" />

and then search for anything in that filter it throws error.

Maybe if you make the `filter="text"` always convert the all the values to string values that would help resolve the error

As a follow on to this bug:

Steps to reproduce:

• The "General Info" column has width setted to 500px

See Image 1.png

• resize it in the grid to make wider

See Image 2.png

• lock the "General Info" column
• scroll horizontaly

I am requesting a new feature so that "that the locked prop is passed by default to the child columns"

Hi, there is a problem with filter filter popups in Data Grid.

Steps to reproduce:

1. Go to https://www.telerik.com/kendo-react-ui/components/grid/filtering

2. Open the date filter popup  in the "FirstOrderOn" Column and click on any date

3. Open and close the filter combo in "Disconinued" column couple of times. 

Actual Behavior
On version 9.1.0 besides Opening the "Disconinued" filter combo, the date popup also openes. On version 8.5.0 seems to work fine

Expected Behavior
Only the popup from "Discontinued" column should be Opened / Closed

Hello,

there are numerous problems with navigating / scrolling on the DataGrid using keyboard keys.

Here is the test page:

https://stackblitz.com/edit/react-brdhufzd

1. Grid with navigatable=true:

- arrow keys - when you select a cell to be able to navigate and then  keep pressing down and then up, it's not posible to come back to the first record. You need to use the mouse.

- Page up/down keys work the other way round, also sometimes is not possible to come back to the first record, the scrollbar does not show the current position.

- It starts to work correctly after using the arrow keys and page up/down keys alternatively couple of times

2. Grid with navigatable=false:
- arrow,Page up/down keys and scrollbar work correctly

3. Grid with navigatable=true and nested inside Window:
- works the same way as not nested - the same problems occur

4. Grid with navigatable=false and nested inside Window:
- arrow keys move the window instead of navigating the grid
- Page up/down don't work at all