Our state of the art Gantt chart


Post by rahulranjan »

How can we customise resource assignment pop.
Can we change unit value from % type to other?

Post by pmiklashevich »

Unit is hardcoded in some places. I've created a ticket to make it fully localizable: https://app.assembla.com/spaces/bryntum/tickets/8433

To change it now you need to override some classes. Please try the following code in our Basic demo.
/* eslint-disable no-unused-vars */
import '../_shared/shared.js'; // not required, our example styling etc.
import Gantt from '../../lib/Gantt/view/Gantt.js';
import ProjectModel from '../../lib/Gantt/model/ProjectModel.js';
import ResourceAssignmentColumn from '../../lib/Gantt/column/ResourceAssignmentColumn.js';
import Override from '../../lib/Common/mixin/Override.js';
import AssignmentField from '../../lib/Gantt/widget/AssignmentField.js';
import LocaleManager from '../../lib/Common/localization/LocaleManager.js';

class ResourceAssignmentColumnOverride {
    static get target() {
        return {
            class   : ResourceAssignmentColumn,
            product : 'gantt'
        };
    }

    itemTpl(assignment, i) {
        return `${assignment.resourceName} ${assignment.units}[MY_UNIT!]`;
    }
}

Override.apply(ResourceAssignmentColumnOverride);

class AssignmentFieldOverride {
    static get target() {
        return {
            class   : AssignmentField,
            product : 'gantt'
        };
    }

    static get defaultConfig() {
        const cfg = this._overridden.defaultConfig;

        cfg.chipView.itemTpl = (assignment, i) => {
            return `${assignment.name} ${assignment.units}[MY_UNIT!]`;
        };

        return cfg;
    }
}

Override.apply(AssignmentFieldOverride);

// Apply changes to locale
Object.assign(LocaleManager.locale.AssignmentGrid, {
    '%'      : '[MY_UNIT!]',
    unitsTpl : ({ value }) => value ? value + '[MY_UNIT!]' : ''
});

const project = new ProjectModel({
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    }
});

const gantt = new Gantt({
    appendTo : 'container',

    project : project,

    columns : [
        { type : 'name', field : 'name', width : 250 },
        { type : 'resourceassignment', width : 250 }
    ]
});

project.load();

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Hi Thanks for support
I tried getting some issue
1. this._overridden is giving undefined
2. Override.apply(ResourceAssignmentColumnOverride);
in console
TypeError: Cannot read property 'apply' of undefined

While running it is giving
client:154 ./src/app/app.component.ts 90:23-38
"export 'default' (imported as 'AssignmentField') was not found in 'bryntum-gantt'
warnings @ client:154
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client:154 ./src/app/app.component.ts 113:14-27
"export 'default' (imported as 'LocaleManager') was not found in 'bryntum-gantt'
warnings @ client:154
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client:154 ./src/app/app.component.ts 83:0-8
"export 'default' (imported as 'Override') was not found in 'bryntum-gantt'
warnings @ client:154
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client:154 ./src/app/app.component.ts 99:34-42
"export 'default' (imported as 'Override') was not found in 'bryntum-gantt'
warnings @ client:154
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client:154 ./src/app/app.component.ts 111:0-8
"export 'default' (imported as 'Override') was not found in 'bryntum-gantt'
warnings @ client:154
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client:154 ./src/app/app.component.ts 64:23-47
"export 'default' (imported as 'ResourceAssignmentColumn') was not found in 'bryntum-gantt'
Imported as
import ResourceAssignmentColumn from 'bryntum-gantt';
import Override from 'bryntum-gantt';
import AssignmentField from 'bryntum-gantt';
import LocaleManager from 'bryntum-gantt';
Thanks

Post by pmiklashevich »

Could you please zip your project up and upload here?

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Hi pmiklashevich
Thanks for Support
I am attaching the project.https://drive.google.com/file/d/1B9jEtH ... sp=sharing

Post by pmiklashevich »

I'm sorry, could you please clarify your requirements once again? I get you as you don't want to see '%' sign next to the value and you want to see something else. Am I right? Because if you mean to have another field there like cost($), amount, etc. It's not supported out of the box. Please elaborate.

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Yes , I don't want to see % instead of that i want to see cost, amount etc. Yes you are right. I have attach the project too.

Post by pmiklashevich »

Now I see. I'm afraid there is no easy way to achieve this for now. But I've created a feature request to make it more flexible in the future releases. https://app.assembla.com/spaces/bryntum/tickets/8445 Thanks for your feedback! Appreciate it!

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Hi , Thanks
Right Now can i achieve that ? if yes , I have attach project too please have a look

Post by pmiklashevich »

Our code is not prepared to be easily overridden to achieve this. Please look at the code yourself. The classes you need are:
- AssignmentGrid defaultConfig columns;
- AssignmentsManipulationModel fields;
- AssignmentsManipulationStore.fillFromMaster to load data;
- AssignmentsManipulationStore.applyChanges to save data;
If you want us to implement this thing for you please check out https://www.bryntum.com/services/ for an option.

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply