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.

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

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.

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

To demonstrate:

1. Open your simplest interactivity/selection demo, which is not grouped, in StackBlitz. See: https://www.telerik.com/kendo-react-ui/components/grid/interactivity/selection/

2. Add the Grid's group prop. To demonstrate the bug nothing else needs changed

<Grid group={[]} ...

3. Run demo, scroll down and pick a row.

4. Observe the grid scrolls to the top and you cannot see your selected row unless you scroll back.

We use data grids with virtual scrolling for inline editing a large number of records. However, when we want to add a new row to the grid it automatically resets the scroll position and doesn't even fire onPageChange event so the records you see do not correspond to the scroll position.

Check the following example (scroll to bottom, click anywhere on the table - this will add a new row - and observe the described problem):

https://stackblitz.com/edit/react-52zzvz?file=app%2Fapp.tsx%3AL78

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"

I think this would be a great feature to have out-of-the-box, and hopefully it's something easy to add from your end. UX-wise, it's really difficult to wrap your head around a non-alphabetized list, especially when the list is used for the special purpose of filtering -- you now have to filter down the list before you can filter the grid itself, which adds more overhead for the user.

I understand that Excel is not the end-all and be-all, but Excel also sorts it by default:

Full discussion can be found here - https://www.telerik.com/forums/how-to-make-gridcolumnmenucheckboxfilter-be-alphabetical-order

The GridHelper is defined in a separate file, and this is the way we can use it - https://www.telerik.com/kendo-react-ui/components/grid/getting-started/gridhelper/

However, I prefer if it is exported from the Grid package, and is maintained from there.

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

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.

In our project we control column widths manually as we have complex logic on how wide each column should be, based on a number of external criteria. However, those widths are not fixed and might change during the lifetime of the data grid.

This was not causing any problems up to version 5.11.0 but after we upgraded the Kendo packages this controlled behavior of the column widths broke:

kendo-react-grid v5.11.0 example (working):
https://codesandbox.io/s/crazy-bird-ss7mgl?file=/app/main.tsx

kendo-react-grid latest example (broken):
https://codesandbox.io/s/dazzling-antonelli-wxsflj?file=/app/main.tsx

If we inspect the elements of the data grid, we can see that there is an inline style attribute on the header and body tables, setting the total width of those <table> elements to the sum of its columns. However, that value is not updating after the initial mount as it was prior to v5.12.0 which effectively makes the column widths uncontrollable.