Our blazing fast Grid component built with pure JavaScript


Post by bensullivan »

Hi

I'm trying to edit a cell in a new column which I have added dynamically as part of a column group. The column group is in the middle region of a grid with three regions (left, middle and right):
addMonth(startMonth, startYear) {
    const newMonthColGroupSuffix = '112019';
    const newMonthCapacityFieldName = `capacity${newMonthColGroupSuffix}`;
    const newMonthNumWorkDaysFieldName = `numWorkingDays${newMonthColGroupSuffix}`;
    const newMonthForecastFieldName = `forecast${newMonthColGroupSuffix}`;
    const newMonthActualFieldName = `actual${newMonthColGroupSuffix}`;
    const newMonthTotalFieldName = `total${newMonthColGroupSuffix}`;
    this.fieldNames.push(newMonthCapacityFieldName);
    this.fieldNames.push(newMonthNumWorkDaysFieldName);
    this.fieldNames.push(newMonthForecastFieldName);
    this.fieldNames.push(newMonthActualFieldName);
    this.fieldNames.push(newMonthTotalFieldName);
    const store = new Store({
      fields: this.fieldNames,
      data: (this.gridEngine.store as Store).records.map(r => r.data)
    });
    store.commit();
    this.gridEngine.store = store;
    this.gridEngine.refreshRows();
    this.gridEngine.columns.add({
    text: 'November 2019',
    align: 'center',
    cls: 'labour-month',
    children: [
      { field: newMonthCapacityFieldName, text: '%', type: 'percent', draggable: false, lowThreshold: -1, width: 53, align: 'center', region: 'middle'},
      { field: newMonthNumWorkDaysFieldName, text: '#<br>Days', type: 'number', draggable: false, width: 53, align: 'center', region: 'middle' },
      { field: newMonthForecastFieldName, text: 'Forecast<br>$', type: 'number', draggable: false, width: 81, align: 'center', region: 'middle' },
      { field: newMonthActualFieldName, text: 'Actual<br>$', type: 'number', draggable: false, width: 81, align: 'center', region: 'middle' },
      { field: newMonthTotalFieldName, text: 'Total<br>$', type: 'number', draggable: false, width: 81, align: 'center', region: 'middle' }
    ]
    });
  }
The new column is displayed but when I double click to edit I get the following error:
ERROR TypeError: Cannot read property 'scrollable' of undefined
    at _0x5a2c48.scrollRowIntoView (grid.umd.js:16)
    at _0x5a2c48.focusCell (grid.umd.js:16)
    at _0x5a2c48.onFocusGesture (grid.umd.js:16)
    at _0x5a2c48.onElementMouseDown (grid.umd.js:16)
    at _0x9cb29a.functionChainRunner (grid.umd.js:12)
    at _0x5a2c48._0x57b509.<computed> [as onElementMouseDown] (grid.umd.js:12)
    at _0x5a2c48.handleEvent (grid.umd.js:16)
    at HTMLDivElement.handler (grid.umd.js:11)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
I have attached an example ng8 project code for you to reproduce...

Would really appreciate some advice on how to get this working!

Thanks!

Ben
Attachments
ng8-region-column-group-uneditable-problem.zip
(4.42 MiB) Downloaded 169 times

Post by pmiklashevich »

Hello,

I checked your testcase this morning. There are 3 problems. The first one is that the grid doesn't support adding subGrids automatically. I've created a feature request for that: https://app.assembla.com/spaces/bryntum/tickets/9448-adding-columns-to-region-that-does-not-exist-has-to-create-new-subgrid-aut/details Meanwhile you can workaround it by adding a dummy hidden column to the region you need.
columns = [
    ...
    {
      region : 'middle',
      hidden: true
    }
  ];
