ng-matero / extensions

Angular Material Extensions Library.
https://ng-matero.github.io/extensions/
MIT License
388 stars 48 forks source link

mtx-grid, column with fixed width will be resized anyway #270

Closed SYS64738 closed 4 months ago

SYS64738 commented 5 months ago

hi,

I have a grid with MtxColumns defined dynamically by user; I assign columns in ngAfterViewInit() method and all works fine except one thing:

I have the first column with this settings:

actionColumn: MtxGridColumn =
    {
      field: 'action',
      header: 'Azioni',
      pinned: 'left',
      disabled: true,
      left: '0px',
      width: '210px',
      minWidth: 210,
      type: 'button',
      showExpand: true,
      resizable: false,
...

then a list of default columns (the basic case):

defaultColumns: MtxGridColumn[] = [
    { header: 'Nosologico', field: 'nosologico', sortable: true },
    { header: 'Data ricovero', field: 'dataRicovero', sortable: true },
    { header: 'Data dimissione', field: 'dataDimissione', sortable: true },
...

in ngAfterViewInit() I do:

...
this.grid.columns = [this.actionColumn, ...this.defaultColumns];
...

when columns exceed the witdth of grid (creating the horizontal scroollbar), the first column will be resized too, despite I set a fixed witdth; as soon I resize a column the width of the first will be fixed back and looks good.

even if I add / remove column with columnMenuButton the same unwanted resize occurs.

wrong behavior (action button column width about 114px): image

right behavior (action button column width = 210px: image

It seems a kind of missing refresh issue... Thank you very much, r.

nzbin commented 5 months ago

Can you provide an online example?

SYS64738 commented 4 months ago

of course, here i wrote a simple Stackblitz project; I suspect the issue occurs when "resizable = true" on MtxGrid, even if a specific column (action in my case) is set to "resizable = false"

https://stackblitz.com/edit/angular-tqpzbd?file=src%2Fapp%2Fapp.component.ts

nzbin commented 4 months ago

https://stackblitz.com/edit/angular-n9apwr?file=src%2Fapp%2Fapp.component.ts

actionColumn: MtxGridColumn = {
   field: 'action',
   header: 'Azioni',
   pinned: 'left',
   disabled: true,
   left: '0px',
-  width: '210px',
   minWidth: 210,
+  maxWidth: 210,
   type: 'button',
   showExpand: true,
-  resizable: false,
   ...
}

In fact, the resizable feature is only the Angular Material experimental feature.

SYS64738 commented 4 months ago

it looks perfect! thank you very much!