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 :
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.
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)
}
]
};
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.
Best regards,
Fabio
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!
Pavlo Miklashevych
Sr. Frontend Developer