Filtering

The KendoReact ListView can be easily integrated with the KendoReact Filter to filter the data in the list.

Basic Usage

The following example demonstrates the ListView using the Filter component.

import React from 'react';
import ReactDOM from 'react-dom';
import { ListView } from '@progress/kendo-react-listview';
import { Card, CardTitle, CardImage, CardHeader, CardSubtitle, CardBody } from '@progress/kendo-react-layout';
import {
    Filter,
    Operators,
    TextFilter,
    NumericFilter,
    BooleanFilter,
} from '@progress/kendo-react-data-tools';
import { filterBy } from '@progress/kendo-data-query';

import products from './products.json';

const MyItemRender = props => {
    return (
        <Card style={{ height: 110, margin: 20, border: 'none' }} orientation='horizontal'>
            <CardImage src={`https://demos.telerik.com/kendo-ui/content/web/foods/${props.dataItem.ProductID}.jpg`} style={{ height: 110 }} />
            <div style={{width: '40%'}}>
                <CardTitle style={{ fontSize: 16 }}>
                    {props.dataItem.ProductName}
                </CardTitle>
                <CardSubtitle style={{ fontSize: 14 }}>
                    {props.dataItem.Category.CategoryName}
                </CardSubtitle>
            </div>
            <CardBody>
                <div>Price: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.dataItem.UnitPrice)}</div>
                <div>Available units: {props.dataItem.UnitsInStock}</div>
            </CardBody>
        </Card>
    );
}

class App extends React.Component {
    state = {
        filter: {
            logic: 'and', filters: [
                { field: 'UnitPrice', operator: 'gt', value: 20 },
                { field: 'UnitPrice', operator: 'lt', value: 50 },
                { field: 'Discontinued', operator: 'eq', value: false },
                {
                    logic: 'or', filters: [
                        { field: 'ProductName', operator: 'contains', value: 'organic' },
                        { field: 'ProductName', operator: 'contains', value: 'cranberry' },
                    ]
                }
            ]
        }
    };

    onFilterChange = (event) => {
        this.setState({ filter: event.filter });
    }

    render() {
        return (
            <div>
                <Filter
                    value={this.state.filter}
                    onChange={this.onFilterChange}
                    fields={[
                        { name: "ProductName", label: 'Name', filter: TextFilter, operators: Operators.text },
                        { name: "UnitPrice", label: 'Price', filter: NumericFilter, operators: Operators.numeric },
                        { name: "Discontinued", label: 'Discontinued', filter: BooleanFilter, operators: Operators.boolean }
                    ]}
                />
                <ListView
                    data={filterBy(products, this.state.filter)}
                    item={MyItemRender}
                    style={{ width: "100%" }}
                />
            </div>
        );
    }
}
ReactDOM.render(
    <React.Fragment>
        <App />
        <style>
            {`.k-card:last-of-type  {
                border: none !important;
            }
            .k-pager-wrap {
                border-top: none;
            }`}
        </style>
    </React.Fragment>, document.querySelector('my-app')
);