This is a migrated thread and some comments may be shown as answers.

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

1 Answer 60 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Barry
Top achievements
Rank 1
Barry asked on 10 Aug 2020, 07:33 PM

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

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 11 Aug 2020, 06:43 AM

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

Tags
General Discussions
Asked by
Barry
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or