Show cool things you have done with our products


Post by SIM-LTD »

Hi there

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

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
Attachments
Capture d’écran 2019-10-10 à 18.33.37.png
Capture d’écran 2019-10-10 à 18.33.37.png (19.93 KiB) Viewed 11157 times

Post by 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/
    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
        }
    },

Post by 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.

Post by saki »

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

Post by 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?

Post by sergey.maltsev »

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);

Post by 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.

Post Reply