Dependent fields in Grid

[Bernd]

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

[Konstantin Dikov]

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:

• https://stackblitz.com/edit/react-nq2pkf-eaquna?file=app%2Fmain.jsx,app%2FTimeInput.jsx,app%2FTimeCell.jsx

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