GridColumnMenuCheckboxFilter Filter values with spaces

I will move the manipulation of the filter values to the backend. Adjusting these feels like opening Pandora's box. Since I have to take care of everything after customizing the filters and disable the filters magic for the corresponding grid.

However, I am still interested in how to influence how the filter values are displayed. Using the example of a filter value consisting of several words.

My current approach is as follows. I get the filter values adjusted like this, then I still have to apply this CompositerFilter to the DataSate and set the checkbox in the corresponding checkbox component, which is assigned to the grid via the GridColumns.

const removeWhiteSpacesFromFilterValues = (compositeFilter: CompositeFilterDescriptor) => {
  const { filters } = compositeFilter;

  // eslint-disable-next-line no-restricted-syntax
  for (const subFilter of filters) {
    if (Object.prototype.hasOwnProperty.call(subFilter, "logic")) {
      const subCompositeFilterDescriptor = subFilter as CompositeFilterDescriptor;
      const filterDescriptors = subCompositeFilterDescriptor.filters as FilterDescriptor[];

      // eslint-disable-next-line no-restricted-syntax
      for (const filterDescriptor of filterDescriptors) {
        filterDescriptor.value = filterDescriptor.value.toString().replace(/\s+/g, "");
      }
    }
  }
  
  return compositeFilter;
};

Hi, Christian,

The found by you approach is actually the one we would suggest you to implement - to do the filter value manipulation on the server-side.

As for the filter value display, you can show a value with spaces, send its strip version to the server by handling the GridColumnMenuCheckboxFilter `onFilterChangeevent` and iterate the selected filter values in order to remove the spaces:

• https://stackblitz.com/edit/react-lfulpx-ae2emj?file=app%2FcolumnMenu.jsx

export const ColumnMenuCheckboxFilter = (props) => {
  const onFilterChange = (e) => {
    e.filters[0].filters.map((f) => {
      f.value = f.value.replace(/\s/g, '');
    });
    
    e.filters[0].filters.map((f) => console.log(f.value));
  };

Hey Vessy.

Thanks for providing the solution on the front end. The Javascript approach seems simple. In my project, however, I have to take more care of types because of Typescript. Which in my opinion makes the implementation in the backend more pleasant.

Thanks also for the sample code. ❤️

You are welcome, Christian :) 

I am glad that you have at least a solution that fits your needs.

I should note that the approach shown also has implications for strings. I have also implemented a check that checks whether the member is an enum on the basis of a generic type.

public static T GetInstance<T>(params object[] args)
{
   return (T)Activator.CreateInstance(typeof(T), args);
}

public static bool PropertyTypeIsEnum(this object obj, string propertyName)
{
   var property = obj.GetType().GetProperty(propertyName);
   return !(property is null) && property.PropertyType.IsEnum;
}