AG Grid: лучший способ проверки строки - valueSetter?

Question

Есть ли лучший способ проверить строку в ag-grid чем с valueSetter?

Я могу добиться подтверждения с этим, но я не уверен, если есть лучший способ.

https://www.ag-grid.com/javascript-grid-value-setters/

Я хочу проверить два поля в строке. DateFrom и DateUntil (они не могут быть нулевыми, а DateFrom должен быть ниже, чем DateUntil).

Answer 1

Существует два способа возможной обработки проверки:

Первый: через ValueSetter функция

а также

Второе: через кастом cellEditor составная часть

Я полагаю, что было бы лучше разделить логику между components, но, как вы сказали, вам нужно проверить два значения ячеек между собой.

В этом случае с точки зрения пользовательского интерфейса вы можете попытаться объединить их внутри одной ячейки, и было бы легко работать со значениями только через один компонент.

Answer 2

Вы можете переопределить valueSetter и вместо этого вызвать обновление транзакции grid api.

Вот псевдокод, показывающий, как это можно реализовать.

valueSetter: params => {
  validate(params.newValue, onSuccess, onFail);
  return false;
};

validate = (newvalue, success, fail) => {
  if (isValid(newValue)) {
    success();
  } else {
    fail();
  }
};

onSuccess = () => {
  // do transaction update to update the cell with the new value
};

onFail = () => {
  // update some meta data property that highlights the cell signalling that the value has failed to validate
};

Таким образом, вы также можете выполнять асинхронную проверку. Вот реальный пример установщика значений async, который имеет успех, сбой и при проверке обработчиков, которые обновляют транзакции, когда проверка завершена.

const asyncValidator = (
  newValue,
  validateFn,
  onWhileValidating,
  onSuccess,
  _onFail
) => {
  onWhileValidating();
  setTimeout(function() {
    if (validateFn(newValue)) {
      onSuccess();
    } else {
      _onFail();
    }
  }, 1000);
};

const _onWhileValidating = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: true
  };
  params.api.applyTransaction({ update: [data] });
};

const _onSuccess = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: false,
    lastValidation: true,
    value: params.newValue
  };
  params.api.applyTransaction({ update: [data] });
};

const _onFail = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: false,
    lastValidation: params.newValue
  };
  params.api.applyTransaction({ update: [data] });
};

const asyncValidateValueSetter = validateFn => params => {
  asyncValidator(
    params.newValue,
    validateFn,
    _onWhileValidating(params),
    _onSuccess(params),
    _onFail(params)
  );
  return false;
};

Вот пример выполнения кода, показывающий это в действии: https://stackblitz.com/edit/async-validation-ag-grid-final

Answer 3

Взгляните на эти два фрагмента, они взяты из нашей внутренней базы знаний (доступны для клиентов)

При редактировании значения в столбце "A (обязательно)" вы увидите, что оно не позволяет оставить его пустым. Если вы оставите поле пустым и вернете правку, оно будет отменено.

//Force Cell to require a value when finished editing

https://plnkr.co/edit/GFgb4v7P8YCW1PxJwGTx?p=preview

В этом примере мы используем специальный редактор ячеек, который также проверяет значения по правилу длины 6 символов. Во время редактирования, если значение изменено за пределами 6 символов, оно будет отображаться красным цветом, а когда вы прекратите редактирование строки, значение будет сброшено, поэтому он принимает полное редактирование, только если значение допустимо.

//Inline Validation while editing a cell 

https://plnkr.co/edit/dAAU8yLMnR8dm4vNEa9T?p=preview