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

2 posts, 0 answers
  1. Barry
    Barry avatar
    1 posts
    Member since:
    Aug 2020

    Posted 10 Aug 2020 Link to this post

    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!

     

     

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 11 Aug 2020 Link to this post

    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

Back to Top