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

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.

[Adrian Scott]

When you cancel the freeze on a column by setting args.column.freeze to None, and the column does not return to its original order, you may need to manually reset the column order. Here are a few steps to help you restore it:

1. Identify Original Order: Make sure you have the initial order of columns stored or referenced, so you know where each column should go.

2. Reorder Columns Programmatically: After unfreezing, programmatically reset the column order by specifying the correct positions for each column based on your original layout. This may involve setting the columnIndex property (or similar, depending on your framework) for each column.

3. Trigger a Refresh: In some cases, you may need to trigger a refresh or re-render of the table to apply the new order.

4. Check for Built-In Functions: Some table libraries have built-in methods for resetting the column order. Consult your framework’s documentation to see if there’s an easier way to revert to the default layout.

If you need more specific code assistance, let me know which framework or library you’re using!

 <ejs-grid

          v-if="state.gridColumns.length"

          ref="GGrid"

          :dataSource="state.tableData"

          height="100%"

          :allowPaging="true"

          :pageSettings="pageSettings"

          :allowSorting="true"

          :allowResizing="true"

          :allowFiltering="true"

          :allowExcelExport="true"

          :allowGrouping="true"

          :showColumnMenu="true"

          :allow-selection="true"

          :groupSettings="groupOptions"

          :allowReordering="true"

          :allowPdfExport="true"

          :showColumnChooser="true"

          :filterSettings="filterSettings"

          :columnMenuClick="columnMenuClick"

          :columnMenuItems="columnMenuItems"

          :selectionSettings="selectionSettings"

          :rowDataBound="onRowDataBound"

          :toolbar="toolbarItems"

          :toolbarClick="toolbarClick">

          <e-columns>

            <e-column

              v-for="column in state.gridColumns"

              :field="column.f_en_code"

              :headerText="column.f_full_name"

              :type="column.GridColumnType"

              :format="column.F_formatter"

              :freeze="column.GGridFreeze"

              :is-primary-key="column.GGridIsPrimaryKey === 'true'"

              :width="column.F_width"

              :allow-filtering="column.GGridAllowFiltering === 'true'"

              :template="column.GGridTemplate"

              :allow-grouping="column.GGridAllowGrouping === 'true'"

              :allow-reordering="column.GGridAllowReordering === 'true'"

              :allow-searching="column.GGridAllowSearching === 'true'"

              :clipMode="'EllipsisWithTooltip'"

              :text-align="column.TextAlign"></e-column>

  const columnMenuItems = [

    'Filter',

    {

      text: '冻结列',

      items: [

        { text: '左边冻结', id: 'leftFreeze' }, // 将列冻结在左侧

        { text: '右边冻结', id: 'rightFreeze' }, // 将列冻结在右侧

        { text: '居中冻结', id: 'centerFreeze' }, // 将列冻结在中间

        { text: '固定冻结', id: 'fixedFreeze' }, // 将列固定冻结，确保在滚动时始终可见

        { text: '取消冻结', id: 'unfreeze' }, // 取消冻结，并恢复原始位置

      ],

    },

    'Group',

    'Ungroup',

    'ColumnChooser',

    'AutoFitAll',

    'AutoFit',

  ];

  const columnMenuClick = function (args) {

    const gridInstance = GGrid.value?.ej2Instances;

    // 确保获取到 Grid 实例

    if (!gridInstance) return;

    const columnField = args.column.field;

    const column = gridInstance.getColumnByField(columnField);

    // 根据菜单项 ID 设置冻结方向

    switch (args.item.id) {

      case 'leftFreeze':

        column.freeze = 'Left'; // 左侧冻结

        break;

      case 'rightFreeze':

        column.freeze = 'Right'; // 右侧冻结

        break;

      case 'centerFreeze':

        column.freeze = 'Center'; // 居中冻结

        break;

      case 'fixedFreeze':

        column.freeze = 'Fixed'; // 固定冻结，滚动时保持可见

        break;

      case 'unfreeze':

        // 取消冻结并恢复到初始位置

        column.freeze = 'None'; /// 删除冻结属性

        break;

      default:

        break;

    }

    gridInstance.refreshHeader();

    gridInstance.refreshColumns();

  };

I am generating columns dynamically; how can this be implemented?

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

我已经实现了。谢谢你的帮助。

[Aishwarya Rameshbabu]

Hi Zhong,

Based on the provided information, it appears that you have resolved the issue. Please let us know if you need any other assistance.

Regards

Aishwarya R