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

Inline editing example with coffee-warehouse-dashboard example project

1 Answer 27 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
David asked on 18 Aug 2020, 10:52 PM

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.

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 19 Aug 2020, 10:17 AM

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

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