Cannot read properties of null (reading 'id')

[janan]

'resizeToFitContent' does not work when the record is empty. We do not want to send empty records. I have attached the screenshot for the bug.

Is there any work around for this?

Screenshot 2022-04-11 at 13.43.48.png (218.57 KiB) Viewed 346 times

[mats]

How can we reproduce this error?

[janan]

In the following example https://www.bryntum.com/examples/grid/php/ replace the code as follows. Click the button 'Test me for resize'

const grid = new Grid({

appendTo : 'container',

features : {
    cellEdit : true
},

columns : [
    {
        text   : 'Id',
        field  : 'id',
        width  : 100,
        editor : false,
        renderer({ record, cellElement, value }) {
            if (record.hasGeneratedId) {
                cellElement.classList.add('dirty');
                return '';
            }
            return value;
        }
    },
    { text : 'Brand', field : 'brand', flex : 1 },
    { text : 'Model', field : 'model', flex : 1 },
    { text : 'Modified', field : 'dt', width : 100, type : 'date', format : 'HH:mm:ss', editor : false, align : 'center' },
    {
        width   : 50,
        icon    : 'b-fa b-fa-trash',
        type    : 'widget',
        align   : 'center',
        widgets : [{
            type     : 'button',
            icon     : 'b-fa b-fa-trash',
            cls      : 'b-red',
            onAction : ({ source : btn }) => btn.cellInfo.record.remove()
        }]
    }
],
  data: [
  {
    "id": 1,
    "brand": "Volvo",
    "model": "V90",
    "dt": "2022-04-11 16:09:44"
  },
  {
    "id": 2,
    "brand": "Volvo",
    "model": "XC60",
    "dt": "2022-04-11 16:09:44"
  },
  {
    "id": 3,
    "brand": "BMW",
    "model": "M3",
    "dt": "2022-04-11 16:09:44"
  },
  {
    "id": 4,
    

  },
  {
    "id": 5,
    "brand": "Peugeot",
    "model": "308",
    "dt": "2022-04-11 16:09:44"
  }
],

   

tbar : [
   
    {
        type     : 'button',
        ref      : 'addButton',
        icon     : 'b-fa-plus',
        text     : 'Test me for resize',
        tooltip  : 'Adds a new row (at bottom)',
      onAction : () => {
      
      var length = grid.columns.leaves.length, columns = grid.columns;
      for (var i=0; i <length; i++) {
       columns[i].resizeToFitContent();
      }
       }

 },    
         ]
})

[mats]

Ok, you can't destructure "columns" like that. Correct code:

onAction : () => {
    grid.columns.visibleColumns.forEach(col => col.resizeToFitContent());
}