We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Setting splitter position by index not working


I'm trying to set the position of the splitter between the grid and the gantt based on the index of the last column of the grid, but the splitter doesn't position exactly to the right but covers part of the column.

This is the code I'm using to setting the position:

this.ganttInstance.setSplitterPosition(5, 'columnIndex');

I also tried by using other numbers (1,2,3,4..) without success, only 0 seems to work correctly, but it just set the position of the splitter on the far left covering the whole grid.
Could you kindly verify if there is an issue with the setSplitterPosition? Thank you in advance.

Best regards,
Matteo Messmer

6 Replies 1 reply marked as answer

UA Udhayakumar Anand Syncfusion Team March 23, 2023 12:03 PM UTC

Hi Matteo Messmer

We have reviewed your query, and unfortunately, we are unable to replicate the issue that you have reported. However, we have provided you with a sample where we changed the splitter position using setSplitterPosition method on button click. You can find the code snippet and sample link below

Code Snippet


            let ganttInstance;

            function changeindex() {

                  ganttInstance.setSplitterPosition(2, 'columnIndex');


          <ButtonComponent onClick={changeindex}>ChangeByIndex</ButtonComponent>

Sample : https://stackblitz.com/edit/react-dvt1ja-42bpcb?file=index.js

To help us better understand the issue you are facing, could you please provide us with more information by answering the following questions?

  1. In what event are you trying to change the splitter position?
  2. Please make sure that the required number of columns is present while setting the splitter position using columnIndex. If you set the column index higher without the actual column present, you might face this error.
  3. Could you please modify the sample provided and replicate the issue? This will be helpful for us to validate further.



MA matteomessmer March 23, 2023 02:16 PM UTC

Hi Udhayakumar,

Thank you for your response, I think it has to do with the fact I'm resizing my screen or the columns before calling the setSplitterPosition function.

If I take your sample and resize the panel, then the ChangeByIndex button doesn't work as I would expect.

My final goal when I open the gantt would be to have the grid columns automatically resized based on content (which I've achieved) and then use the remaining space for the gantt, that's why I was using the setSplitterPosition function.

Could you verify if this

Best regards,

Matteo Messmer

UA Udhayakumar Anand Syncfusion Team March 24, 2023 02:47 PM UTC

Hi Matteo Messmer

We have reviewed your query and forwarded it to our dependent component for further validation; we will contact you with additional information within two business days. March 28 2023

Until then we appreciate your patience



UA Udhayakumar Anand Syncfusion Team April 19, 2023 01:41 PM UTC

Matteo Messmer

Query 1

automatically resized based on content


To achieve your requirement of resizing the grid columns based on content and using the remaining space for the Gantt chart, we suggest calculating the column length inside the created event and passing that value to the setSplitterPosition method. This will help render the splitter based on the grid content, and you will be able to use the remaining space for the Gantt chart.


We have included a code snippet and sample link below that will help you achieve this requirement.



Code Snippet :


function created(args) {

    var length = ganttInstance.columns.length;

    ganttInstance.setSplitterPosition(length, 'columnIndex');





Sample Link : https://stackblitz.com/edit/react-dvt1ja-w7dygp?file=index.js



Query 2

resize the panel, then the ChangeByIndex button doesn't



We have reviewed your query and have recognized this as a bug. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming patch release which is expected to be rolled out on May 10, 2023. You can track its status from the feedback link provided below.


FeedBack  : https://www.syncfusion.com/feedback/43010/gantt-chart-splitter-position-is-not-updated-after-resizing-the-pane


Note: To view the above feedback, kindly login into your account. 


Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization




UA Udhayakumar Anand Syncfusion Team May 10, 2023 02:08 PM UTC

Hi Matteo

We have generated a custom patch for your fix. Please refer to the below instructions for using the patch

How to use the patch:

  1. Extract the .zip folder. You will receive a .tar file within.
  2. Extract the .tar file. There will be a folder named package within.
  3. Copy the contents of this folder.
  4. In the node modules folder of your application, go to @syncfusion -> ej2-gantt.
  5. Replace the contents of this folder with the previously copied files.

Custom Patch: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-gantt-21.2.4-912562940

Note: We will include the fix in our next weekly patch release which will scheduled to be rolled out on end of May 17th 2023



UA Udhayakumar Anand Syncfusion Team May 18, 2023 10:54 AM UTC

Matteo Messmer

Thank you for your patience.

We are glad to announce that fix for the issue “Splitter position is not updated after resizing the pane” has been rolled out in our patch release (v21.2.5). So please upgrade to our latest version to resolve the problem.

Please contact us if you require any further assistance.



Marked as answer
Live Chat Icon For mobile
Up arrow icon