Change Splitter position at load
15 Oct 20232 minutes to read
In Gantt control, Splitter separates the TreeGrid section from the Chart section and is possible to change the position of the Splitter while loading the Gantt by using the splitterSettings
property, thereby varying the width of the TreeGrid and Chart sections in the control. splitterSettings.position
property denotes the percentage of the TreeGrid section’s width to be rendered and this property supports both pixels and percentage values.
And also we can define the splitter position as column index value by using splitterSettings.index
property.
The following code example explains how to define the splitterSettings.position
property in the Gantt.
$("#gantt").ejGantt({
// ...
splitterSettings: {
position: "50%",
},
//also you can define with pixel value as
//‘ splitterSettings: { position: "650" } (or) ‘ splitterSettings: { position: "650px" } ’
//you can define splitter index value as below
//splitterSettings: {
// index: 3,
//},
});
NOTE
We can define the splitter position value by using
splitterPosition
property also, but this property was deprecated withsplitterSettings.position
property.
Change splitter position dynamically
15 Oct 20232 minutes to read
In Gantt, we can change the splitter position dynamically by using setSplitterPosition
and setSplitterIndex
methods. The following code example shows how to use this methods.
$("#gantt").ejGantt({
// ...
splitterSettings: {
position: "50%",
},
});
$("#set_position").click(function () {
$("#gantt").ejGantt("setSplitterPosition", "400");
});
$("#set_index").click(function () {
$("#gantt").ejGantt("setSplitterIndex", 3);
});
You can find the JS playground sample for this methods here.