The second problem is that your "personRoleId" is configured with both "locked" and "region"
    {
      field: 'personRoleId',
      ...
      locked: true,
      region: 'left',
Need to use either "locked" or "region". Please refer to the docs:
https://www.bryntum.com/docs/grid/#Grid/column/Column#config-locked
https://www.bryntum.com/docs/grid/#Grid/column/Column#config-region

To debug your application and see what regions are defined, you can run in console:
bryntum.query('grid').subGrids
With no dummy column I mentioned above it returns
{locked: _0x14256d, normal: _0x14256d}
With the dummy column it returns
{locked: _0x14256d, middle: _0x14256d, normal: _0x14256d}
When I removed "locked : true" from "personRoleId" definition it returns:
{left: _0x14256d, middle: _0x14256d, normal: _0x14256d}
Normal region is created due to "labourAssignmentId" column definition. It has no "region" config in it, so it defaults to "normal"
  columns = [
    {
      field: 'labourAssignmentId',
      hidden: true
    },
Removing the column makes subGrids looks like this:
{left: _0x14256d, middle: _0x14256d}
If you want to set 3 regions by default need to add another hidden column. examples/angular/ng8/src/app/work-item/money/labour-grid/labour-grid.component.ts
  columns = [
    {
      field: 'personRoleId',
      text: 'Person / Role',
      editor: {
        type: 'dropdown',
        store: this.personRoleComboStore,
        displayField: 'text',
        valueField: 'id',
        clearable: true,
        editable: false,
        listeners: {
          focusin: this.personRoleComboFocusInHandler
        }
      },
      renderer: this.personRoleRenderer,
      draggable: false,
      region: 'left',
      align: 'center',
      width: 150
    },
    {
      region : 'middle',
      hidden : true
    },
    {
      region : 'right',
      hidden : true
    }
  ];
bryntum.query('grid').subGrids
//{left: _0x14256d, middle: _0x14256d, right: _0x14256d}
And the last problem is that need to specify "region" and "width" for the group column. Subcolumns can have their own width or configured with "flex". examples/angular/ng8/src/app/work-item/money/labour-grid/bryntum-grid/bryntum-grid.component.ts
    this.gridEngine.columns.add({
    text: 'November 2019',
    align: 'center',
    cls: 'labour-month',
      region: 'middle',
      width : 349,
    children: [
      { field: newMonthCapacityFieldName, text: '%', type: 'percent', draggable: false, lowThreshold: -1, width: 53, align: 'center', region: 'middle'},
      { field: newMonthNumWorkDaysFieldName, text: '#<br>Days', type: 'number', draggable: false, width: 53, align: 'center', region: 'middle' },
      { field: newMonthForecastFieldName, text: 'Forecast<br>$', type: 'number', draggable: false, flex: 1, align: 'center', region: 'middle' },
      { field: newMonthActualFieldName, text: 'Actual<br>$', type: 'number', draggable: false, flex: 1, align: 'center', region: 'middle' },
      { field: newMonthTotalFieldName, text: 'Total<br>$', type: 'number', draggable: false, flex: 1, align: 'center', region: 'middle' }
    ]
    });
Снимок экрана 2019-11-06 в 12.48.48.png
Снимок экрана 2019-11-06 в 12.48.48.png (276.34 KiB) Viewed 2153 times
Best regards,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by bensullivan »

Thanks!

Do you know why the columns don't line up if multiple column groups are added?
Screen Shot 2019-11-06 at 21.26.04.png
Screen Shot 2019-11-06 at 21.26.04.png (67.24 KiB) Viewed 2152 times
And also it seems as though the new children columns default to the same value as the previous column group child instead of 0 (see # Days). Why is this?

Thanks again!

Post by pmiklashevich »

I'm not sure how to reproduce. I've tried to add it few times and everything is aligned. Please see:
Снимок экрана 2019-11-06 в 15.03.23.png
Снимок экрана 2019-11-06 в 15.03.23.png (187.91 KiB) Viewed 2150 times
I'll attach zip here, so you can compare to your version. It it still doesn't work for you please produce more info of you environment, browser, version, etc.
Attachments
ng8.zip
(4.36 MiB) Downloaded 166 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by bensullivan »

Thanks so much for you help pmiklashevich!

I downloaded your zip. It looks like you have the same issue too as long as you add column groups that cause horizontal grid expansion beyond the screen. The left region also appears to shrink as more columns are added. here's the screencast:

https://www.dropbox.com/s/409teh1m5nnac0u/Screen%20Recording%202019-11-07%20at%2012.44.39.mov?dl=0

Any ideas?

Thanks again!

Post by pmiklashevich »

Hello,

I've checked your testcase again and paid attention that "subGridConfigs" is not passed to the Grid
bryntum.query('grid').subGridConfigs
//locked: {}
//middle: {}
//normal: {flex: 1}
//right: {}
configInputs in src/app/work-item/money/labour-grid/bryntum-grid/bryntum-grid.component.ts should have "subGridConfigs" so it's used in the config when "new Grid(config)" is called.
const configInputs = [
  'subGridConfigs',
Now it's equal to what is specified src/app/work-item/money/labour-grid/labour-grid.component.ts
//left: {width: 355}
//locked: {}
//middle: {width: 700}
//right: {width: 110}
In src/app/work-item/money/labour-grid/labour-grid.component.ts let's remove "locked: true," so left region is used instead and use flex instead of width:
      // locked: true,
      region: 'left',
      align: 'center',
      // width: 150
      flex : 1
It's not necessary but I would recommend to use flex with one of the region:
  subGridConfigs = {
    left : {
      width : 355
    },
    middle : {
      flex : 1
    },
    right : {
      width : 110
    }
  };
And please change new columns config like this:
    this.gridEngine.columns.add({
      text: 'November 2019',
      align: 'center',
      cls: 'labour-month',
      region: 'middle',
      children: [
        { field: newMonthCapacityFieldName, text: '%', type: 'percent', draggable: false, lowThreshold: -1, width: 53, align: 'center', region: 'middle'},
        { field: newMonthNumWorkDaysFieldName, text: '#<br>Days', type: 'number', draggable: false, width: 53, align: 'center', region: 'middle' },
        { field: newMonthForecastFieldName, text: 'Forecast<br>$', type: 'number', draggable: false, width: 81, align: 'center', region: 'middle' },
        { field: newMonthActualFieldName, text: 'Actual<br>$', type: 'number', draggable: false, width: 81 , align: 'center', region: 'middle' },
        { field: newMonthTotalFieldName, text: 'Total<br>$', type: 'number', draggable: false,  width: 81, align: 'center', region: 'middle' }
      ]
    });
Let me know please if it works for you now.

Cheers,
Pavel
Attachments
ng8-v2.zip
(4.36 MiB) Downloaded 134 times

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply