React Grid custom filter text and operators?

[Sean]

Hello!

I was looking over the documentation and previous answers, and I have a scenario that I can seem to find an answer for. I've been assigned a task to update the filter drop down which includes the options of "Is null", "Is not null", "Is empty", "Is not empty".  We have some non-technical people that don't really understand was 'Is null' means, and the difference between null and empty, so i'm trying to update these filters values.

The solution I would like to implement into the grid is to have the filter operators defined below.

const filterOperators = {
        text: [
          {
              text: "grid.filterContainsOperator",
              operator: "contains"
          },
          {
              text: "grid.filterNotContainsOperator",
              operator: "doesnotcontain"
          },
          {
              text: "grid.filterEqOperator",
              operator: "eq"
          },
          {
              text: "grid.filterNotEqOperator",
              operator: "neq"
          },
          {
              text: "grid.filterStartsWithOperator",
              operator: "startswith"
          },
          {
              text: "grid.filterEndsWithOperator",
              operator: "endswith"
          },
          {
              text: "Is Blank", // Custom text for "Is Blank"
              operator: "isempty, isnull"
          },
          {
              text: "Is Not Blank", // Custom text for "Is Not Blank"
              operator: "isnotempty, isnotnull"
          }
      ]
    };

    
I would like to have two custom operators in the drop down called "Is blank" and "Is not blank", which would implement two operators each. 

Is this possible?

[Sean]

For additional context, if it will help, here is the way that I am trying to use it in code:

    const filterOperators = {
        text: [
          {
              text: "grid.filterContainsOperator",
              operator: "contains"
          },
          {
              text: "grid.filterNotContainsOperator",
              operator: "doesnotcontain"
          },
          {
              text: "grid.filterEqOperator",
              operator: "eq"
          },
          {
              text: "grid.filterNotEqOperator",
              operator: "neq"
          },
          {
              text: "grid.filterStartsWithOperator",
              operator: "startswith"
          },
          {
              text: "grid.filterEndsWithOperator",
              operator: "endswith"
          },
          {
              text: "Is Blank", // Custom text for "Is Blank"
              operator: "isempty,isnull"
          },
          {
              text: "Is Not Blank", // Custom text for "Is Not Blank"
              operator: "isnotempty,isnotnull"
          }
      ]
    };
      
  return (
    <Grid
          data={data}
          {...dataState}
          reorderable
          sortable={sortable}
          onDataStateChange={onDataStateChange}
          onColumnReorder={onColumnReorder}
          style={style}
          {...virtualScroll}
          {...selection}
          rowRender={rowRender}
          {...otherProps}
          resizable={resizable}
          filterable={filterable}
          filterOperators={filterOperators}
    >
      {toolBar && <GridToolbar>{toolBar}</GridToolbar>}
      {selection && (
        <GridColumn
          field={selection.selectedField}
          headerSelectionValue={
            data.data &&
            data.data.findIndex((dataItem) => dataItem.selected === false) ===
              -1
          }
          filterable={false}
          sortable={false}
          reorderable={false}
        />
      )}
      {columns &&
        columns
          .filter((x) => x.show)
          .map((x) => {
              const headerClassName = dataState?.filter?.filters.some(y => y.field === x.field) ? 'active' : '';
            return (
              <GridColumn
                key={x.field + Math.random() * 1000}
                headerClassName={`${headerClassName} ${x.headerClassName}`}
                field={x.field}
                title={x.title}
                width={x.width}
                orderIndex={x.orderIndex}
                filter={x.filter}
                format={x.format}
                cell={cellFunctions && cellFunctions[x.field]}
                reorderable={x.reorderable}
                sortable={x.sortable}
                filterable={x.filterable}
                editor={x.editor}
                editable={x.editable}
                filterCell={filterCells && filterCells[x.field]}
              />
            );
          })}
    </Grid>
  );
}

[Vessy]

Hi, Sean,

The values passed to the text prop of the defined filterOperators represents the localisation string for the same and cannot be directly replaced by simple string:

• https://www.telerik.com/kendo-react-ui/components/grid/api/GridFilterOperators/  

You can change the text of the desired operators by using a localization provider and change the desired localization messages through it:

• https://www.telerik.com/kendo-react-ui/components/grid/globalization/ 

The other specific is the the operator value can accept only one operator at a time, they cannot be coma separated so you will need to choose either one of the isnull/isnot null or isempty/isnotempty couples in order to avoid duplication in the filtering menu.

For convenience, I created a sample that demonstrates this approach, you can examine the setup here:

• https://stackblitz.com/edit/react-ujbknq-q9hsfc?file=app%2Fapp.tsx,app%2FenMessages.json 

Regards,
Vessy
Progress Telerik

[Sean]

I appreciate you for taking the time to write this out! Thanks so much.

[Vessy]

You are most welcome, Sean :)