Inline editing example with coffee-warehouse-dashboard example project

[David]

Hi,

I am working on to include inline editing features with the coffee-warehouse-dashboard project and I am not able to get the Editing working. If you could post an editing example with the existing coffee-warehouse-dashboard that would be great.

Thanks,
David.

[Stefan]

Hello, David,

There a couple of options for editing inside the Grid.

I added the standard one to the coffee-warehouse-dashboard app which is to use the onRowClick event to place the row in edit. I can suggest checking the editing article that shows all required setup:

https://www.telerik.com/kendo-react-ui/components/grid/editing/

This is the code in the demo:

    const onItemChange = (event) => {
        const updatedData = data.map(item =>
            item.id === event.dataItem.id ? {...item, [event.field]: event.value} : item
        );
        onDataChange(updatedData);
    };

    const onRowClick = (event) => {
        const updatedData = data.map(dataItem => {
            if(dataItem.id === event.dataItem.id){
                dataItem.inEdit = true;
            }
            return {...dataItem};
        });
        onDataChange(updatedData);
    } 

    const GridElement = (
        <KendoGrid
            {...dataState}
            {...others}
            rowHeight={40}
            pageable
            sortable
            groupable
            selectedField={'selected'}
            editField={'inEdit'}
            onItemChange={onItemChange}
            onRowClick={onRowClick}

Also, as the example uses many custom cells, they will not fire the onRowClick event, which means that each custom cell has to fire the event as well by attacking an onClick to the custom td.

I have attached the modified version (without the custom cells) for reference as well.

Regards,
Stefan
Progress Telerik