Search results

Responsive Columns in JavaScript (ES5) Gantt control

02 Dec 2022 / 3 minutes to read

You can toggle the column visibility based on media queries, which are defined in the hideAtMedia. The hideAtMedia accepts valid Media Queries.

Source
Preview
index.js
index.html
Copied to clipboard
var ganttChart = new ej.gantt.Gantt({
         dataSource: GanttData,
	     taskFields: {
            id: 'TaskID',
            name: 'TaskName',
			startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
			child: 'subtasks'
        },
		splitterSettings:{
		  position:'75%'
		},
		height:'450px',
		columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '200',hideAtMedia: '(min-width: 700px)'},
			{ field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '100', hideAtMedia: '(max-width: 500px)'},
            { field: 'Progress', headerText: 'Progress', width: '150' }
        ]
		
	});
ganttChart.appendTo('#Gantt');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
	<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.3.56/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>


<body>
    
    
    <div id="container">
        <div id="Gantt"></div>        
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Change tree/expander column

The tree/expander column is a column in the Gantt control, that has icons to expand or collapse the parent records. You can define the tree column index in the Gantt control by using the treeColumnIndex property and the default value of this property is 0. The following code example shows how to use this property.

Source
Preview
index.js
index.html
Copied to clipboard
var ganttChart = new ej.gantt.Gantt({
         dataSource: GanttData,
		 taskFields: {
            id: 'TaskID',
            name: 'TaskName',
			startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
			child: 'subtasks'
        },
		splitterSettings:{
		  columnIndex:3
		},
		height:'450px',
		treeColumnIndex:2
});
ganttChart.appendTo('#Gantt');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
	<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.3.56/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>


<body>
    
    
    <div id="container">
        <div id="Gantt"></div>        
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Show or Hide columns dynamically

You can show or hide gantt columns dynamically using external buttons by invoking the showColumn or hideColumn method.

Source
Preview
index.js
index.html
Copied to clipboard
ej.gantt.Gantt.Inject(ej.gantt.Toolbar,ej.gantt.Edit);
var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
            progress: 'Progress',
			child: 'subtasks'
        },
    editSettings: {
        allowEditing: true
    },
    splitterSettings: {
        position: '75%'
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID' },
        { field: 'Progress', headerText: 'Progress' },
        { field: 'TaskName', headerText: 'Task Name' },
        { field: 'StartDate', headerText: 'Start Date' },
        { field: 'Duration', headerText: 'Duration' }
    ]
});
var show= new ej.buttons.Button();
show.appendTo('#show');
var hide= new ej.buttons.Button();
hide.appendTo('#hide');
document.getElementById('show').addEventListener('click', function() {
   ganttChart.showColumn(['TaskName', 'Duration']);
});
document.getElementById('hide').addEventListener('click', function() {
   ganttChart.hideColumn(['TaskName', 'Duration']);
});
ganttChart.appendTo('#Gantt');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
     <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
	<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.3.56/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
       
     
    <div id="container">
	   <button id="show">Show</button>
       <button id="hide">Hide</button>
        <div id="Gantt"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>