HTML Elements Forums Data Grid Gantt Chart + Horizontal Scroll

This topic contains 7 replies, has 2 voices, and was last updated by Avatar Hristofor 3 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #101001
    Avatar
    GLMSDev
    Participant

    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>
     

    #101004
    Avatar
    Hristofor
    Participant

    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

    #101007
    Avatar
    GLMSDev
    Participant

    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>

    #101008
    Avatar
    Hristofor
    Participant

    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

    #101014
    Avatar
    GLMSDev
    Participant

    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

    #101016
    Avatar
    Hristofor
    Participant

    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

    #101018
    Avatar
    GLMSDev
    Participant

    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.

    #101020
    Avatar
    Hristofor
    Participant

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.