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.

JAVASCRIPT

$("#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,
            //},

    });

Gantt with 30% splitter position

Gantt with 50% splitter position

Gantt with 600px splitter position

Gantt splitter positioned on third indexed column.

NOTE

We can define the splitter position value by using splitterPosition property also, but this property was deprecated with splitterSettings.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.

JAVASCRIPT

$("#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.