eventTooltip - How to hide the tools
eventTooltip - How to hide the tools
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'
Thak you for your help
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 =>....
......
- Attachments
-
- Capture d’écran 2019-10-10 à 18.33.37.png (19.99 KiB) Viewed 4975 times
- sergey.maltsev
- Core Developer
- Posts: 683
- Joined: Mon Dec 24, 2018 9:15 am
Re: eventTooltip - How to hide the tools
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/
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
}
},
Re: eventTooltip - How to hide the tools
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.
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.
Re: eventTooltip - How to hide the tools
You could also try to hide the tools with a css, if you want to hide them for all tooltips.
Re: eventTooltip - How to hide the tools
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?
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
- Core Developer
- Posts: 683
- Joined: Mon Dec 24, 2018 9:15 am
Re: eventTooltip - How to hide the tools
Hi!
The code is to show how to hide a certain component if you want.
Off course you could hide all .
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);
Re: eventTooltip - How to hide the tools
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.
If you just want to hide them globally once forever, then you can add a simple css to your stylesheet that would hide them.