How to prevent Kendo Grid ColumnMenu popup closing on clicking

[kalyan]

Hello, using Kendo Grid in my react TS app. Using ColumnMenu for filtering, sorting and column selection. This column menu popup closes when click anywhere on this. How can I prevent it closing? Below is my code. 

<ColumnMenuContext.Provider

          value={{ onColumnsChange, onAutoSize, columnsState, columns }}

        >

          <PopupPropsContext.Provider

            value={({ popupClass, ...props }) => {

              const newPopupClass = classNames(popupClass, {

                "k-column-menu-tabbed":

                  popupClass &&

                  popupClass?.toString().includes("k-column-menu"),

              });

              return { ...props, popupClass: newPopupClass };

            }}

          >

            <Grid

              data={data}

              {...dataState}

              onDataStateChange={dataStateChange}

              total={totalCount}

              filterOperators={CONSTANTS.filterOperators}

              sortable={true}

              pageable={{ buttonCount: 5, pageSizes: [10, 20, 50, 100] }}

              ref={gridRef}

              resizable

              className={loading ? "grid-blurred" : ""}

            >

              <GridNoRecords>

                <EmptyResultsGrid />

              </GridNoRecords>

              {columnsState.map((c) => (

                <Column key={c.id} {...c} width={setWidth(Number(c.width))} />

              ))}

            </Grid>

          </PopupPropsContext.Provider>

        </ColumnMenuContext.Provider>

[Vessy]

Hello,

If I understand the issue properly, the KendoReact Grid’s ColumnMenu popup is closing when you click anywhere inside it. Am I correct in my understanding? I tried to replicate this behavior but the popup is closed only when I click outside it as expected at my end. Can you take a look at the video from my test below and see whether I am leaving anything out?

• https://somup.com/cTiiI8L9tb 

If this is not the case, please, elaborate a bit on the exact issue that you are facing and I will be glad to assist you further on it.

Regards,
Vessy
Progress Telerik

[kalyan]

Hello, Thanks for your reply. I am using old version of Kendo React Grid. After upgrading to latest version, this problem is fixed.

 

 

[kalyan]

Another question is when filter is active, there is no indicator. k-active class is missing. How can the filter show a different color or different icon when filter is active?

[Yanko]

Hi, Kalyan,

You can add an additional class to the Grid Column utilizing the `headerClassName` property.

There is an article about customizing the Column Menu icons with such an example that conditionally passes `active` classname to change the icon color:

• https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu#styling-the-column-menu-icon 

I hope this helps. Please let me know if I can further assist you.

[kalyan]

Thanks, Yanko. This is much helpful. Able to achieve what is needed with your suggestions.

One more query, is there any way we can trigger an event when Reset button is click on ColumnMenu?

[Yanko]

Hi, Kalyan,

I am happy to hear my suggestions helped you achieve the desired result.

The built-in KendoReact Grid ColumnMenu does not expose a direct event or callback specifically for the "Reset" button action. The built-in ColumnMenu handles its own internal state, and the Reset action is not exposed for custom event handling.

If you need to trigger custom logic when the Reset button is clicked, the recommended approach is to use a custom ColumnMenu component. With a custom component, you have full control over the menu content and can define your own Reset button and event handler.

If more questions arise, do not hesitate to ask.

[kalyan]

Thanks.