Premium support for our pure JavaScript UI components


Post by sprabhu »

Hi,
Currently if we set a filter on any column, we have to perform below steps to remove it:

  1. right click on the header
  2. go to Multi sort
  3. click on remove sorter

Is it possible to customize this and bring the remove sorter on the right click of the header itself(may be use above 'Multi sort').
Also can we hide or create a new option in the right click panel.
For instance:

  1. Hide the 'Columns' entry - so that user cant hide/unhide any columns
  2. Include a new option : which can perform remove all filters on the grid


Post by sprabhu »

Hi Alex,
Thanks for the reply. Using the link provided I was able to create a custom menu. But need some more information on this:

  1. If I use below code it creates a custom menu but how can I control the position. e.g. I want the new custom button below the 'Sort descending'
    headerMenu : {
                items : {
                  extraItem : { text: 'Custom remove sorter', icon: 'fa fa-car', weight: 200, onItem : () => {sort : false} }
                }
              },
  2. How can I link the default code used for 'Remove sorter' to the new menu button created in above step.
Attachments
custom menu item
custom menu item
Custom Menu item.png (19.05 KiB) Viewed 192 times

Post by tasnim »

If I use below code it creates a custom menu but how can I control the position. e.g. I want the new custom button below the 'Sort descending'

You could try setting the highest weight and it should work
https://bryntum.com/products/grid/docs/api/Core/widget/MenuItem#config-weight

customItem : { text : 'Button', weight : 420 }
Screenshot 2023-05-29 164804.png
Screenshot 2023-05-29 164804.png (22.76 KiB) Viewed 159 times

How can I link the default code used for 'Remove sorter' to the new menu button created in above step.

You could use this method https://bryntum.com/products/grid/docs/api/Core/data/mixin/StoreSort#function-removeSorter

                customItem : { text : 'Button', weight : 420, onItem(event) {
                    const { source : grid, column } = event;
                    grid.store.removeSorter(column.field);
                } }

Post by sprabhu »

That worked as a charm. Thanks for your quick help :-)


Post Reply