Gantt Chart + Horizontal Scroll

[admin]

Hi
I am using Gantt chart, and not able to see all the columns in task section. instead i see only below. I was expecting some kind of scroll bar at the bottom for task section. but instead i can only get below:
Here is my code
<div>

<div>this.http.get(‘/api/’).subscribe(result=>{</div>
<div>//load columns</div>
<div>this.http.get(‘/api/Fields’).subscribe(__=>{</div>
<div>__[“result”][0].Fields.forEach(element=>{</div>
<div>if(!element.HomeGridHidden && element.Name!=”start” && element.Name!=”end”){</div>
<div>this.taskColumns.push({“label”:element.Name,”value”:element.Name,hideResizeBar:true});</div>
<div>}</div>
<div>});</div>
<div>//load data</div>
<div>result[“result”][0].values.tasks.forEach(__=>{</div>
<div>let_dict={};</div>
<div>_dict[“dateStart”]=__[“start”];</div>
<div>_dict[“dateEnd”]=__[“end”];</div>
<div>this.taskColumns.forEach(t=>{</div>
<div>try{</div>
<div>letprop=t.value;</div>
<div>_dict[prop]=__[prop];</div>
<div>}catch(err){</div>
<div>console.log(“Error….”+ t.value);</div>
<div>}</div>
<div>});</div>
<div>this.items.push(_dict);</div>
<div>});</div>
<div>});</div>
<div>console.log(this.taskColumns);</div>
<div>this.dataSource = this.items;</div>
<div>});</div>

</div>
 

[Hristofor]

Hi GLMSDev,
the dataSource items have invalid dates or too small time differences (between dateStart and dateEnd) for the current view. That’s why you are seeing this. If you share the dataSource and the Smart.GanttChart settings we can find the issue.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

My problem is not Gantt bar showing improperly, that works alright. My issue is left side of the Gantt.Where i have multiple columns which does not show i can only see 3-4 column max.
Below is the code for gantt…
<div>

<div><div*ngIf=”taskColumns.length>0; else loading;”></div>
<div><smart-gantt-chart#ganttChart[view]=”view”[dataSource]=”dataSource”[taskColumns]=”taskColumns”></smart-gantt-chart></div>
<div></div></div>
<div><ng-template#loading>Loading data…</ng-template></div>

</div>
<div>
<div>

<div>constructor(private http:HttpClient) { }</div>
<div>dataSource1: Array<object>;</div>
<div>dataSource: Array<object>;</div>
<div>taskColumns:GanttChartTaskColumn[]=[];</div>
<div>items=[];</div>
<div>headerTemplate = ‘headerTemplate’;</div>
<div>view = ‘month’;</div>
<div>durationUnit = ‘day’;</div>
<div>treeMin = 300;</div>
<div>hideTimelineHeaderDetails = true;</div>

</div>
</div>

[Hristofor]

Hi GLMSDev,
there’s not enough space for all the columns to show. They always try to fit in the available space. In order to show them you need to set a bigger treeSize or treeMin. The treeMin property controls the minmum size of the TaskTree section.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Thanks for the tip. I tried this and it showed me only 4 columns, but i have many more columns in it. also, it just expanded the grid width…and no scroll bar in left side of section

[Hristofor]

Hi GLMSDev,
The TaskTree section of the Smart.GanttChart does not have a scroll bar. The columns always fit in the available space. Keep in mind that every column has it’s own minimum size as well which by default is equal to the min size of a timeline cell (70px) if not set in the taskColumns property.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Thanks, will there be a release where this limitation will be handled ? actually,  i have quite few fields against tasks and i am wondering how can i handle this…
 
Thanks once for prompt reply.

[Hristofor]

Hi GLMSDev,
At present, we do not have development plans to add such functionality to the Smart.GanttChart. However, our company offers custom development services and we can implement this as a custom feature for you. If this is something which you are interested in, please send an email to sales@htmlelements.com
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts