We are Using Kendoreact Editable Grid which have Gridcolumn like Name in grid
<GridColumn
field='Name'
title='Name'
width='150px;'
filter='text'
editor='text'
className='k-grid-textbox'
</GridColumn>
how to validation each cell on entering should not be more than 100 letters and show error in same cell inside grid.
I also tried checking for cell and onblur which is not working and getting error in existing flow. Please help how to validate grid cell when entering and show error message in same cell.
1 Answer, 1 is accepted
Hello, Saranya,
The validation in the Grid is done using custom cells for the Grid.
- Render a custom cell where the editor for the cell will have its own validation attributes like required, min, max, etc:
https://stackblitz.com/edit/react-x5wmrp-2fkqz9?file=app/main.jsx
In general, the validation logic has to be added by the developer based on the application business logic. We agree that this may require more work initially, but as React is based on reusable components and logic, once a validation cell is made for one Grid, it can be reused in many others.
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/.
Rank 1
Iron
Rank 1
Iron
Could you please share more details on the type of validation that is needed?
Rank 1
Iron
1. I changed above code value <1 || value <30 as value.length <100 as i am checking for letters not to be more than 100
actual validation is min 1 and max 100 letters
2. I have separate onclick event performs other functionlity like loading child grid etc.
but after adding to cell event for particular column onclick is not triggering and inedit is not working.
Rank 1
Iron
In that case, the developer has to call the same method to enter edit and render two different TD elements based on the edit state.
I updated the example to showcase this:
https://stackblitz.com/edit/react-lwkcwk?file=app/main.jsx
Rank 1
Iron
Rank 1
Iron
I have one more doubt, is that possible to configure min and max for each column and based on it to trigger error
currently hardcoded like 1 and 100 in min and max instead to pass as paramter so that can be configurable
As this is a custom function, the developer can dynamically pass extra parameters like min and max:
https://stackblitz.com/edit/react-lwkcwk-zcyyue?file=app/main.jsx
The demo only shows a possible approach, but in the real application the developer can set it up differently.
Rank 1
Iron
yes its working for single validation only
https://stackblitz.com/edit/react-lwkcwk-7ptsg1?file=app/main.jsx
for ProductName min=0 and max =30
for ProductAlternateName min =0 and max =10
but in this above code link showing same error for both column considering max as 30
also i have one column to validate like only max it can be null too
Please check this link how to configure different validation based on passing min and max
This:
if (props.dataItem.field = "ProductName") {
min = 1; max = 30;
}
else if (props.dataItem.field = "ProductAlternateName") {
min = 1; max = 10;
} if (props.field === "ProductName") {
min = 1;
max = 30;
}
else if (props.field === "ProductAlternateName") {
min = 1;
max = 10;
}Also, please have in mind that the validation logic is on an application level, not inside the Grid. This means that its implementation will vary based on the real application. The demo is to only show a possible approach.
Rank 1
Iron
yes i understand , how to manage when there is error not to allow details to save and remain in same page.
Also how to highlight outline column when error
Rank 1
Iron
Rank 1
Iron
I updated the example to show a possible approach: https://stackblitz.com/edit/react-lwkcwk-zcyyue?file=app/main.jsx
Please have in mind that this is custom logic, it is based on the application not on the Grid features.
If you have an additional request for custom functionalities I can recommend our Professional Services team that assist with these requests:
https://www.progress.com/services