Editing

The KendoReact ListView allows editing the items on the list.

Basic Usage

The following example demonstrates how to render an item in two different states (read-only or edit) based on a boolean value. In the example, we keep the state for each item, to only update that item during editing instead of the entire list. Updating the entire list is also possible if we have depending values like aggregates.

import React from 'react';
import ReactDOM from 'react-dom';
import { ListView, ListViewHeader } from '@progress/kendo-react-listview';
import MyItemRender from './myItemRender.jsx'

import products from './products.json'

const MyHeader = () => {
    return (
        <ListViewHeader style={{ color: 'rgb(160, 160, 160)', fontSize: 14 }} className='pl-3 pb-2 pt-2'>
            Product list
        </ListViewHeader>
    )
}

class App extends React.Component {
    state = {
        data: products
    }

    saveData = (editItem) => {
        this.setState({
            data: this.state.data.map(e => e.ProductID === editItem.ProductID ?
                {...editItem, edit: false} : e)
        });
    }

    deleteItem = (editItem) => {
        this.setState({
            data: this.state.data.filter(e => e.ProductID !== editItem.ProductID)
        });
    }

    MyCustomItem = props => <MyItemRender {...props} saveItem={this.saveData} deleteItem={this.deleteItem} />

    render() {
        return (
            <ListView
                data={this.state.data}
                item={this.MyCustomItem}
                style={{ width: "100%", height: 500 }}
                header={MyHeader}
            />
        );
    }
}

ReactDOM.render(
    <App />, document.querySelector('my-app')
);