[VUE 2] Vertical mode. How to call my custom function in headerRenderer

[sactory]

Hi dev team bryntum,
I want call my function in headerRenderer. But not work.
Please support me.

My code:

Screen Shot 2023-09-25 at 14.51.57.png (302.78 KiB) Viewed 137 times

Screen Shot 2023-09-25 at 14.52.17.png (253.83 KiB) Viewed 137 times

Thank for support.

[tasnim]

Hi,

You could define that function outside of the headerRenderer And then you could use it inside of the headerRenderer.

[sactory]

Hi tasnim,
Thank for support but It don't work
I have myCustomFunc in common.ts then I import it in my schedulerConfig.js (call it in here) but it not work
I don't know outside is where? or anywhere
Please tell me detail or example code something look like.
Thank so much

[tasnim]

Hi,

I'm also calling the custom function inside headerRenderer of schedulerConfig.js file and it is working. Is it possible for you to upload a runnable test case so we can debug it?
This is my schedulerConfig file

import { myFunc } from './myFunc';

/**
 * Application configuration
 */
const useSchedulerConfig = () => {
    return {
        startDate         : new Date(2017, 0, 1, 6),
        endDate           : new Date(2017, 0, 1, 20),
        viewPreset        : 'hourAndDay',
        rowHeight         : 50,
        barMargin         : 5,
        multiEventSelect  : true,
        resourceImagePath : 'users/',
        columns           : [
            {
                text  : 'Name',
                field : 'name',
                width : 130,
                headerRenderer({ column }) {
                    myFunc();
                    return column.text;
                }
            }
        ],
        resources         : [
            { id: 'r1', name: 'Mike' },
            { id: 'r2', name: 'Linda' },
            { id: 'r3', name: 'Don' },
            { id: 'r4', name: 'Karen' },
            { id: 'r5', name: 'Doug' },
            { id: 'r6', name: 'Peter' },
            { id: 'r7', name: 'Sam' },
            { id: 'r8', name: 'Melissa' },
            { id: 'r9', name: 'John' },
            { id: 'r10', name: 'Ellen' }
        ],
        events: [
            {
                resourceId : 'r1',
                startDate  : new Date(2017, 0, 1, 10),
                endDate    : new Date(2017, 0, 1, 12),
                name       : 'Click me',
                iconCls    : 'b-fa b-fa-mouse-pointer'
            },
            {
                resourceId : 'r2',
                startDate  : new Date(2017, 0, 1, 12),
                endDate    : new Date(2017, 0, 1, 13, 30),
                name       : 'Drag me',
                iconCls    : 'b-fa b-fa-arrows-alt'
            },
            {
                resourceId : 'r3',
                startDate  : new Date(2017, 0, 1, 14),
                endDate    : new Date(2017, 0, 1, 16),
                name       : 'Double click me',
                eventColor : 'purple',
                iconCls    : 'b-fa b-fa-mouse-pointer'
            },
            {
                resourceId : 'r4',
                startDate  : new Date(2017, 0, 1, 8),
                endDate    : new Date(2017, 0, 1, 11),
                name       : 'Right click me',
                iconCls    : 'b-fa b-fa-mouse-pointer'
            },
            {
                resourceId : 'r5',
                startDate  : new Date(2017, 0, 1, 15),
                endDate    : new Date(2017, 0, 1, 17),
                name       : 'Resize me',
                iconCls    : 'b-fa b-fa-arrows-alt-h'
            },
            {
                resourceId : 'r6',
                startDate  : new Date(2017, 0, 1, 16),
                endDate    : new Date(2017, 0, 1, 19),
                name       : 'Important meeting',
                iconCls    : 'b-fa b-fa-exclamation-triangle',
                eventColor : 'red'
            },
            {
                resourceId : 'r6',
                startDate  : new Date(2017, 0, 1, 6),
                endDate    : new Date(2017, 0, 1, 8),
                name       : 'Sports event',
                iconCls    : 'b-fa b-fa-basketball-ball'
            },
            {
                resourceId : 'r7',
                startDate  : new Date(2017, 0, 1, 9),
                endDate    : new Date(2017, 0, 1, 11, 30),
                name       : "Dad's birthday!",
                iconCls    : 'b-fa b-fa-birthday-cake',
                style      : 'background-color : teal; font-size: 18px'
            }
        ]
    };
};
const sliderConfig = {
    text        : 'Set Bar Margin',
    min         : 0,
    max         : 15,
    width       : '14em',
    showTooltip : false
};

export { useSchedulerConfig, sliderConfig };

[sactory]

Thank for support. I do it.