Splitter in TypeScript Gantt Chart Control

18 Nov 20181 minute to read

The splitter in the TypeScript Gantt Chart control divides the TreeGrid pane and Chart pane, enabling flexible width allocation for project visualization. Configured via the splitterSettings property, the splitter supports pixel or percentage-based positioning, column-based alignment, and predefined view modes. The setSplitterPosition method adjusts positioning dynamically, while the splitterResizeStart, splitterResizing, and splitterResized events handle resize interactions. The splitter includes ARIA labels for accessibility, ensuring screen reader compatibility, and adapts to responsive designs, though narrow screens may limit visible columns or timeline segments. By default, both panels are visible with equal width.

Configure splitter position

Set the splitter position using splitterSettings.position with pixel (e.g., “300px”) or percentage (e.g., “30%”) values to define the TreeGrid pane width, or align to a column edge with splitterSettings.columnIndex.

The following example sets a percentage-based splitter position. This configuration allocates 50% width to the TreeGrid panel.

If both position and columnIndex are defined in splitterSettings, only position is applied because it takes precedence over columnIndex.

Configure view modes

Set predefined view modes with splitterSettings.view:

• Default: Displays both TreeGrid and Chart panels.
• Grid: Shows only the TreeGrid panel for data-focused views.
• Chart: Shows only the Chart panel for timeline visualization.

The following example configures the Grid view mode. This configuration prioritizes the TreeGrid for detailed task analysis.

Adjust splitter position dynamically

Change the splitter position using the setSplitterPosition method with pixel, percentage, or column index values, triggered by events like window resizing or button clicks.

The following example adjusts the splitter dynamically:

Customize splitter appearance

Customize the splitter’s appearance in the Gantt Chart control by handling the dataBound, splitterResizing and splitterResized events to dynamically adjust styles, such as the background color or visibility of the resize handler. This enhances visual feedback during splitter interactions, improving usability for resizing the TreeGrid and Chart panels. The splitter retains ARIA labels for accessibility, ensuring screen reader compatibility.

The following example customizes the splitter’s background and hides the resize handler during resizing: