In inline editing numeric textbox loses focus after key press

1 Answer 97 Views
Grid NumericTextBox
Ozgur
Top achievements
Rank 1
Iron
Ozgur asked on 09 Apr 2024, 12:48 PM

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

1 Answer, 1 is accepted

Sort by
2
Accepted
Konstantin Dikov
Telerik team
answered on 10 Apr 2024, 05:57 PM

Hi Ozgur,

The issue that you are facing is due to the fact that the custom cells are defined inline within the main component, which forces React to re-mount it, thus the focus is lost. To resolve the issue you need to move the definition of the custom cell components outside of the main component.

If you want to pass additional data from the main component to the custom cells you can use React Context.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Are you interested in React Server Components? Have a look at our Kendo React Server Grid! https://www.telerik.com/kendo-react-ui/components/server-components/grid/
Ozgur
Top achievements
Rank 1
Iron
commented on 16 Apr 2024, 02:20 PM

Thanks, solved.
Tags
Grid NumericTextBox
Asked by
Ozgur
Top achievements
Rank 1
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or