Autofit all columns should not autofit a particular column

[Viji Palanisamy]

1. Autofit all columns should not autofit a particular column. It should only autofit when say autofit this column.
2. To maintain static width for specific columns while auto fitting, you can set the width, minWidth and maxWidth property for the column to the same value. Now the autoFitColumns will not have any effect on those columns. IT works on initial load but i need this to be applied when using this feature to autofit all columns.This logic work on load but, i need this to work by using Autofit All Column.

3. This particular notes column should only autofit when we use Autofit this column.

[Viji Palanisamy]

Hi team,

       I am waiting on a reply for this issue. Please get back to me as soon as possible.

[Dineshnarasimman Muthu]

Hi Viji Palanisamy,

Sorry for the inconvenience caused.

We have reviewed your query about autoFitAllColumns in the columnMenu must autoFit except the column in which the columnMenu is opened. By default, the autoFitAll from the columnMenu will fit all the columns and autoFit this column will fit the current column. To customize this behavior, we suggest you to use the custom item in the columnMenu using the gridInstance.columnMenuItems property. In the columnMenuClick event of the grid, based on the custom item id, we can perform autoFit by passing all the columns except the current column in the autoFitColumns() method.

The code snippet of the implementation and sample have been attached for your reference.

<GridComponent

          id="gridcomp"

          dataSource={orderDetails}

          created={created}

          columnMenuClick={columnMenuClick}

          ref={(grid) => (gridInstance = grid)}

          allowPaging={true}

          allowGrouping={true}

          showColumnMenu={true}

        >

 

 

 const columnMenuClick = (args) => {

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

      let autoFitExceptOneColumn = gridInstance.columns.map((column) => {

        if (column.field !== args.column.field) {

          return column.field;

        }

      });

      gridInstance.autoFitColumns(autoFitExceptOneColumn);

    }

  };

  const created = () => {

    const columnMenuItemsList = [

//custom item in the column Menu

      { text: 'autoFitExceptOne', id: 'autoFitExceptOne' },

      {

        text: 'AutoFit this column',

        id: `${gridInstance.element.id}_colmenu_AutoFit`,

      },

      {

        text: 'Group this column',

        id: `${gridInstance.element.id}_colmenu_Group`,

        iconCss: 'e-icons e-icon-group',

      },

      {

        text: 'UnGroup this column',

        id: `${gridInstance.element.id}_colmenu_Ungroup`,

        iconCss: 'e-icons e-icon-group',

      },

    ];

    gridInstance.columnMenuItems = columnMenuItemsList;

  };

 

Sample: https://stackblitz.com/edit/custom-item-in-menu

Documentation: https://helpej2.syncfusion.com/react/documentation/grid/columns/column-menu#add-custom-column-menu-item

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M

[Viji Palanisamy]

Thanks For the update.

[Dineshnarasimman Muthu]

Hi Viji Palanisamy,

Thanks for the update. We are glad that the provided solution met your requirement. Please get back to us if you need further assistance.

Regards,

Dineshnarasimman M