Hi,
I have React Kendo Datagrid, in inline editing numeric textbox loses focus after key press.
I debugged it and found cause of the problem is itemChange function.
Actually I followed https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline/ document.
How to solve it? I attached whole page.
const itemChange = (event: GridItemChangeEvent) => {
const field = event.field || "";
const newData = result.data.map((item) => {
return item.id === event.dataItem.id
? { ...item, [field]: event.value }
: item
});
const dataResult = {
data: newData,
total: newData.length
};
setResult(dataResult);
};
<Grid
style={{ width: 985 }}
className="gridTable"
filterable={false}
sortable={false}
pageable={false}
{...dataState}
data={result}
rowRender={rowRender}
onItemChange={itemChange}
editField={editField}
onDataStateChange={dataStateChange}
resizable={true}
size='small'
selectable={{
enabled: true,
mode: 'multiple'
}}
dataItemKey={dataItemKey}
selectedField={selectedField}
>
<GridToolbar className='ms-auto'>
<div>
<button
title="Add new"
onClick={addNew}
style={{ border: "none", padding: "none", background: "none" }}
>
<i className="bi bi-file-plus" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i>
</button>
</div>
</GridToolbar>
<Column field="attendeeCompanyId" cell={DropDownCellAttendeeCompanies} title="Katılımcı Şirketi" width={300} />
<Column field="distributionCompanyId" cell={DropDownCellDistributionCompanies} title="Dağıtım Şirketi" width={300} />
<Column field="ratio" editor="numeric" title="Oran" width={150} format='%{0:#.##}' />
<Column field="attendeeCount" editable={false} title="Katılımcı Sayısı" width={120} />
<Column cell={CommandCell} width="100px" />
</Grid>
Thanks