PercentDone in rollup indicator?

Support for v6.x of our Scheduling components
Post Reply
User avatar
jchrist
Posts: 17
Joined: Sat Aug 05, 2017 3:04 am

PercentDone in rollup indicator?

Post by jchrist » Fri Dec 07, 2018 2:17 am

If you expand the first node "rollup tasks" in https://www.bryntum.com/examples/gantt- ... es/rollups, you can see that each subtask has a PercentDone set and displayed (darker blue vs lighter blue). However, when that node is collapsed, the tasks shown in the rollup line of the parent node don't indicate the percentage complete.

Is there a way to get percent done shown in the rollup...even if I have to do some custom styling?

Thanks!

User avatar
mats
Core Developer
Core Developer
Posts: 13034
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: PercentDone in rollup indicator?

Post by mats » Fri Dec 07, 2018 1:17 pm

Not supported I'm afraid, unless you override our internal rendering (should be quite easy). If you hover over the task you see the % done though, will it suffice?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
jchrist
Posts: 17
Joined: Sat Aug 05, 2017 3:04 am

Re: PercentDone in rollup indicator?

Post by jchrist » Fri Dec 07, 2018 7:37 pm

Unfortunately, the mouseover is not sufficient according to the customer. I took a look at the code and it seems like an override of getRollupRenderData should do the trick. I think the bits of columnRenderer which calculate percentDone and progressBarWidth could be reused for this, but I tried adding those fields to data.tpl in getRollupRenderData, and it didn't work. There's obviously more to it than that.

Since I'm not really familiar with the Gantt codebase, any chance you could provide an getRollupRenderData override to do this?

Thanks!

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 643
Joined: Fri Apr 01, 2016 11:08 am

Re: PercentDone in rollup indicator?

Post by pmiklashevich » Tue Dec 11, 2018 9:32 am

At the end getRollupRenderData applies data to data.tpl which is event template or milestone template:

Code: Select all

data.tpl = isMileStone ? this.milestoneTemplate : this.eventTemplate;
That means that you need to override getInnerTpl in these templates (Gnt.template.Task.getInnerTpl and Gnt.template.Milestone.getInnerTpl). You already have record in the data (assigned by getRollupRenderData), so you can extract the percent out of it. Here is an example of how to override task template (you can do the same for milestone):

Code: Select all

Ext.define(null, {
    override: 'Gnt.template.Task',
    // copy original function and change it a bit
    getInnerTpl: function (cfg) {
    ...
    // find isRollup block and insert html template into it
    '<tpl if="isRollup">' +
    '<div style="height: 8px; line-height: 8px; font-size: 8px;">{[values.record.getPercentDone() ? Math.round(values.record.getPercentDone()) + "%" : ""]}</div>' +
    '<tpl else>' +
    ...
    }
});
Here is the Sencha docs of XTemplate, which might help you to understand Ext template approach: https://docs.sencha.com/extjs/6.6.0/cla ... plate.html

Best,
Pavel
Pavel Miklashevich - Core Developer

User avatar
jchrist
Posts: 17
Joined: Sat Aug 05, 2017 3:04 am

Re: PercentDone in rollup indicator?

Post by jchrist » Tue Dec 11, 2018 8:25 pm

Thanks, Pavel. I'll give that a shot.

Thanks also for the example override function..I've never seen an override done with a null class name before. Something new to add to my bag of tricks!

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 643
Joined: Fri Apr 01, 2016 11:08 am

Re: PercentDone in rollup indicator?

Post by pmiklashevich » Tue Dec 11, 2018 9:27 pm

You're welcome! You can find it in Sencha docs. First argument className says "Everything else is lower-cased Pass null to create an anonymous class."
https://docs.sencha.com/extjs/6.6.0/cla ... hod-define
Pavel Miklashevich - Core Developer

User avatar
jchrist
Posts: 17
Joined: Sat Aug 05, 2017 3:04 am

Re: PercentDone in rollup indicator?

Post by jchrist » Tue Dec 11, 2018 10:32 pm

In case anyone else is looking for a solution to this this, based on Pavel's suggestion, I modified the isRollup block in the Gnt.template.Task override of getInnerTpl to

Code: Select all

            '<div class="sch-gantt-progress-bar" style="width:{[values.record.getPercentDone() ? values.record.getPercentDone() * values.width/100.0 : 0]}px" unselectable="on">&#160;</div>' +
With that change, the rollup line displays a progress bar chart, while Pavel's version displays a label. Take your pick!

Thanks for the help!

Post Reply