Splitter in Vue Gantt component
11 Jun 202412 minutes to read
Splitter
In the Gantt component, the Splitter separates the TreeGrid section from the Chart section. You can change the position of the Splitter when loading the Gantt component using the splitterSettings property. By splitting the TreeGrid from the chart, the width of the TreeGrid and chart sections will vary in the component. 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.
<template>
<div>
<ejs-gantt id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
:splitterSettings="splitterSettings"></ejs-gantt>
</div>
</template>
<script setup>
import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings = {
position: "50%"
};
</script><template>
<div>
<ejs-gantt id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :splitterSettings="splitterSettings"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data: editingData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings:{
position: "50%"
},
};
},
};
</script>Change splitter position dynamically
In Gantt, we can change the splitter position dynamically by using setSplitterPosition method. Either We can change the splitter position with splitter position or columnIndex values by passing these values as arguments to setSplitterPosition method. The following code example shows how to use this methods.
<template>
<div>
<ejs-button id="changebypostion" cssClass="e-info" v-on:click.native="changep">Change By Postion</ejs-button>
<br><br><br>
<ejs-button id="changebyindex" cssClass="e-info" v-on:click.native="changei">Change By Index</ejs-button>
<br><br><br>
<table>
<tr>
<td style="width: 70%">
<ejs-dropdownlist id="splitter-type" value='Default' :dataSource="dataSource" :fields="fields"
:change="change"> Splitter View </ejs-dropdownlist>
</td>
</tr>
</table>
<ejs-gantt id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
import { editingData } from './data-source.js';
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const dataSource = [
{ id: 'Default', mode: 'Default' },
{ id: 'Grid', mode: 'Grid' },
{ id: 'Chart', mode: 'Chart' },
];
const fields = { text: 'mode', value: 'id' };
const changep = function (e) {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.setSplitterPosition('50%', 'position');
}
const changei = function (e) {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.setSplitterPosition(1, 'columnIndex');
}
const change = function (e) {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
var viewType = e.value;
ganttChart.setSplitterPosition(viewType, 'view');
}
</script><template>
<div>
<ejs-button id="changebypostion" cssClass="e-info" v-on:click.native="changep">Change By Postion</ejs-button>
<br><br><br>
<ejs-button id="changebyindex" cssClass="e-info" v-on:click.native="changei">Change By Index</ejs-button>
<br><br><br>
<table>
<tr>
<td style="width: 70%">
<ejs-dropdownlist id="splitter-type" value='Default' :dataSource="dataSource" :fields = "fields" :change ="change"> Splitter View </ejs-dropdownlist>
</td>
</tr>
</table>
<ejs-gantt id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-dropdownlist":DropDownListComponent,
"ejs-gantt":GanttComponent
},
data: function() {
return{
data: editingData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
dataSource: [
{ id: 'Default', mode: 'Default' },
{ id: 'Grid', mode: 'Grid' },
{ id: 'Chart', mode: 'Chart' },
],
fields: { text: 'mode', value: 'id' },
};
},
methods: {
changep: function(e){
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.setSplitterPosition('50%', 'position');
},
changei: function(e){
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.setSplitterPosition(1, 'columnIndex');
},
change: function (e) {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
var viewType = e.value;
ganttChart.setSplitterPosition(viewType, 'view');
}
},
};
</script>