TS2345 Error when trying to add simple filter to Kendo Grid in React Component

[Barry]

I was having issues adding a filter to my kendo grid, So to troubleshoot I went to

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

I copied both the main.jsx, and sample-products.jsx code verbatim from the first example "filter rows" into an app on my local host but I am still getting the same error. I can not complile main.jsx in vscode that is copied directly from the documentation. I know the code "works" because you can click "open in stackblitz" in the link and it works perfectly. Here is main.jsx (copied from the documentation) and the error below.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { filterBy } from '@progress/kendo-data-query';
import { sampleProducts } from '../data/sample-products.jsx';

class PositionsPanel extends React.Component {
    state = {
        filter: {
            logic: "and",
            filters: [
                { field: "ProductName", operator: "contains", value: "Chef" }
            ]
        }
    };
    render() {
        return (
            <Grid
                style={{ height: '420px' }}
                data={filterBy(sampleProducts, this.state.filter)}
                filterable
                filter={this.state.filter}
                onFilterChange={(e) => {
                    this.setState({
                        filter: e.filter
                    });
                }}
            >
                <Column field="ProductID" title="ID" filterable={false} width="60px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="FirstOrderedOn" width="240px" filter="date" format="{0:d}" />
                <Column field="UnitPrice" width="180px" filter="numeric" format="{0:c}" />
                <Column field="Discontinued" width="190px" filter="boolean" />
            </Grid>
        );
    }
}

export default PositionsPanel

 

Do you know what could cause the identical code to compile/work in Stackblitz, but not in vscode? Maybe I have an outdated package I am not sure? thank you!

 

 

8.0.3

[Stefan]

Hello, Barry,

Thank you for your code.

This seems to be a TypeScript error as the filter has to have a specific type CompositeFilterDescriptor:

https://www.telerik.com/kendo-react-ui/components/dataquery/api/CompositeFilterDescriptor/

The example is working in the demo as the demo is in JSX and has no types requirement.

We are planning a task to add a TSX demo for the components where all required types can be observed.

Regards,
Stefan
Progress Telerik