JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Gantt Chart + Horizontal Scroll
Tagged: Angular GanttChart, chart, custom element, gantt, reat gantt chart, smart elements, smart framework, web component, web components
- This topic has 7 replies, 2 voices, and was last updated 4 years ago by
Hristofor.
-
AuthorPosts
-
August 25, 2020 at 7:15 am #101001
admin
KeymasterHi
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>
August 25, 2020 at 7:33 am #101004Hristofor
MemberHi GLMSDev,
thedataSource
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 theSmart.GanttChart
settings we can find the issue.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.comAugust 25, 2020 at 8:15 am #101007admin
KeymasterMy 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>August 25, 2020 at 9:01 am #101008Hristofor
MemberHi 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 biggertreeSize
ortreeMin
. ThetreeMin
property controls the minmum size of the TaskTree section.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.comAugust 26, 2020 at 5:46 am #101014admin
KeymasterThanks 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
August 26, 2020 at 7:04 am #101016Hristofor
MemberHi GLMSDev,
The TaskTree section of theSmart.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 thetaskColumns
property.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.comAugust 26, 2020 at 2:20 pm #101018admin
KeymasterThanks, 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.August 27, 2020 at 7:03 am #101020Hristofor
MemberHi 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 -
AuthorPosts
- You must be logged in to reply to this topic.