Premium support for our pure JavaScript UI components


Post by cpritchard »

Hello, I am trying to follow some of your examples and show custom styling in the display value for my Combo's.

In the EventEdit I have combos for event style, event color and icon class. You have an example here https://bryntum.com/examples/scheduler/dragfromgrid/ that I was trying to follow.

Originally my combo config was like this:

{
      type         : 'combo',
      name         : 'iconCls',
      label        : 'Icon',
      placeholder  : 'Choose icon',
      editable     : false,
      valueField   : 'id',
      displayField : 'value',
      store        : new Store({
        data : [
          { id : 'b-fa b-fa-wrench',         value : 'Wrench'},
          { id : 'b-fa b-fa-hammer',         value : 'Hammer'},
          { id : 'b-fa b-fa-soap',           value : 'Soap'},
          { id : 'b-fa b-fa-clock',          value : 'Alarm Clock'},
          { id : 'b-fa b-fa-bell',           value : 'Bell'},
          { id : 'b-fa b-fa-clipboard-list', value : 'Clipboard List'},
          { id : 'b-fa b-fa-truck',          value : 'Truck'},
          { id : 'b-fa b-fa-dolly',          value : 'Dolly'},
          { id : 'b-fa b-fa-cart-flatbed',   value : 'Cart Flatbed'},
        ]
      }),
      listItemTpl  : (item: Dropdown) => 
      `<i class="${item.id}" style="margin-right: 1em"></i>${item.value}`
    }

But I was able to create an IconCombo.js and copy the code from your example and make it work like so:

{
      type         : 'iconcombo',
      name         : 'iconCls',
      label        : 'Icon',
      placeholder  : 'Choose icon',
      editable     : false,
      valueField   : 'id',
      displayField : 'value',
    }

My question is is this achievable through using the

displayValueRenderer

instead?

Your example uses methods of

 
 syncInputFieldValue(...args) {
    this.icon.className = this.value;
    super.syncInputFieldValue(...args);
  }

and

get innerElements() {
    return [
      {
        reference : 'icon',
        tag       : 'i',
        className : 'b-fa b-fa-cog',
        style     : {
          marginLeft  : '.8em',
          marginRight : '-.3em'
        }
      },
      ...super.innerElements
    ];
  }

which are not available anywhere in your documentation about Combo's, so I do not under stand what is happening with these methods.

Also, is there any examples of how I can apply the same custom styling to the other combo's in order to show the color square next to the color name, or the event style in the display value like they appear in the dropdown list?

I can make this muti-color box appear all the time, but I cannot get it to switch to the selected color value like it does for the icons.

Thanks,
Cody.

Attachments
Screen Shot 2022-05-12 at 6.26.51 PM.png
Screen Shot 2022-05-12 at 6.26.51 PM.png (31.71 KiB) Viewed 547 times
Screen Shot 2022-05-12 at 6.27.14 PM.png
Screen Shot 2022-05-12 at 6.27.14 PM.png (41.83 KiB) Viewed 547 times

Post by tasnim »

It's not possible to create the whole thing with displayValueRenderer because it's only for customizing the displayed value in the combo https://bryntum.com/docs/scheduler/api/Core/widget/Combo#config-displayValueRenderer.

I've created a feature request for you, here is it: https://github.com/bryntum/support/issues/4620

Best regards,
Tasnim


Post by cpritchard »

Thanks for the reply. Can you help in offering any clarity about the functions i mentioned,

 syncInputFieldValue

and

get innerElements()

?

As i mentioned, they are not found anywhere in your API documentation, and I can only access them in a .js file an not a .ts file for Angular, so im not sure what they are doing or how to properly use them, what parameters they accept, etc.


Post by tasnim »

syncInputFieldValue is called internally when the value changes, it is used to change the icon to the one it picked in the list.
And
innerElements() are the elements in the field (combo), used there to inject an element for the icon


Post Reply