I'd like to change the list items to use "Finish" instead of "End". Where can I edit this within Bryntum?
Thanks
Hi,
To do so, you need to use the listItemTpl
config to achieve that.
Docs : https://bryntum.com/docs/gantt/api/Core/widget/Combo#config-listItemTpl
Here is a basic code snippet of how you can achieve that:
dependencyEdit : {
editorConfig : {
items : {
typeField : {
listItemTpl : (event) => {
const arr = event.name.split(' ');
const newArr = arr.map((item) => {
if (item === 'End') {
item = 'Finish';
return item;
}
return item;
});
const result = newArr.join(' ');
return result;
}
}
}
}
}
Please let us know if it helps or not?
Btw, if you plan to use this wording everywhere, better to change localization.
Guide is here: https://bryntum.com/docs/gantt/guide/Gantt/customization/localization
Lines you need to change:
DependencyEdit : {
// ...
StartToStart : 'Start to Start',
StartToEnd : 'Start to End',
EndToStart : 'End to Start',
EndToEnd : 'End to End'
},
Example:
const locale = {
// ... Other translations here ...
DependencyEdit : {
StartToStart : 'Start to Start',
StartToEnd : 'Start to End',
EndToStart : 'End to Start',
EndToEnd : 'End to End'
},
}
LocaleManager.extendLocale('En', locale);
All the best,
Alex
2 ways to go.
override static Type
property of DependencyBaseModel
class (find the class in the sources).
How to override: https://bryntum.com/docs/gantt/api/Core/mixin/Override
But in case you had removed type in saved data, it will broke the app.
Change only picker content. Here is example how to do that with original code for buildLocalizedItems
method. You need to update it as you need
features : {
dependencyEdit : {
editorConfig : {
items : {
typeField : {
buildLocalizedItems : function() {
const dialog = this.parent;
return Object.keys(DependencyModel.Type).map(type => {
return {
id : DependencyModel.Type[type],
name : dialog.L(type),
localeKey : type
};
});
}
}
}
}
}
}
All the best,
Alex
Hey Alex, can you add some more detail to the buildLocalizedItems method? How exactly would I update this to remove "Start to Finish?"
I added
DependencyEdit : {
StartToStart : 'Start to Start',
EndToStart : 'Finish to Start',
EndToEnd : 'Finish to Finish'
},
to my locales but
start to finish
still shows up.
Here is an approach that how you can achieve it.
buildLocalizedItems() {
const dialog = this.parent;
const values = Object.keys(DependencyModel.Type).map(type => {
return {
id : DependencyModel.Type[type],
name : dialog.L(type),
localeKey : type
};
});
// return all the picker value except the start to finish
return values.filter(({ localeKey }) => localeKey !== 'StartToEnd');
}
I am not really happy with the solution I recommended to you because it required to use a private method. It may causes problems in future to you, we do not notify users about any changes in private methods (renaming/removing). Please have a look at the code below how to avoid using that method. You'll need to re-configure full typeField combo, but it will be fully public way.
features : {
dependencyEdit : {
editorConfig : {
items : {
typeField : {
type : 'localizablecombo',
weight : 300,
label : 'L{Type}',
name : 'type',
editable : false,
valueField : 'id',
displayField : 'name',
items : [{
id : 0,
name : 'Start to Start'
}, {
id : 2,
name : 'Finish to Start'
}, {
id : 3,
name : 'Finish to Finish'
}]
}
}
}
},
All the best,
Alex