Экран пустого состояния

Начиная с версии v8.0, библиотека предоставляет возможность отображать пустой экран ("empty state") с элементом-заглушкой в гриде, если данные не загружены в диаграмму Gantt.

По умолчанию элемент-заглушка скрыт. Чтобы показать его, используйте конфигурацию show_empty_state:

gantt.config.show_empty_state = true;

Показать экран пустого состояния

Объект 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 className='gantt_empty_state_text'>
    <div className='gantt_empty_state_text_link' data-empty-state-create-task>
       ${gantt.locale.labels.empty_state_text_link}</div>
    <div className='gantt_empty_state_text_description'>
       ${gantt.locale.labels.empty_state_text_description}</div>
    </div>`;
    const placeholderImageElement = "<div className='gantt_empty_state_image'></div>";

    const placeholderContainer = `<div className='gantt_empty_state'>
       ${placeholderImageElement}${placeholderTextElement}</div>`;
    container.innerHTML = placeholderContainer;
}