Перейти к основному содержимому

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

Существует возможность изменить высоту отдельных строк в грид.

Библиотека dhtmlxGantt предоставляет 2 способа управления высотой строк:

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

Функциональность доступна в версиях 7.1 и выше.

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

Вы можете настроить высоту конкретной строки в соответствии с вашими потребностями.

заметка

Индивидуальная высота строки в настоящее время не совместима с static background rendering.

row_height

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

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

gantt.parse({
data: [
{ id: 11, text: "Project #1", type: "project", progress: 0.6, open: true,
row_height: 70, bar_height: 60 }, /*!*/
{ id: 12, text: "Task #1", start_date: "03-04-2018", duration: "5",
parent: "11", progress: 1, open: true },
{ id: 13, text: "Task #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.

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

resize_row

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

gantt.config.resize_rows = true;

Resizable rows in grid

Опция gantt.config.min_task_grid_row_height позволяет определить минимальную высоту строки, которая может быть задана для задачи во время изменения размера:

gantt.config.min_task_grid_row_height = 45;

События

Существует 4 события, которые можно использовать для управления поведением изменения размера строки при перетаскивании:

  • onBeforeRowResize - срабатывает перед тем, как пользователь начнет изменять высоту строки перетаскиванием
  • onRowResize - срабатывает во время перетаскивания границы строки для изменения высоты
  • onBeforeRowResizeEnd - срабатывает перед завершением изменения высоты строки
  • onAfterRowResize - срабатывает после завершения изменения высоты строки
Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.