Category / Section
How to update the dimensions for JavaScript Gantt at run time?
1 min read
In Gantt control, the dimensions of the Gantt chart can be changed using the sizeSettings.height and sizeSettings.width properties. The height and width values can be provided in both pixels and percentage values.
To update the dimensions of the Gantt during run time, the following code snippets can be used.
Code snippets:
<body>
<div>
<button id="resizeGantt" style="display:block">Resize Gantt</button>
<div id="gantt"></div>
</div>
<script type="text/javascript">
$(function () {
$("#gantt").ejGantt({
//…
sizeSettings: {
height: "450px",
width: "100%"
},
});
//Updating the height and width of Gantt through button click
$("#resizeGantt").click(function () {
var ganttObj = $("#gantt").data("ejGantt");
if (ganttObj.model.sizeSettings.height == "450px")
ganttObj.setModel({ "sizeSettings": { height: "300px", width: "70%" } });
else
ganttObj.setModel({ "sizeSettings": { height: "450px", width: "100%" } });
});
});
</script>
</body>
Sample link
A sample for updating the dimensions of Gantt chart is available in the following link. Sample
