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.

As stated in the subject, the GridNoRecords component has an undocumented maximum width of 20em after which the GridNoRecords message is cut off. Please see the following StackBlitz for an example: https://stackblitz.com/edit/react-2z8hh63r?file=app%2Fapp.tsx

Kind regards,

David

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

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.