Inline editing example with coffee-warehouse-dashboard example project

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Dec 2019

    Posted 18 Aug 2020 Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 19 Aug 2020 Link to this post

    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

Back to Top