Hi,
I'm trying to implement something like row dynamic height. On column render, I find an event with max value and set row height by it. It looks good but ... When I have more than one item in a cell of a row, height wrong and second event puts not at the bottom of the first.
How can I fix it?
Support Forum
Here my column config where I'm trying to change row height depends on the max value of an event in the row.
Also, I change event height depends on the event minutes value
my event render config:
I want to change row height depends on event(s) height and change event height depends on event value (minutes).
It is possible?
export const columnsConfig = [
{
type: 'tree',
text: 'Employees',
field: 'name',
width: '15em',
// Hide default tree icons
expandedFolderIconCls: null,
collapsedFolderIconCls: null,
leafIconCls: null,
htmlEncode: false,
renderer({ record, size, row }: { record: any, size: any, row: any }) {
if (!record.isParent) {
// row height by max event weight
if (record.events.length) {
const maxEvent = maxBy(record.events, (event: any) => event.minutes);
const eventMinutes = maxEvent.minutes;
let makeHeight = eventMinutes / 10 * 2 + 4;
if (makeHeight < 54) makeHeight = 58;
const eventHeight = makeHeight;
size.height = eventHeight;
}
const childTemplate = generateChildTemplate(record);
return childTemplate;
}
const parentTemplate = generateParentTemplate(record);
return parentTemplate;
}
}
];
my event render config:
export const eventRendererConfig = ({
tplData,
resourceRecord,
eventRecord
}: {
tplData: any;
resourceRecord: any;
eventRecord: any;
}) => {
if (resourceRecord.isParent) {
tplData.wrapperCls += ' employee parent ';
} else {
tplData.wrapperCls += ' child ';
}
tplData.wrapperCls += ' b-sch-event-team ';
const projectColor =
resourceRecord.parent.data.type === 'employee'
? resourceRecord.parent.data.color
: resourceRecord.data.color;
const projectTextColor = blackWhiteColor(projectColor);
const eventMinutes = eventRecord.data.minutes;
const eventHours = eventMinutes / 60;
let makeHeight = eventMinutes / 10 * 2;
if (makeHeight < 54) makeHeight = 54;
tplData.height = makeHeight;
const styleWrapper = `
background: #${projectColor};
`;
const layout = `
<div class="event-wrapper event-text-${projectTextColor}" style="${styleWrapper}">
<div>
<div class="event-parent-name">${resourceRecord.data.name}</div>
<div class="event-name">${resourceRecord.parent.data.name}</div>
</div>
<div>
<div class="event-hours event-hours-shadow">${eventHours}h</div>
</div>
</div>
`;
return layout;
};
I want to change row height depends on event(s) height and change event height depends on event value (minutes).
It is possible?