Syncfusion Scheduler Missalinted Rows в представлении временной шкалы ⇐ Javascript

[Anonymous]

Я использую планировщик Syncfusion в TimelineWeek View для управления календарем бронирования оборудования, организованного в иерархии ресурсов: < /p>
Категория → подкатегория → оборудование < /p>
Каждый элемент оборудования имеет очень длинное описание, и я отображаю его с использованием ресурса, как это: < /p>

< /p>
< /p> p> < /p> p> p> pr>
< /p> p>
< /p>
p> pret atembre atember atement wise efound at ancressertaute way, как: < /p>

resourceHeaderTemplate: props => {
const col = props.resourceData.color || '#eee';
return `
style="background:${col};color:${getContrastColor(col)}">
${props.resourceData.text}
`;
}
< /code>
Я включил Rowautoheight: true, а также используйте вспомогательную функцию, чтобы вручную синхронизировать высоту строк: < /p>
function forceContentRowHeightSync(retries = 10) {
const resTableRows = document.querySelectorAll('.e-resource-table tbody tr');
const contentTableRows = document.querySelectorAll('.e-content-table tbody tr.e-content-row');

const count = Math.min(resTableRows.length, contentTableRows.length);

for (let i = 0; i < count; i++) {
const resourceCell = resTableRows.querySelector('.my-resource-header');
const height = resourceCell ? resourceCell.offsetHeight : resTableRows.offsetHeight;

resTableRows.style.height = `${height}px`;
resTableRows.style.minHeight = `${height}px`;
contentTableRows.style.height = `${height}px`;
contentTableRows.style.minHeight = `${height}px`;
}

if (retries > 0) {
requestAnimationFrame(() => forceContentRowHeightSync(retries - 1));
}
}
< /code>
Эта функция называется внутри базы базы, контент-обработки и действий. Проблема:

Что я попробовал:

[*] Обнаружено rowautoheight: true [*] AllowRowHeightAdjustment: True
[*] Применял согласованное размещение с размером, прокладками и размером с шрифта к обеим сторонам
Применяемый CSS: Белое пространство: нормальный, переполненный WRAP: где-либо и т. Д. /> < /ul>
Существует ли официальный или рекомендуемый способ обеспечить правильное выравнивание высоты строки между таблицей ресурсов (слева) и таблицей содержания (справа) в представлениях о временных шкалах плана Syncfusion? window.scheduleObj = new ej.schedule.Schedule({
height: 'auto',
width: '100%',
rowAutoHeight: true,
allowRowHeightAdjustment: true,
selectedDate: new Date(2025, 5, 9),
locale: 'it',
cssClass: 'custom-scheduler',
currentView: 'TimelineWeek',
views: [
{ option: 'TimelineWeek', displayName: 'Settimana' },
{ option: 'TimelineMonth', displayName: 'Mese' },
{ option: 'Agenda', displayName: 'Agenda' }
],
agendaViewSettings: { allowVirtualScrolling: false, hideEmptyAgendaDays: false },
group: { resources: ['Categorie', 'Sottocategorie', 'Mezzi'], byGroupID: true, allowGroupEdit: false },
timeScale: { enable: false },
showQuickInfo: true,
allowResizing: false,
showHeaderBar: true,
eventSettings: {
dataSource: eventi,
fields: {
subject: { name: 'Subject', title: 'Titolo' },
startTime: { name: 'StartTime' },
endTime: { name: 'EndTime' },
isAllDay: { name: 'IsAllDay' }
}
},
resources: [
{
field: 'CategoriaId', title: 'Categoria', name: 'Categorie',
dataSource: risorse.categorie, textField: 'text', idField: 'id', colorField: 'color'
},
{
field: 'SottocategoriaId', title: 'Sottocategoria', name: 'Sottocategorie',
dataSource: risorse.sottocategorie, textField: 'text', idField: 'id',
groupIDField: 'groupID', colorField: 'color'
},
{
field: 'MezzoId', title: 'Mezzo', name: 'Mezzi',
dataSource: risorse.mezzi, textField: 'text', idField: 'id',
groupIDField: 'groupID', colorField: 'color'
}
],
resourceHeaderTemplate: props => {
const col = props.resourceData.color || '#eee';
return `
style="background:${col};color:${getContrastColor(col)}">
${props.resourceData.text}
`;
},
eventRendered: args => {
const sc = risorse.sottocategorie.find(x => x.id === args.data.SottocategoriaId);
const col = sc?.color || '#607d8b';
args.element.style.backgroundColor = col;
args.element.style.borderColor = col;
args.element.style.color = getContrastColor(col);
},
dataBound: () => setTimeout(() => forceContentRowHeightSync(), 100),
contentReady: () => setTimeout(() => forceContentRowHeightSync(), 100),
actionComplete: args => {
if (['view','dateNavigate','resourceExpand','resourceCollapse'].includes(args.requestType)) {
setTimeout(() => forceContentRowHeightSync(), 100);
}
}
});
scheduleObj.appendTo('#scheduleContainer');
});
< /code>
Это мой файл css < /p>
.e-resource-text,
.my-resource-header {
white-space: normal !important;
word-break: break-word;
overflow-wrap: anywhere;
}

.disabled-cell {
background-color: #ff0000 !important;
pointer-events: none;
opacity: 0.6;
}

.e-schedule .e-resource-column {
width: 130px !important;
max-width: none !important;
white-space: normal !important;
word-wrap: break-word;
}

.e-schedule .e-timeline-month-view .e-work-cells.e-parent-node.e-resource-group-cells.e-work-days,
.e-schedule .e-timeline-week-view .e-work-cells.e-resource-group-cells.e-work-hours,
.e-schedule .e-timeline-week-view .e-resource-group-cells,
.e-schedule .e-timeline-month-view .e-work-cells.e-parent-node.e-resource-group-cells {
background-color: #e8e5e5 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}

#scheduleContainer {
min-height: 600px;
overflow: visible;
position: relative;
}

.e-schedule .e-resource-table th,
.e-schedule .e-resource-table td,
.e-schedule .e-content-table th,
.e-schedule .e-content-table td {
box-sizing: border-box;
}

.my-resource-header {
padding: 8px 12px;
border-radius: 8px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
white-space: normal;
line-height: 1.2;
height: 100%;
box-sizing: border-box;
}

.custom-scheduler .e-resource-column .e-resource-cell {
overflow: hidden;
padding: 0 !important;
}

.custom-scheduler .e-content-table .e-work-cells,
.custom-scheduler .e-content-table .e-work-hours {
box-sizing: border-box;
padding: 8px 12px;
overflow: hidden;
}

.custom-scheduler .e-content-table tbody tr.e-content-row td {
box-sizing: border-box;
padding: 8px 12px;
}

.e-schedule .e-resource-table td,
.e-schedule .e-content-table td {
padding-top: 8px !important;
padding-bottom: 8px !important;
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... eline-view