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.
Unfortunately, activation email could not send to your email. Please try again.

How can i set gantt height to auto?

Thread ID:

Created:

Updated:

Platform:

Replies:

127898 Dec 16,2016 07:13 AM Feb 10,2017 01:13 PM JavaScript 7
loading
Tags: ejGantt
Karol Wlodarek
Asked On December 16, 2016 07:13 AM

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

Jonesherine Stephen [Syncfusion]
Replied On December 19, 2016 11:23 AM

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 


Karol Wlodarek
Replied On December 20, 2016 07:24 AM

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.

Jonesherine Stephen [Syncfusion]
Replied On December 21, 2016 07:35 AM

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  


Karol Wlodarek
Replied On December 22, 2016 02:45 AM

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



Mahalakshmi Karthikeyan [Syncfusion]
Replied On December 23, 2016 07:16 AM

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. 


Karol Wlodarek
Replied On February 9, 2017 07:06 AM

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

Jonesherine Stephen [Syncfusion]
Replied On February 10, 2017 01:13 PM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;