Numeric editor to allow only positive numbers in kendo react grid

1 Answer 1329 Views
Editor Grid
seenu
Top achievements
Rank 2
Iron
Iron
Iron
seenu asked on 07 Oct 2021, 04:53 PM

Hi,

I am using kendo react grid column with numeric editor where it is currently allowing negative numbers as well, is there way to restrict only positive numbers?

sample used:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/

1 Answer, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 08 Oct 2021, 05:41 AM

Hello, Seenu,

This can be done in two ways:

1) Using a custom editor cell where the developer can render a custom NumericTextBox with a min property set to 0.

2) During the onItemChange event, do not update the state if the value is less than 1:

  const itemChange = event => {
    let field = event.field || '';
    if(field === 'UnitsInStock' && event.value < 0) {
      return;
    }

Please have in mind that the NumericTextBox allows entering invalid values and it will return to the valid one on blur. This means that in both cases the user will be able to enter negative values, but they will be set back to 0 on blur.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor Grid
Asked by
seenu
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Stefan
Telerik team
Share this question
or