How to Make Date Time Filter in the KendoReact Grid

Hello Daniel,

Using the filterUI is the right way for changing the default filter components. As for including the operators DropDownList components, you can take a look at the following KB article, where the operators are included in the custom filter:

• https://www.telerik.com/kendo-react-ui/knowledge-base/grid-autocomplete-gridcolumnmenufilter/

Please give this a try and let us know if further questions arise.

Hi Konstantin.

Thanks, but in this example when I filter and change the default operator for example filter with the operator "is equal to" and some value and then open again the filter menu its back to the default operator "contains" and the value is empty, how can I make it consistent?

Hi Daniel,

In order to set the changed operators you can use the filterUI properties and find the corresponding operator from the applied filters:

export const CustomFilterUI = (props) => {
  const operators = props.firstFilterProps.operators;
  const logic = props.logicData;
  const productNames = products.map((item) => {
    return item.ProductName;
  });
  const operator1 = props.firstFilterProps.operator;
  const operator2 = props.secondFilterProps.operator;
  const [state, setState] = React.useState({
    first: operator1
      ? operators.filter((i) => i.operator == operator1)[0]
      : operators[0],
    second: operator2
      ? operators.filter((i) => i.operator == operator2)[0]
      : operators[1],
  });

And here is the modified example:

• https://stackblitz.com/edit/react-lw71en?file=app%2FcustomFilterUI.jsx

Hope this helps.