ListBox item template

[Vedad]

Hi,

I am trying to make custom visual template with specific background coloring for my ListBox. But from what I can see and reproduce, template doesn't actually apply to the item, but to child element within. 

Custom template allows me to set "in item" layout of elements and some of their properties, but even if i manage to apply background color, it doesn't work properly. 

I tried even with hardcoding style into template directly instead of using class, and nothing works.

Is this the bug or basically "item" template is not really item template but only item text template (I didn't see this written anywhere)?

Please find dojo showing behavior here: https://dojo.telerik.com/udeNIxul/3

EDIT: Template works as expected on the ListView here: https://dojo.telerik.com/uleKARuN

Thanks and regards,

Vedad

[Georgi Denchev]

Hello, Vedad,

Thank you for the provided Dojo examples.

With the Kendo ListBox you have the <ul> element which holds each individual item (<li>) elements. Each list item has its own span element which holds the text of the item(by default). The template element will be rendered inside this <span> element.

The problem with the Dojo is that the container element of the template is also a span which is an inline element and you can't properly configure its width and height, and background-color.

Current:

<span class="k-state-default" style="background-color: blue"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>

I would advise that you use a block element(such as div) instead and then configure the background and other properties. Additionally you can increase the width of the items to make sure that the background covers the entire <li> space:

<div class="custom-template-class k-block"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></div>

CSS:

      .k-list-item, .k-list-item-text {
        width: 100%;
      }

      .custom-template-class {
        width: 100%;
        color: black;
        background-color:cyan;
      }

Dojo example:

https://dojo.telerik.com/@gdenchev/UbAKOciL 

Best Regards,
Georgi Denchev
Progress Telerik

[Vedad]

Hi Georgi,

thank you very much for your answer. I did tried with the div as well, but also this piece of code was missing on my case.

      .k-list-item, .k-list-item-text {
        width: 100%;
      }

In combo with the div, it works as expected.

If I may ask one more question, since it is related to the same topic.

Is there any way how I can set background color on item based on say name value (Vedad: Blue, Georgi: Green etc.)

Thank you and best regards,

Vedad

[Georgi Denchev]

Hi, Vedad,

Yes, you can set the color based on one or more of the values in the dataItem, however I would recommend that you specify the template as function in this case. Otherwise it will be difficult to read and debug later on.

First remove the background color from the custom class:

      .custom-template-class {
        width: 100%;
        color: black;
      }

Then define the template as a function and use a switch statement(or some other logic) to change the color based on the value:

          function customerTemplate(dataItem) {
            let color = 'cyan'; // default

            switch(dataItem.ContactName) {
              case "Maria Anders":
                color = 'red';
                break;
              case "Ana Trujillo":
                color = '#b342f5';
                break;
            }

            let div = '<div class="custom-template-class k-block" style="background-color:'+color+'"><h3>'+dataItem.ContactName+'</h3><p>'+dataItem.CompanyName+'</p></div>';

            return div;
          }

And finally attach the function to the ListBox:

template: customerTemplate,

Dojo:

https://dojo.telerik.com/@gdenchev/onAdIZer 

Best Regards,

Georgi

[Vedad]

Hi Georgi,

thanks for your answer, now it makes sense. I completely forgot about option to declare template as a function. :)

 

Thanks and cheers,

Vedad

[Erik]

It seems in the 2023.1.117 version, the k-list-item-text span that you automatically add has a ::before element with content : "\200b".

This is adding 17px or so to the height of each element when using a template (the product demos show the same problem).

Is this intentional? or is it a bug that slipped into the release?

[Georgi Denchev]

Hi, Erik,

There is an open enhancement issue in our Themes repository about this behavior:

https://github.com/telerik/kendo-themes/issues/3818 

I'll add a comment that this has been brought up again.