Hello team,
Can you provide an example of how to achieve validations on grid while submitting the form. Not looking for HTML form submit as it validates single input at a time. I am trying for something below, but it should also validate the form and not allow to submit if grid has any violation.
2 Answers, 1 is accepted
Hi, Seaker,
We are adding a new demo for custom data validation for the Grid in the upcoming release. You can view it here:
Please check it and let me know if it matches what you need.
Regards,
Wissam
Progress Telerik
Rank 1
Hello Wissam,
Thank you for your reply.
The above example is not quite what is required. Please see below my grid implementation in codesandbox.
https://codesandbox.io/s/musing-fire-5vpcj9
Here, I would like to have Required validation and Minimum value to be 20 validations on Speed OG column. It should be validated onedit/onblur and also when Submit button is clicked. So, when we click submit button, if any row has invalid value in Speed OG column, then submit click should not proceed with further operation. All invalid cells should display error message.
Kindly advise how to achieve this. I tried doing it using below example, but it did not work.
React Form Component & Array Integration - KendoReact Docs & Demos (telerik.com)
Hi, Seaker,
Thank you so much for getting back with an example and more explanation.
I will need more time to update the provided demo with the validation requirement. I will write you back as soon as I am done.
Thanks in advance for your patience.
Regards,Wissam
Progress Telerik
Rank 1
Greetings Wissam,
Thank you for the reply. I will wait for further update.
Hi, Seaker,
Thanks again for your patience.
I updated the example you sent with the validation requirement. Basically, I am rendering a custom cell for the `speedOG` column named `SpeedOGCell`. In this function, I am checking if the value `props.dataItem.speedOG` is null or less than `20` using the `requiredValidator` and `minValidator` methods. When the value is either null or less than 20, I am setting the `gridValid` state variable to `false`. In addition, based on their values, I am setting the value of the `validationMessage`.
When in edit mode, I am rendering the cell value and the Error component which shows the validation message conditionally. Moreover, when not in edit mode, I am rendering the Input component and the Error component conditionally.
On the other hand, in the click event handler of the submit button, when the state variable `gridValid` is false, I am sending an alert message that the Grid has invalid values. You can add the submit logic in the else statement:
Please check the above demo and let me know if it matches what you need.
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!