Premium support for our pure JavaScript UI components


Post by rclarke »

Hi,

We're trying to display avatars in the ResourceAssignmentColumn in Gantt by enabling the showAvatars config, but we're finding some strange inconsistencies between the chip view and the avatar view:

  • The chip elements have a data-id attribute with the assignment ID, this is missing from the avatars so we can't determine which one has been clicked when handling the column click & double-click events.

  • The itemTpl function no longer runs as it did before enabling showAvatars.

The docs are a little unclear about whether the second point is expected or not - they only mention the chip view in relation to itemTpl, but it never explicitly says it's not supported for avatars. Really we just need a way to get that ID from the clicked element, ideally it would just be there on the avatar but we could add it ourselves if we had a way to customise the avatar content.

Would either of these be possible?


Post by tasnim »

Hi,

Could you please explain in details about your use case and what are you trying to achieve?


Post by rclarke »

Hi,

Sure, we've got a Gantt chart that uses the ResourceAssignmentColumn to display assigned resources, currently in the default "chip view"(i.e without setting the showAvatars property: https://bryntum.com/products/gantt/docs/api/Gantt/column/ResourceAssignmentColumn#config-showAvatars).
We also respond to clicks on these chips (to show additional info about the resource) and because of the lack of click events on the column, we instead listen to cellclick and celldblclick on the Gantt view, then find which resource was clicked by getting the data-id from the target in the event handler.

The issue is that if we enable that showAvatars config on the column in order to get avatars instead of chips, we can no-longer find the resource that was clicked because the data-id isn't populated on those avatar elements the same way it is on the chips.

Additionally, we tried using the itemTpl config to override the item rendering and add the data-id ourselves, but again the config doesn't seem to be supported in avatar mode and our itemTpl function is just ignored.

Here's a code example to demonstrate the first issue: https://codepen.io/Rhys-Clarke/pen/jORwGOB - if you click any of the resource chips you'll get a browser alert containing the assignment ID, but if you change the value of showAvatars at the top of the file to true this no longer works.


Post by marcio »

Hey rclarke,

Thanks for the explanation and example. I created a ticket to check how can we improve that avatar customization https://github.com/bryntum/support/issues/8882

Maybe a workaround (not ideal) would be to add a custom listener like the following

EventHelper.addListener(document, 'click', (ev) => {
  if(ev.target.className.includes('b-resource-avatar')){
    // use ev.target.innerText to identify which resource was clicked
  }
})

Best regards,
Márcio


Post by mats »

As a workaround, you can find the info you need on event.target.elementData.


Post by rclarke »

Thanks, Mats - that seems to work perfectly. Is elementData a custom property? I noticed it doesn't seem to be populated in chip view, so it'd be great to see this stuff documented if possible!

Thanks again.


Post by mats »

It's not meant to be used by anyone except us, so it won't be documented. The new resourceAssignmentClick event will appear in the next patch (out in a day or two)


Post by rclarke »

Ok, great - we'll wait for that event then. Cheers!


Post Reply