Rank 5
Bronze
Bronze
Bronze
I have a Grid component with a custom cell property. The input field for the cell is determined dynamically depending on a different field type input. So for example if the dataType is 'string" I display a simple input field, if it is 'enum' I display a NumericTextBox.
The grid and the determination of the input field can be seen here:
https://stackblitz.com/edit/react-ts-xapte3?file=index.tsx
This is NOT a working application because it is just too big to put here in its full glory... In the index.tsx from line 200 to 251 you see the implementation of the cell ("ValueCell") and in the file CustomInputFields you can find the ChannelTypeInput component. As the FieldRenderProps require a onFocus and onBlur handler, I tried to implement that myself but I guess this is not enough to handle them.
This works perfectly but the issue is that if I try to type into the Input or NumericTextBox, it loses focus after every character and I have to click into it again. How can I get rid of this behavior?
Another question is: The NumericTextBox also allows negative values. Can I somehow specify that only positive values can be added?
1 Answer, 1 is accepted
Hello, Bernd,
Thank you for the code.
This usually occurs when a component is passed like an inline function or is initialized directly in the main component body. This causes the component to re-mount each time the value changes. This leads to losing the focus as this is a new re-mounted component.
I can suggest checking our demo where we have different editors in the Grid with a FieldArray:
https://www.telerik.com/kendo-react-ui/components/form/field-array/
For the second question - The NumericTextBox has a min property that we can use. This will still allow entering negative values, but it will become 0 on blur.
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 5
Bronze
Bronze
Bronze
Hi Stefan.
Hm, I call the grid component from a FieldArray but obviously I guess I did something wrong. I do it like this:
<FieldArray
name="typeValues"
component={ChannelDataTypeGrid}
dataItemKey={DATA_ITEM_KEY}
channelType={channelType}
/>
Yes, usually these issues are resolved using the React.Context. We use it to pass extra props down to components. If we do not use it, the alternative is to make a function that will pass original props + our props. These functions are usually what causes React to re-mount the components. React.Context is made to resolve this specific issue in React and make passing props between component more convenient:
https://reactjs.org/docs/context.html
Rank 5
Bronze
Bronze
Bronze