Экран пустого состояния
Начиная с версии 8.0, библиотека поддерживает отображение пустого экрана ("пустое состояние") с элементом-заполнителем в гриде, когда в диаграмме Gantt не загружены данные.
По умолчанию элемент-заполнитель скрыт. Чтобы включить его, установите следующую настройку:
gantt.config.show_empty_state = true;
Related sample: Show empty state screen
Объект EmptyStateElement
Функционал "пустого состояния" предоставляет различные методы API через расширение emptyStateElement.
Пустое состояние может отображаться не только когда в Gantt не загружено ни одной задачи, но и когда задачи загружены, но отфильтрованы и не видны на странице. Для обработки этой ситуации используйте метод isEnabled():
gantt.ext.emptyStateElement.isEnabled = function (){
return !gantt.getVisibleTaskCount().length;
}
Если вы хотите показывать пустое состояние в области временной шкалы вместо грида, используйте метод getContainer():
gantt.ext.emptyStateElement.getContainer = function() {
return gantt.$task_data.closest(".gantt_layout_content");
};
Чтобы настроить содержимое, отображаемое в пустом состоянии, переопределите метод renderContent():
gantt.ext.emptyStateElement.renderContent = function (container) {
const placeholderTextElement = `<div class='gantt_empty_state_text'>
<div class='gantt_empty_state_text_link' data-empty-state-create-task>
${gantt.locale.labels.empty_state_text_link}</div>
<div class='gantt_empty_state_text_description'>
${gantt.locale.labels.empty_state_text_description}</div>
</div>`;
const placeholderImageElement = "<div class='gantt_empty_state_image'></div>";
const placeholderContainer = `<div class='gantt_empty_state'>
${placeholderImageElement}${placeholderTextElement}</div>`;
container.innerHTML = placeholderContainer;
}