Change-Splitter-position.md

layout	title	description	platform	control	documentation
post	Change-Splitter-position in JavaScript Gantt | Syncfusion	Learn here about change splitter position with Syncfusion JavaScript Gantt control, its elements, and more.	js	Gantt	ug

Change Splitter position at load

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.

{% highlight 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,
        //},

});

{% endhighlight %}

Gantt with 30% splitter position {:.caption}

Gantt with 50% splitter position {:.caption}

Gantt with 600px splitter position {:.caption}

Gantt splitter positioned on third indexed column. {:.caption}

N> 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

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.

{% highlight javascript %}

$("#gantt").ejGantt({
    // ...     
    splitterSettings: {
        position: "50%",
    },
});

$("#set_position").click(function () { $("#gantt").ejGantt("setSplitterPosition", "400"); });

$("#set_index").click(function () { $("#gantt").ejGantt("setSplitterIndex", 3); });

{% endhighlight %}

You can find the JS playground sample for this methods here.