I want to add a "Freeze columns" option to this menu. How can I implement it?

Excel like filter in Vue Grid component

const filterOptions = { type: "Excel" };

I want to add a "Freeze columns" option to this menu. How can I implement it?

Excel like filter in Vue Grid component

const filterOptions = { type: "Excel" };

I want to add a "Freeze columns" option to this menu. How can I implement it?

[Joseph Christ Nithin Issack]

Hi Zhong,

    Greetings from Syncfusion support.

   Based on the provided information you want to add the option to freeze a column in the Excel filter popup. By default, the Excel filter popup is rendered based on the filter popup in MS Excel. Similar to MS Excel, the Excel filter popup contains options related to sorting and filtering. However, there is an alternative solution: you can implement the freeze column functionality using the columnMenu feature of each column in the EJ2 Grid.

  To achieve this, you can add custom columnMenuItem options for freezing columns within the columnMenu. These custom menu items can be programmed to execute specific actions by handling the columnMenuClick event in the EJ2 Grid. This way, you can extend the capabilities of the grid and provide users with the option to freeze columns through the column menu.

Please refer to the below code example:

 

<template>

  <div class="control-section">

    <div class="col-lg-9 control-section">

      <ejs-grid

        -----------------------

        -----------------------

        :columnMenuItems="columnMenuItems"

        :columnMenuClick="columnMenuClick"

      >

        ----------------------------------

        ----------------------------------

      </ejs-grid>

    </div>

  </div>

</template>

-----------------------------

-----------------------------

  data: () => {

    return {

      ------------------------------

      ------------------------------

      columnMenuItems: [

        'SortAscending',

        'SortDescending',

        'Group',

        'Ungroup',

        'Filter',

        {

          text: 'Freeze',

          items: [

            { text: 'Left', id: 'leftFreeze' },

            { text: 'Right', id: 'rightFreeze' },

            { text: 'Fixed', id: 'fixedFreeze' },

            { text: 'Remove', id: 'removeFreeze' },

          ],

        },

      ],

      -----------------------------

      -----------------------------

    };

  },

  methods: {

    columnMenuClick: function (args: any) {

      if (args.column) {

        if (args.item.id == 'leftFreeze') {

          args.column.freeze = 'Left';

        } else if (args.item.id == 'rightFreeze') {

          args.column.freeze = 'Right';

        } else if (args.item.id == 'fixedFreeze') {

          args.column.freeze = 'Fixed';

        } else if (args.item.id == 'removeFreeze') {

          args.column.freeze = 'None';

        }

      }

      this.$refs.grid.ej2Instances.refreshHeader();

      this.$refs.grid.ej2Instances.refreshColumns();

    },

  },

---------------------------

---------------------------

  

 

 

Sample: Ajfiwz (forked) - StackBlitz

API Documentations:

columnMenuItems: https://ej2.syncfusion.com/vue/documentation/api/grid/#columnmenuitems

columnMenuClick: https://ej2.syncfusion.com/vue/documentation/api/grid/#columnmenuclick

refreshHeader: https://ej2.syncfusion.com/vue/documentation/api/grid/#refreshheader

refreshColumns: https://ej2.syncfusion.com/vue/documentation/api/grid/#refreshcolumns

You can also refer to the below documentation for more details about the columnMenu feature in EJ2 Grid.

Documentation: Column menu in Vue Grid component | Syncfusion

Regards,

Joseph I.

Thank you very much! I followed the example you provided, and it works now.

[Aishwarya Rameshbabu]

Hi Zhong,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards

Aishwarya R

After canceling the freeze with args.column.freeze = 'None';, this column does not return to its original order. What should I do?

I tried using:

gridInstance.refreshColumns();

gridInstance.refreshHeader();

but it still doesn't work.

[Aishwarya Rameshbabu]

Hi Zhong,

In the forum discussion below, you mentioned that the issue has been resolved. So please let us know if you require any further assistance.

Forum Link: After canceling the freeze with args.column.freeze None this column does not return to its original order. What should I do | Vue Forums | Syncfusion

Regards

Aishwarya R