Page 1 of 2
[ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Tue Jan 24, 2023 6:13 pm
by udo
hi,
is it possible to display all involved resources in an eventTooltip template?
note: to display the one assigned, I do this(simplified):
features: {
...
eventTooltip: {
template: data => `<dl>
<dt>Assigned to:</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.resource.name)}
</dd>
</dl>`,
},
thanks, udo
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Tue Jan 24, 2023 6:42 pm
by marcio
Hey udo,
We have https://bryntum.com/products/scheduler/docs/api/Scheduler/model/EventModel#field-resources
So you can do something like (just as an example):
features : {
eventDragSelect : true,
eventTooltip : {
template : data => `<dl>
<dt>Assigned to:</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.resources.map(resource => resource.name).join(','))}
</dd>
</dl>`
}
},
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Wed Jan 25, 2023 11:03 am
by udo
nice! thank you marcio! (I also appreciate the docs link!)
note: I did not find element data.eventRecord.resources on console.log(). probably some magic involved
I now tried to iterate over the resources to display them in <div> s but they won't show. guess I'm missing something :
...
template: data => `<div>
<div>Assigned to:</div>
<div>
${StringHelper.encodeHtml(data.eventRecord.resources.map(r => r.id).join(', '))}
</div>
<br>
<div>Assigned to:</div>
<div>
<strong>No show :|</strong>
${data.eventRecord.resources.map(r => {
`<div>${StringHelper.encodeHtml(r.name)}</div>`
}).join('')}
</div>
</div>`,
...
do you have a suggestion how to get it to work?
thanks, udo
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Wed Jan 25, 2023 3:54 pm
by marcio
Hey udo,
In the second resources.map
, you have {}
but you don't have a return statement, that's why is not working, if you remove the {}
or add a return
statement, it works
<div>
<strong>No show :|</strong>
${data.eventRecord.resources.map(r =>
`<div>${StringHelper.encodeHtml(r.name)}</div>`
).join('')}
</div>
or
<div>
<strong>No show :|</strong>
${data.eventRecord.resources.map(r => {
return `<div>${StringHelper.encodeHtml(r.name)}</div>`
}).join('')}
</div>
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Wed Jan 25, 2023 4:21 pm
by udo
thank you marcio. yes. apologies for this
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Thu Jan 26, 2023 11:42 am
by udo
sorry marcio for bugging you with the following :| (in the same context)
is there a possibility to order the resources alphabetically (by key name )?
I tried the following without success:
${data.eventRecord.resources.sort((a, b) => (a.name > b.name)).map(r => `<div>${StringHelper.encodeHtml(r.name)}</div>`).join('')}
note: guess that data.eventRecord.resources is immutable and is not changed.
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Thu Jan 26, 2023 1:07 pm
by alex.l
Why don't you try to sort
after map
?
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Thu Jan 26, 2023 1:08 pm
by alex.l
Btw, template
is a method. So you can add more code before return template code and do whatever you need.
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Thu Jan 26, 2023 6:04 pm
by udo
I first have to sort and then map (output the result). otherwise it is not working... (or I misunderstood what you mean)
I would like to implement similar to this -> viewtopic.php?p=117206#p117206
if there are alternatives how to do it, an example would help...
thanks, udo
Re: [ANGULAR] eventTooltip - how to display all involved resources of a multi-assignment
Posted: Thu Jan 26, 2023 8:31 pm
by marcio
Hey udo,
You're looking for this to sort it
${
data.eventRecord.resources.sort(
(a, b) => a.name.localeCompare(b.name)
).map(r =>
`<div>${StringHelper.encodeHtml(r.name)}</div>`
).join('')
}