Изменение размера строк в гриде

Вы можете настроить высоту отдельных строк в гриде.
Библиотека dhtmlxGantt предлагает два способа управления высотой строк:

  • Установкой высоты строки и высоты полосы задачи для конкретного объекта задачи;
  • Перетаскиванием нижней границы строки грида.

Эта функция доступна начиная с версии 7.1.

Установка высоты строки

Можно изменить высоту конкретной строки по мере необходимости.

Индивидуальная высота строки на данный момент не работает с отображением статического фона.

Для этого обновите свойства row_height и bar_height объекта задачи в вашем наборе данных:

Указание типа задачи в наборе данных

gantt.parse({
    data: [
        { id: 11, text: "Проект #1", type: "project", progress: 0.6, open: true, 
            row_height: 70, bar_height: 60 },         { id: 12, text: "Задача #1", start_date: "03-04-2018", duration: "5", 
            parent: "11", progress: 1, open: true },
        { id: 13, text: "Задача #2", start_date: "03-04-2018", type: "project", 
            parent: "11", progress: 0.5, open: true }
    ],
    links: []
});

В качестве альтернативы, вы можете внести эти изменения динамически:

gantt.getTask(11).row_height = 50;
gantt.getTask(11).bar_height = 25;
// перерисовать Gantt для применения изменений
gantt.render();

Если свойства row_height и bar_height не указаны или остаются пустыми (значение по умолчанию), будут применены значения из gantt.config.row_height и gantt.config.bar_height.

Изменение размера строк с помощью перетаскивания

Если вы хотите позволить пользователям изменять размер строк в гриде путем перетаскивания нижней границы, включите опцию gantt.config.resize_rows, установив ее в значение true:

gantt.config.resize_rows = true;

Related sample:  Resizable rows in grid

Вы также можете определить минимальную высоту строки при изменении размера с помощью опции gantt.config.min_task_grid_row_height:

gantt.config.min_task_grid_row_height = 45;

События

При изменении размера строк путем перетаскивания доступны 4 события для управления процессом:

  • onBeforeRowResize - срабатывает перед началом изменения высоты строки пользователем
  • onRowResize - срабатывает, пока пользователь перетаскивает границу строки для изменения высоты
  • onBeforeRowResizeEnd - срабатывает перед завершением процесса изменения размера
  • onAfterRowResize - срабатывает после завершения изменения размера
К началу