[ANGULAR] Brytum Grid is not responsive for large content in Brytum Scheduler Grid

[abisht]

Hi,
I have a column, which needs to show full driver name. Issues is, bryntum grid is not able to fit the content properly. Can you please help how to sort this issue?

Attachment :

Screen Shot 2020-09-24 at 6.59.31 PM.png (83.41 KiB) Viewed 1392 times

[saki]

You can implement https://bryntum.com/docs/scheduler/#Scheduler/view/SchedulerBase#config-getRowHeight method that can test if the drivers' names are too long for the default row height and return the increased height if yes.

[abisht]

Hi Saki, thanks for the quick reply. Can you please help me, how to add this function in Angular 8. This is my config :

export default {
  id: 'resourcesScheduler',
  barMargin: 10,
  scheduleContextMenuFeature: {
    items: {
      addEvent: false
    }
  },
  eventEdit: {
    extraItems: [
      {
        type: 'text',
        name: 'startDirection',
        label: 'Start Direction',
        index: 1
      },
      {
        type: 'text',
        name: 'endDirection',
        label: 'End Direction',
        index: 2
      }
    ]
  },
  eventDragFeature: {
    constrainDragToTimeline: false,
    showExactDropPosition: true,
    dragHelperConfig: {
      cloneTarget: true,
      hideOriginalElement: false
    }
  },
  eventResizeFeature: false,
  events: [],
  resources: [],
  rowHeight: 50,
  timeRanges: {
    showCurrentTimeLine: true
  },
  selectionMode: {
    checkbox: true,
    row: true,
    showCheckAll: true
  },
  columns: [
    {
      text: '',
      field: 'id',
      resizable: false,
      width: 150,
      hidden: true
    },
    {
      text: 'Shipment ID',
      field: 'shipmentName',
      resizable: false,
      width: 150
    },
    {
      text: 'Trip ID',
      field: 'tripId',
      resizable: false,
      width: 70
    },
    {
      text: 'Shipment(s)',
      field: 'shipments',
      hidden: false,
      htmlEncode: false,
      resizable: false,
      width: arrayColumnWidth,
      renderer: ({ value }) => arrayToString(value)
    },
    {
      text: 'Driver(s)',
      field: 'drivers',
      hidden: false,
      htmlEncode: false,
      resizable: false,
      width: arrayColumnWidth,
      renderer: ({ record }) => {
        return record.drivers && record.drivers.length > 0 ? record.drivers.map(data => data.driverName).join(', ') : '';
      },
      // TODO: Update with DriverAvatarGroup component when profile picture are enabled
      // renderer: ({ value }) => `<app-driver-avatar-group drivers='${JSON.stringify(value)}'></app-driver-avatar-group>`,
    },
    {
      text: 'Tractor(s)',
      field: 'trucks',
      hidden: false,
      resizable: false,
      width: arrayColumnWidth,
      renderer: ({ value }) => arrayToString(value)
    },
    {
      text: 'Trailer(s)',
      field: 'trailers',
      hidden: false,
      resizable: false,
      width: arrayColumnWidth,
      renderer: ({ value }) => arrayToString(value)
    }
  ]
};

[fabio.mazza]

Hi abisht,

The https://bryntum.com/docs/scheduler/#Scheduler/view/SchedulerBase#config-getRowHeight you can define on the config of your scheduler:

const schedulerConfig = {
    ...
    getRowHeight : () => {
        // here your logic
        console.log('getRowHeight')
    },
    ...
};

and on your html component:

<bry-scheduler
    #scheduler
    ...
    [getRowHeight]      = "schedulerConfig.getRowHeight"
    ...
</bry-scheduler>

This time you have to add this config for the wrap, but I have created an issue (you can track here: https://github.com/bryntum/support/issues/1587) to add it then after that issue be closed you can revert your changes on wrap. The changes apply for Scheduler/examples/angular/_shared/projects/bryntum-angular-shared/src/lib/scheduler.component.ts file. Add for configs:

private configs: string[] = [
        ...
        'getRowHeight',
        ...

and then, add an input:

...
@Input() getRowHeight: any;
...

Any question, please let us know.

[abisht]

Thanks a lot Fabio. I will try.

[pmiklashevich]

Please also check out this guide. https://www.bryntum.com/docs/scheduler/#guides/integration/angular.md
Search for "Supported properties", "Supported features", "Adding properties which are not supported by default". Angular wrapper is a part of the examples and contains only part of the vanilla Scheduler API. Feel free to modify it the way you need.
Cheers!

[abisht]

Thank you pmiklashevich for the link.