Splitter in React Gantt component

13 Dec 202319 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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
    const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const splitterSettings = {
      position: "80%"
    };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} height = '450px'>
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
    const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const splitterSettings: any = {
      position: "80%"
    };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        splitterSettings={splitterSettings} height = '450px'>
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Changing splitter view

In the Gantt component, it is possible to change the view of the component to a grid view, a chart view, or both using the dropdown menu. This can be achieved by customizing the toolbar, which allows to add custom toolbar items using the template attribute.
Refer below link for more details.

To add a custom dropdown menu to the toolbar, use the DropDownList component which is available in @syncfusion/ej2-react-dropdowns library.

After enabling the dropdown menu in the toolbar, pass the data to the dataSource property. To modify the component’s view, use the change property. To do this, call the setSplitterPosition method on the ganttInstance with the value and type of splitter property as an parameter, after checking with the user’s choice and the given data condition is true.

The following code example shows, how to enable the dropdown menu in the Toolbar and change view of the Gantt component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject,Toolbar } from '@syncfusion/ej2-react-gantt';
import { DropDownList } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
function App() {
  
  let ganttInstance;

  const taskFields= {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'    
  };
  
  function onChange(args) {
    if(args.value==="1")
    {
      ganttInstance.setSplitterPosition("100%","position")
    }
    else if(args.value==="2")
    {
      ganttInstance.setSplitterPosition("0%", "position");
    }
    else if(args.value==="3")
    {
      ganttInstance.setSplitterPosition("50%", "position");
    }
  
  }
  
  const items = [
    {
         item: 'Grid Only',
         id:"1"
    },
    {
         item: 'Chart Only',
         id:"2"
    },
    {
         item: 'Grid and Chart',
         id:"3"
    }];
  const toolbarOptions = ['ExpandAll','CollapseAll',{type: "Input", tooltipText:"Change View", template: new DropDownList({dataSource:items, placeholder:"Select", change:onChange, fields:{text:'item', value:'id'}})}]


     
      
return (<GanttComponent ref={gantt => ganttInstance =gantt} dataSource={data} taskFields={taskFields}  toolbar={toolbarOptions}  height='450px'>
        <Inject services={[Toolbar]}/>
        </GanttComponent>);
}
;
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject,Toolbar } from '@syncfusion/ej2-react-gantt';
import { DropDownList } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
function App() {

  let ganttInstance:any;

  const taskFields:any= {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  
  function onChange(args:any) {
    if(args.value==="1")
    {
      ganttInstance.setSplitterPosition("100%","position")
    }
    else if(args.value==="2")
    {
      ganttInstance.setSplitterPosition("0%", "position");
    }
    else if(args.value==="3")
    {
      ganttInstance.setSplitterPosition("50%", "position");
    }
  
  }
  
  const items:any = [
    {
         item: 'Grid Only',
         id:"1"
    },
    {
         item: 'Chart Only',
         id:"2"
    },
    {
         item: 'Grid and Chart',
         id:"3"
    }];
  const toolbarOptions:any = ['ExpandAll','CollapseAll',{type: "Input", tooltipText:"Change View", template: new DropDownList({dataSource:items, placeholder:"Select", change:onChange, fields:{text:'item', value:'id'}})}]
  
    
return (<GanttComponent ref={gantt => ganttInstance =gantt} dataSource={data} taskFields={taskFields} toolbar={toolbarOptions} height='450px'>
          <Inject services={[Toolbar]}/>
      </GanttComponent>);
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Change splitter position dynamically

In Gantt, we can change the splitter position dynamically by using setSplitterPosition method. We can change the splitter position by passing value and type parameter to setSplitterPosition method. Type parameter will accept one of the following values ‘position’, ‘columnIndex’, ‘viewType’. The following code example shows how to use this method.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function  App(){
    let ganttInstance;
    const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  function clickHandler(){
    ganttInstance.setSplitterPosition('50%', 'position');
}
 function changeindex(){
    ganttInstance.setSplitterPosition(0, 'columnIndex');
}
        return (<div>
        <ButtonComponent  onClick= { clickHandler}>ChangeByPosition</ButtonComponent>
        <ButtonComponent onClick= { changeindex}>ChangeByIndex</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={taskFields}
        height = '450px' ref={gantt => ganttInstance = gantt}>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function  App(){
    let ganttInstance: any;
    const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  function clickHandler(){
    ganttInstance.setSplitterPosition('50%', 'position');
}
 function changeindex(){
    ganttInstance.setSplitterPosition(0, 'columnIndex');
}
        return (<div>
        <ButtonComponent  onClick= { clickHandler}>ChangeByPosition</ButtonComponent>
        <ButtonComponent onClick= { changeindex}>ChangeByIndex</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={taskFields}
        height = '450px' ref={gantt => ganttInstance = gantt}>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>