Grid column menu filter icon css issue

[Anusha]

I have a grid with columnmenu set to "GridColumnMenuCheckboxFilter". I need to change the CSS of the filter icon based on the open/expanded state of the filter menu. 

I found examples of changing the CSS of the filter icon based on the active state of the filter. But here my requirement is to solely consider the open and close state of the filter menu,

What do I have to do?

 

Update 1: I tried using onExpandChange prop on GridColumnMenuCheckboxFilter. But it doesn't get triggered when expanded property is set.

My filter looks similar to the below screenshot

Update 2: onExpandChange gets triggered only when expanded property is not set to true and filter column menu is clicked which opens the filter box(2 clicks needed). I need the expanded property to be true. Is there any way to get hold of the expand/collapse state of the filter?

[Petar]

Hello, Anusha.

The desired functionality cannot be implemented out of the box in the Grid component, but we can use custom logic to achieve what you need.

Here is a StackBlitz example demonstrating how we can handle your scenario. In this example, we have the following definition:

  React.useEffect(() => {
    const gridMenus = document.querySelectorAll(
      '.k-grid-header-menu.k-grid-column-menu'
    );

    gridMenus.forEach((menu, index) => {
      menu.setAttribute('id', 'menu' + index);
      menu.addEventListener('click', (ev) => handleClick(ev, menu));
    });
  }, []);

  const handleClick = (event, elem) => {
    const id = elem.getAttribute('id');
    const menuRef = document.getElementById(id);

    menuRef.classList.add('red');

    setTimeout(() => {
      const menuOpened = document.querySelector(
        '.k-animation-container.k-animation-container-shown'
      );
      menuOpened
        ? document
            .querySelector('.k-animation-container.k-animation-container-shown')
            .addEventListener('focusout', (ev) => {
              menuRef.classList.remove('red');
            })
        : menuRef.classList.remove('red');
    }, 500);
  };

The above code dynamically adds custom IDs to the elements that open the column menus of the Grid. Based on these custom IDs we are dynamically handling the CSS of each column menu element. 

Using an approach similar to the demonstrated one and extending it, you can achieve what you need. 

[Anusha]

Thank you!

[Petar]

You are welcome! :)