Bryntum Support Forums

Posted: **Thu Oct 10, 2019 6:38 pm**

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'

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

Thak you for your help

Posted: **Fri Oct 11, 2019 8:18 am**

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/

    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
        }
    },

Posted: **Fri Oct 11, 2019 10:02 am**

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.

Posted: **Fri Oct 11, 2019 10:21 am**

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

Posted: **Fri Oct 11, 2019 10:29 am**

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?

Posted: **Fri Oct 11, 2019 10:33 am**

Hi!

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

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

Posted: **Fri Oct 11, 2019 2:14 pm**

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.

Bryntum Support Forums

eventTooltip - How to hide the tools

eventTooltip - How to hide the tools

Re: eventTooltip - How to hide the tools

Re: eventTooltip - How to hide the tools

Re: eventTooltip - How to hide the tools

Re: eventTooltip - How to hide the tools

Re: eventTooltip - How to hide the tools

Re: eventTooltip - How to hide the tools