Premium support for our pure JavaScript UI components


Post by symas »

Hi

I try to show a Button with Icon in the ResourceInfo-ColumnHeader. For this I try to use the headerRenderer-Property, but with no success.

Can you help me, whats wrong here?

        columns: [
            {
                type: 'resourceInfo',
                field: 'name',
                htmlEncodeHeaderText: false,
                headerRenderer(context) {
                    return `<label>Mitarbeiter</label>&nbsp;&nbsp;<bryntum-button icon="b-icon b-icon-angle-right" iconAlign="end" text="add" class="addnew "></bryntum-button> `;                    
}, width: '15em', tooltipRenderer: ({ record }) => `TODO: Hier werden die Details zum Monteur angezeigt<br><b>(${record.name})</b>`, showEventCount: false, showMeta: record => { return ` <div><a class="b-fa b-fa-phone" title="${record.dto.phoneNumber ? record.dto.phoneNumber + ' anrufen' : 'keine Telefonnummer'}"></a> ${record.dto.location} / ${record.dto.capability} / ${record.dto.assemblyType}</div> ` } } ],

I want to change the icon with clicking on the button.
Thank you very much for your support.


Post by tasnim »

Hi,

There is no html element named bryntum-button, so that's why it's not working.
You should try adding your own button here

            headerRenderer() {
                return `<button>Button</button>`;
            },

This will work

I want to change the icon with clicking on the button.

Here is an example of how you could do this

        {
            type  : 'resourceInfo',
            text  : 'New York office',
            icon : 'b-fa-solid b-fa-coffee',
            headerRenderer(context) {
                window.headerBtnContext = context
                return `<button onclick="headerBtnContext.column.icon = 'b-fa-solid b-fa-circle'">Button</button>`;
            },
            width : '15em'
        }

Post Reply