eventTooltip - How to hide the tools

[SIM-LTD]

Hi there

We have been struggling on something that should be quite easy but.. we can't

In the Scheduler, we have entirely customized the toolTip; so...
Taking into account the code below, How can we hide the "tools" according to some value in 'eventRecord'

Code: Select all

 features: {
    eventTooltip : {
    tools : [ {  .....  }],  <-- How to hide the tool ? if -> this.eventRecord.xxx === value
    header : {  .... },
    template : data =>....
     ......

Thak you for your help

[sergey.maltsev]

Hi!

Use beforeShow event to configure tip.
https://www.bryntum.com/docs/scheduler/#Common/widget/Tooltip#event-beforeShow

Updated code from this demo
https://www.bryntum.com/examples/scheduler/tooltips/

Code: Select all

    features : {
        eventTooltip : {
            tools : [
                {
                    ref     : 'copyTool',
                    cls     : 'b-fa b-fa-cut',
                    handler : function() {
                        this.eventRecord.split();
                        this.hide();
                    }
                },
                {
                    ref     : 'trashTool',
                    cls     : 'b-fa b-fa-trash',
                    handler : function() {
                        scheduler.eventStore.remove(this.eventRecord);
                        this.hide();
                    }
                },
                {
                    ref     : 'moveLeftTool',
                    cls     : 'b-fa b-fa-angle-left',
                    handler : function() {
                        this.eventRecord.shift(-1);
                    }
                },
                {
                    ref     : 'moveRightTool',
                    cls     : 'b-fa b-fa-angle-right',
                    handler : function() {
                        this.eventRecord.shift(1);
                    }
                }
            ],

            header : {
                titleAlign : 'start'
            },

            template : data => `
                <dl>
                    <dt>Assigned to:</dt>
                    <dd>
                         ${data.eventRecord.resource.get('image') ? `<img class="resource-image" src="../_shared/images/users/${data.eventRecord.resource.get('image')}"/>` : ''} 
                         ${data.eventRecord.resource.name}
                    </dd>
                    <dt>Time:</dt>
                    <dd>
                        ${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}
                    </dd>
                    ${data.eventRecord.get('note') ? `<dt>Note:</dt><dd>${data.eventRecord.note}</dd>` : ''}
                    
                    ${data.eventRecord.get('image') ? `<dt>Image:</dt><dd><img class="image" src="${data.eventRecord.get('image')}"/></dd>` : ''}
                </dl>
                `,

            listeners : {
                beforeShow : ({ source : tip }) => {
                    const
                        widgets = tip.widgetMap,
                        event   = scheduler.resolveEventRecord(tip.activeTarget),
                        hide    = event.resourceId === 'r6';
                    widgets.copyTool.hidden = hide;
                    widgets.trashTool.hidden = hide;
                    widgets.moveLeftTool.hidden = hide;
                    widgets.moveRightTool.hidden = hide;
                }
            }

            // You can also use Tooltip configs here, for example:
            // anchorToTarget : false,
            // trackMouse     : true
        }
    },

[SIM-LTD]

Hi Sergey

Thank you, we really appreciate your support on this.

To be honest we have thought about this way, beforeShow and hiding each element via "hidden"
but we were so focusing on hiding the tools itself, that we lost pretty much time for nothing...

Hence, according to you there no way to hide the tools itself directly, except hiding each element of the tools.

[saki]

You could also try to hide the tools with a css, if you want to hide them for all tooltips.

[SIM-LTD]

Hi Saki

Right, We did not think about that way too.

Thank you very much.

Can "DomHelper" be used so as to manage some element on the fly? instead of manipulating the CSS file directly?

[sergey.maltsev]

Hi!

The code is to show how to hide a certain component if you want.
Off course you could hide all .

Code: Select all

Object.values(tip.tools).forEach(tool => tool.hidden = hide);

[saki]

The question is if you want to show and hide the tools on the fly at runtime. In this case hiding and showing them in the code would be a better solution.

If you just want to hide them globally once forever, then you can add a simple css to your stylesheet that would hide them.