Premium support for our pure JavaScript UI components


Post by bherford »

I'd like to change the list items to use "Finish" instead of "End". Where can I edit this within Bryntum?

Screen Shot 2022-06-15 at 4.27.17 PM.png
Screen Shot 2022-06-15 at 4.27.17 PM.png (131.56 KiB) Viewed 740 times

Thanks


Post by tasnim »

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?


Post by bherford »

Thank you I'll give this a go!


Post by alex.l »

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


Post by bherford »

Thanks Alex,

How can I remove an option from the list? if I only want to display

   DependencyEdit : {
        StartToStart      : 'Start to Start',
        EndToStart        : 'End to Start',
        EndToEnd          : 'End to End'
    },

Post by alex.l »

2 ways to go.

  1. 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.

  2. 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


Post by bherford »

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.


Post by tasnim »

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'); }

Post by bherford »

Thank you this worked.


Post by alex.l »

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


Post Reply