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
close icon

How can i set gantt height to auto?

Hi,
I have a question about ejGantt height. Is it possible to set it to max/auto (it should be equal for all rows).

http://jsplayground.syncfusion.com/5orwujmv
Regards
Karol

7 Replies

JS Jonesherine Stephen Syncfusion Team December 19, 2016 04:23 PM UTC

Hi Karol, 
We can update the height of Gantt control according to number of records by dynamically changing the height using sizeSettings property. 
We have prepared the work around and updated the height of the Gantt on loading/expand/collapse/add/delete action. 
Please find the code example below: 
 $("#GanttContainer").ejGantt({ 
                "create": function (args) { 
                    updateGanttHeight(); 
                }, 
                "collapsed": function (args) { 
                    updateGanttHeight(); 
                }, 
                "expanded": function (args) { 
                    updateGanttHeight(); 
                }, 
                "actionComplete": function (args) { 
                    if (args.requestType == "save" || args.requestType == "delete") { 
                        updateGanttHeight(); 
                    } 
                } 
            }); 
function updateGanttHeight() { 
            var ganttObj = $("#GanttContainer").ejGantt("instance"), 
            toolbar = $("#GanttContainer_toolbarItems").height(), 
            model = ganttObj.model,             
            treeObj = ganttObj._$treegridHelper.ejTreeGrid("instance"); 
            totalLen = treeObj.getExpandedRecords(model.updatedRecords); 
            //To calculate the height of Gantt as per records count 
            var height = model.rowHeight * totalLen.length + treeObj.getHeaderContent().height() + toolbar + 20; 
            //Update height using setModel 
            var sizesettings = { height: height.toString() }; 
            ganttObj.setModel({ "sizeSettings": sizesettings }); 
        } 
We have also prepared the sample based on this, please find the sample from below location. 
Regards, 
Jone sherine P S 



KW Karol Wlodarek December 20, 2016 12:24 PM UTC

Thanks, you really helped me.

I have two another questions:
* How can i set this same to width?
* It is possible to lock/fix header of this gantt (image blow)?



Regards,
Karol.


JS Jonesherine Stephen Syncfusion Team December 21, 2016 12:35 PM UTC

Hi Karol, 
Please find the response below: 
Query1: How can I set this same to width? 
Solution: We can update the width of Gantt control by using sizeSettings property.  
We have prepared the work around and updated the width of Gantt by summing the width of TreeGrid, Gantt chart and splitter in “create” client side event.  
Please find the code example below: 
$("#GanttContainer").ejGantt({ 
                "splitterPosition": "782px",                 
                "create": function (args) { 
                    updateGanttHeight(); 
                }, 
            }); 
        }); 
function updateGanttHeight() { 
     var ganttObj = $("#GanttContainer").ejGantt("instance"), 
     treegridWidth = 0, 
     model = ganttObj.model, 
      //To get the width of schedule header 
     scheduleWidth = $("#ganttviewerbodyContentejGanttChartGanttContainer").width(), 
     columns = model.columns; 
     //To get the width of TreeGrid section 
      for (var i = 0; i < columns.length; i++) { 
                if (columns[i].visible == true) { 
                    treegridWidth = treegridWidth + columns[i].width; 
                } 
       } 
      treeObj = ganttObj._$treegridHelper.ejTreeGrid("instance"); 
      totalLen = treeObj.getExpandedRecords(model.updatedRecords); 
      //To calculate the height and width of Gantt 
            var height = model.rowHeight * totalLen.length + treeObj.getHeaderContent().height() + 1, 
            width = scheduleWidth + treegridWidth + 15; 
            //Update size using setModel 
            var sizesettings = { height: height.toString(), width: width.toString() }; 
            ganttObj.setModel({ "sizeSettings": sizesettings }); 
            $("#ejTreeGridGanttContainere-gridcontent").removeClass("e-borderbox"); 
        }      
     
We have also prepared the sample and rendered the Gantt without horizontal and vertical scroll bar. Please find the sample from below location.  
Query2: It is possible to lock/fix header of this Gantt (image blow)? 
Solution: Can you please share more details related to this query with us, it will be very helpful for us to understand your requirement clearly and update the response. 
 
Regards,  
Jone sherine P S  



KW Karol Wlodarek December 22, 2016 07:45 AM UTC

Hi

Thanks for solution on first question.
About Query2: It's Occurs when Gantt chart have large height then my panel and gantt header are invisible. To occurred this is nessesery scroll down gantt chart.

Below I am adding two screenshots and playground sample describing this incident.

Regards,
Karol


http://i.imgur.com/0Et9sAx.png

http://i.imgur.com/NFRrBSg.png




MK Mahalakshmi Karthikeyan Syncfusion Team December 23, 2016 12:16 PM UTC

Hi Karol, 
Sorry for the inconvenience caused. 
We have analyzed your requirement and found that you need a fixed header on scrolling the browser content, but this requirement is not possible. Since the Gantt control’s body content and header content is within the same UI, we cannot keep the header alone fixed if we scroll outside the Gantt’s container. But by default Gantt’s header will remain fixed if we scroll within the Gantt container. And we will face alignment issues on certain actions if we achieve this requirement using workaround. 
Regards, 
Mahalakshmi k. 



KW Karol Wlodarek February 9, 2017 12:06 PM UTC

Hi,

I found a related error with this auto gantt height .
After applying height stretching in Gantt charts for some cases it is not drown and scripts does not repond (example below). Problem appears in IE (v. 11) (shown examples (all) work in Chrome and Firefox).

Works:
http://jsplayground.syncfusion.com/o3cso2mo

Doesn't works:
http://jsplayground.syncfusion.com/zhrgwd4v
http://jsplayground.syncfusion.com/pieve1p0

Regards, 
Karol


JS Jonesherine Stephen Syncfusion Team February 10, 2017 06:13 PM UTC

Hi Karol, 
We have analyzed the provided sample. We need to provide the valid date value while loading Gantt in IE. Cloning these date format “0001-01-01T00:00:00” will return invalid date in IE. Cloning this type of date format is not supported in IE hence reported issue occurs. We can resolve this by providing valid date for Gantt tasks.  And we need to provide unique Id Value. 
We have modified sample for your reference. 
Please find the sample from below location 
Regards, 
Jone sherine P S 


Loader.
Live Chat Icon For mobile
Up arrow icon