Hi.
I have a Data Grid which includes two TimeInput fields, onTime and offTime and I want to make sure that when the user hits the update button of the row that offTime is always bigger than onTime. My problem is not the calculation, it's more like: What is the best way to check the values of the 2 fields and how do I set the focus on the offTime field when it is lower than the onTime? It would also be possible to not check it on the update button click but when the field is blurred or so. Not sure how to handle this best.
I have used one of your Grid-Examples and manipulated it a bit so that the 2 fields are already in there but there are of course a couple of things missing like a form for example. Maybe you can direct me at least in the right direction how to handle this best.
https://stackblitz.com/edit/react-nq2pkf?file=index.js
Thanks!
Greetings,
Bernd
1 Answer, 1 is accepted
Hi Bernd,
For implementing dynamic validation you could add custom logic within the update method (and do not update the item if the condition is not satisfied) and also, add custom logic within the change event of the custom editor:
export function TimeInput(fieldRenderProps) {
const { name, onChange, dataItem, validationMessage, visited, ...others } =
fieldRenderProps;
const [timeValue, setTimeValue] = React.useState(new Date());
const [invalid, setInvalid] = React.useState(false);
const handleChange = (event) => {
if (name == 'onTime') console.log(event.value);
if (event.value < dataItem.offTime) {
setTimeValue(event.value);
setInvalid(false);
} else {
setInvalid(true);
}
};
return (
<>
<TimePicker
valid={!invalid} const update = (dataItem) => {
if (dataItem.onTime >= dataItem.offTime) {
dataItem.inEdit = false;
const newData = updateItem(dataItem);
setData(newData);
} else {
console.log('failed');
}
};The logic in the custom editor will be used for rendering indication and the logic in the update method will prevent the update.
Note that the logic that compares the values (onTime and offTime) should be changed accordingly, so it can compare hours/minutes only and not the entire Date object.
Hope this helps.
Regards,
Konstantin Dikov
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/.