Grid ShowColumnChooser doesn't allow column widths to shrink to their minimum size

[Michael Quiblat]

Hello!

I'm having trouble trying to setup the grid so that the columns take the minimum possible width based on the text after using showColumnChooser to pick only a few columns to show up on screen. 

I do not want the remaining columns to automatically expand to the width of the whole table.

Here's an image of what I would like it to look like. Please note I have only selected 3 columns out of many, but this only happens after doing an action on a column:

Currently I'm only able to get a stackblitz example to look like this. You can see that it automatically resizes to the entire width:

Stackblitz Link:

https://stackblitz.com/edit/syncf-grid-min-column-width?file=app.component.html

Please help!

Mike Q

[Manivel Sellamuthu]

Hi Michael, 

Greetings from Syncfusion support. 

From your query we can understand that you  want the columns take the minimum possible width based on the text(autoFit). You can achieve your requirement by using the actionComplete event of the Grid based on the requestType as “columnstate”. Please refer the below code example and sample for more information. 

 <ejs-grid 

      #grid 

      [dataSource]="data" 

      allowPaging="true" 

      (actionComplete)="actionComplete($event)" 

      showColumnChooser="true" 

      [toolbar]="toolbar" 

      [pageSettings]="pageSettings" 

      height="100%" 

      width="100%" 

      rowHeight="38" 

      allowSelection="true" 

      allowSorting="true" 

      allowResizing="true" 

    > 

             <e-columns> 

. . . 

        </e-columns> 

    </ejs-grid> 

export class AppComponent { 

    public data: Object[]; 

    public toolbar: string[]; 

    public pageSettings: Object; 

    @ViewChild('grid', {static: true}) 

    public grid: GridComponent; 

 

    ngOnInit(): void { 

         this.data = data; 

         this.toolbar = ['ColumnChooser']; 

         this.pageSettings ={ pageCount: 5 }; 

    } 

 

    actionComplete (args) { 

      if (args.requestType === "columnstate") { 

// invoke the autofit columns method while selecting the columns from column chooser 

          this.grid.autoFitColumns(); 

      } 

    } 

} 

Sample: https://stackblitz.com/edit/syncf-grid-min-column-width-modifed?file=app.component.ts 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#autofit-specific-columns 

Please let us know if you need further assistance. 

Regards, 

Manivel