[VUE 2] column header(column name) editable

[Webethics]

Any functionality or method to make the column header(column name) editable?

(please find the attachment for reference)

[mats]

Seems like a reasonable feature request, opened one here: https://github.com/bryntum/support/issues/5112

Shouldn't be too hard to implement. If you want to take a stab at it yourself, you can look at https://bryntum.com/docs/scheduler/api/Core/widget/Editor along with a TextField.

[Webethics]

I tried but failed to make the column editable, could you please help me more regarding that?

[mats]

Here's a quick and dirty POC which works, you can refactor it as you like:

Add editName option to the https://bryntum.com/docs/scheduler/api/Grid/feature/HeaderMenu feature.

             *   features         : {
             *       headerMenu : {
             *           processItems({ column, items }) {
             *               // Add or hide existing items here as needed
             *               items.myAction = {
             *                   text   : 'Cool action',
             *                   icon   : 'b-fa b-fa-fw b-fa-ban',
             *                   onItem : () => console.log('Some coolness'),
             *                   weight : 300 // Move to end
             *               };
             *
             *               // Hide column picker
             *               items.columnPicker.hidden = true;
             *           }
             *       }
             *   },
             *

editName : {
                weight : 220,
                icon   : 'b-fw-icon b-icon-edit',
                text   : 'Rename',
                onItem : () => {
                    const textEl = this.client.getSubGridFromColumn(column).header.getHeader(column.id).querySelector('.b-grid-header-text');
                    this.editor = new Editor({
                        inputField : { type : 'text' },
                        owner      : this.client,
                        align      : {
                            align : 't0-t0'
                        }
                    });
                    this.editor.render(textEl);

                this.editor.startEdit({
                    target : textEl,
                    record : column,
                    field  : 'text'
                });
            }
        };