Our powerful JS Calendar component


Post by conn.finn »

Hello,

I have two questions concerning the interaction between the Grid and the Calendar; any help you can provide would be appreciated!

  1. Is there a way to pin the title of the Grid to the top of the Grid after it collapses? On the Bryntum demo https://bryntum.com/products/calendar/examples/dragfromgrid/, the title is pinned to the top after collapse. But in the Bryntum Salesforce LWC demo example, I replaced the code in the createCalendar() method with the code from the demo https://bryntum.com/products/calendar/examples/dragfromgrid/ and added “collapsed: true” to the Grid, and the title of the Grid will shift to the bottom after expanding and collapsing it once (screenshot attached)
  2. Can I request functionality to add icons via an HTML string to the selected item in the Bryntum Combo using displayValueRenderer? I saw this feature request post viewtopic.php?f=51&t=21262&p=105214#p105214 and noticed that it got removed from the 5.2.x milestone.

Thanks again,
Connor

Attachments
Screen Shot 2023-05-11 at 1.11.15 PM.png
Screen Shot 2023-05-11 at 1.11.15 PM.png (1.21 MiB) Viewed 356 times

Post by marcio »

Hey Connor,

Regarding your first question, that would be some CSS that you can use to align the button and the title correctly, if you could share your project, we could assist you on this.

Regarding the second part, I added a note to the ticket, but if you want to speed up the development of that feature, you can sponsor it, please contact our services to get more information about that.

Best regards,
Márcio


Post by Animal »

The grid header looks like a CSS issue. Check the DOM order and how the CSS is laying it out.

For a Combo, the displayValueRenderer is what creates text to put back into the input field on selection of a record.

The listItemTpl could be what you need for creating content inside the dropdown List.

Or, you could just use the itemIconTpl for more granularity. Like the ResourceCombo does:

Screenshot 2023-05-11 at 22.45.46.png
Screenshot 2023-05-11 at 22.45.46.png (384.4 KiB) Viewed 347 times

Post by Animal »

It's not documented. I am hoping to move away from this ugly "Template" concept with huge and ugly strings of HTML to create an dadd up, and move to a DomConfig object based way of customizing a List's content, so I don't really want to make the sub templates public now.

But if and when I make the change, the templates should continue to be supported.


Post by conn.finn »

Thanks for the responses! I just wanted to follow up on my first question again and provide some simplified code for you; the issue only seems reproducible in LWC. The title is properly placed initially, but after expanding the grid and then collapsing it again, the title now will appear towards the bottom of the container like in the picture.

I haven't figured out a great way to handle this with pure CSS but I could be missing something as well - any additional help would be appreciated.

Thanks,
Connor

Attachments
calendar_component.zip
(4.18 KiB) Downloaded 19 times

Post by Animal »

That sounds like a bug in LWC. It is an extremely hostile environment and has many broken, buggy, or just omitted APIs.

I have seen code to work around element.insertBefore(newNode, refNode) not working and instead calling appendChild

When you examine the DOM before and after the bug hitting, is the element order different?

If so, what happens if you attempt to correct the order in the debugger using the DOM standard APIs?


Post Reply