Hi Stefan,
Here is a code example taking directly from our app. It's an inline editing so we don't have rowRender. We have onItemChange but I didn't see anything out of the ordinary. This is the kendo example we followed in this code example: https://www.telerik.com/kendo-react-ui/components/grid/editing/#toc-editing-options.
Thank you,
Di
Code Example:
/* eslint-disable no-param-reassign */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/no-array-index-key */
import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import {
getPortfolioOptions, loadPortfolios, updatePortfolioOptions, editPortfolioOptions,
} from '../actions/allocatorActions';
import MyCommandCell from './MyCommandCell';
import DropDownCell from './DropDownCell';
const PortfoliosOptions = () => {
const [editID, setEditID] = useState(null);
const [original, setOriginal] = useState({});
const dispatch = useDispatch();
useEffect(() => {
dispatch(getPortfolioOptions());
}, []);
const {
portsOptions, portOptions,
} = useSelector(state => ({
portsOptions: state.allocator.portsOptions,
portOptions: state.allocator.portOptions,
}));
const rowClick = (event) => {
setEditID(event.dataItem.portfolio_name);
};
const itemChange = (event) => {
const inEditID = event.dataItem.portfolio_name;
let data = [];
let updated = {};
const [target] = portsOptions.filter(item => item.portfolio_name === inEditID);
if (event.field === 'rating_required') {
updated = { ...target, [event.field]: event.value.value };
data = portsOptions.map(item => (item.portfolio_name === inEditID ? { ...item, [event.field]: event.value.value } : item));
} else {
updated = { ...target, [event.field]: event.value };
data = portsOptions.map(item => (item.portfolio_name === inEditID ? { ...item, [event.field]: event.value } : item));
}
dispatch(loadPortfolios(data));
dispatch(updatePortfolioOptions(updated));
setOriginal(target);
};
const update = () => {
dispatch(editPortfolioOptions(portOptions));
setEditID(null);
};
const cancel = () => {
dispatch(getPortfolioOptions('Canceling...'));
dispatch(updatePortfolioOptions(original));
setEditID(null);
};
const CommandCell = MyCommandCell({
update, cancel,
});
return (
<div>
{portsOptions != null && (
<Grid
style={{ width: '1450px', height: '400px' }}
columnVirtualization
editField="inEdit"
data={portsOptions != null ? portsOptions.map(item => ({ ...item, inEdit: item.portfolio_name === editID })) : null}
onRowClick={rowClick}
onItemChange={itemChange}
>
<GridColumn field="portfolio_name" title="Portfolio" editable={false} width="80px" headerClassName="grid-header" />
<GridColumn field="tactical" title="Tactical" editor="boolean" width="50px" headerClassName="grid-header" />
<GridColumn field="preferred" title="Preferred" editor="boolean" width="50px" headerClassName="grid-header" />
<GridColumn field="special_cash" title="Special Cash" editor="boolean" width="50px" headerClassName="grid-header" />
<GridColumn field="rating_required" title="Rating Required" cell={DropDownCell} width="100px" headerClassName="grid-header" />
<GridColumn field="notes" title="Notes" editor="text" width="930px" headerClassName="grid-header" />
<GridColumn cell={CommandCell} width="160px" headerClassName="grid-header" />
</Grid>
)}
</div>
);
};
export default PortfoliosOptions;