Bryntum Support Forums

Hey guys,

Is there any way to rename the notes tab? I've tried adjusting the title in the taskEditor.items object, but it is still being rendered with no title, and the notes icon instead.

Additionally, is there any support for rich text (e.g. a wysiwyg editor) for the notes field? If there is no support off the shelf, how would I go about doing a notes tab that includes our own angular rich-text-editor component.

Hi chrisb,

Is there any way to rename the notes tab? I've tried adjusting the title in the taskEditor.items object, but it is still being rendered with no title, and the notes icon instead.

Please check our guide https://bryntum.com/docs/gantt/#guides/customization/taskedit.md#customizing-the-tabs-and-the-fields

Here is an example how to change the title:

const gantt = new Gantt({
    features : {
        taskEdit : {
            items : {
                notesTab : {
                    // Rename "Notes" tab
                    title : 'My notes'
                }
            }
        }
    }
})

To manage an icon, please set https://bryntum.com/docs/gantt/#Core/widget/TabPanel#config-tab config.

Additionally, is there any support for rich text (e.g. a wysiwyg editor) for the notes field? If there is no support off the shelf, how would I go about doing a notes tab that includes our own angular rich-text-editor component.

We do not have such component, but I've opened a feature request to add a demo for it: https://github.com/bryntum/support/issues/2698
You can use angular component for that, but you'll need to wrap it into our CustomComponent class and register a type for it.
We have an example how to do it in our Grid examples. You can download a trial version from our website and check the source code for this example: https://bryntum.com/examples/grid/frameworks/angular/angular-renderer/dist/angular-renderer/index.html

Another way is to use your own TaskEditor that fully implemented using Angular. We have an example in the guide https://bryntum.com/docs/gantt/#guides/customization/taskedit.md#replacing-the-task-editor
An example with an Angular Task Editor is available in our Scheduler examples collection. Check the sources for this demo for more details: https://bryntum.com/examples/scheduler/frameworks/angular/custom-event-editor/dist/custom-event-editor/index.html

All the best,
Alex

Thanks Alex.

I had set the title of the notes tab, but looks like the tab settings were overriding it. The below combination seemed to resolve it.

notesTab: {
     title: 'Notes',
     tab: {
       icon: null,
       text: 'Notes'
     }
 }

Will look into those options.

Thanks again.

Hi chrisb,

FYI, in the ticket https://github.com/bryntum/support/issues/2698 I've attached a Vue demo with integrated rich text editor for Calendar's EventEditor. It might help you with your case as well, the component I've added is framework agnostic, so you can adjust it for your application before ticket solved.