Splitter in EJ2 TypeScript Gantt control

24 Jan 20247 minutes to read

Splitter

In the Gantt control, the Splitter separates the TreeGrid section from the Chart section. You can change the position of the Splitter when loading the Gantt control using the splitterSettings property. By splitting the TreeGrid from the chart, the width of the TreeGrid and chart sections will vary in the control. The splitterSettings.position property denotes the percentage of the TreeGrid section’s width to be rendered and this property supports both pixels and percentage values. You can define the splitter position as column index value using the splitterSettings.columnIndex property. You can also define the splitter position with built-in splitter view modes by using the splitterSettings.view property. The following list is the possible values for this property:

  • Default: Shows Grid side and Gantt side.
  • Grid: Shows Grid side alone in Gantt.
  • Chart: Shows chart side alone in Gantt.
import { Gantt } from '@syncfusion/ej2-gantt';
import { data } from 'datasource.ts';

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    },
    splitterSettings: {
        position: "50%"
    }
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/28.2.3/material.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>

Change splitter position dynamically

In Gantt, we can change the splitter position dynamically by using setSplitterPosition method. We can change the splitter position by passing value and type parameter to setSplitterPosition method. Type parameter will accept one of the following values ‘position’, ‘columnIndex’, ‘viewType’. The following code example shows how to use this method.

import { Gantt, Edit, Selection } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { data } from 'datasource.ts';

Gantt.Inject(Edit, Selection);

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    }
});

gantt.appendTo('#Gantt');

let splitBtn: Button = new Button();
splitBtn.appendTo('#changeByPosition');

let splittBtn: Button = new Button();
splittBtn.appendTo('#changeByIndex');

document.getElementById('changeByPosition').addEventListener('click', () => {
    gantt.setSplitterPosition('50%', 'position');
});

document.getElementById('changeByIndex').addEventListener('click', () => {
    gantt.setSplitterPosition(0, 'columnIndex');
});

let dropDownMode: DropDownList = new DropDownList({
     dataSource: [
            { id: 'Default', mode: 'Default' },
            { id: 'Grid', mode: 'Grid' },
            { id: 'Chart', mode: 'Chart' },
          ],
        fields: { text: 'mode', value: 'id' },
        value: 'Default',
         change: (e: ChangeEventArgs) => {
            let viewType: any = <string>e.value;
            gantt.setSplitterPosition(viewType, 'view');
        }
});
dropDownMode.appendTo('#view');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/28.2.3/material.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       
    <div id='loader'>Loading....</div>
    <div id='container'>
	
	  <div>
        <div style="padding-top: 7px; display: inline-block">Change Splitter View</div>
        <div style="display: inline-block">
        <input type="text" id="view">
     </div>
        </div>
		<button id="changeByPosition">Change Splitter By Position</button> <button id="changeByIndex">Change Splitter By ColumnIndex</button>
        <div id="Gantt"></div>   		
    </div>
</body>

</html>