ListBox item template

2 Answers 365 Views
ListBox
Vedad
Top achievements
Rank 2
Bronze
Bronze
Veteran
Vedad asked on 01 Mar 2022, 07:00 PM | edited on 03 Mar 2022, 02:36 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Denchev
Telerik team
answered on 04 Mar 2022, 01:53 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Vedad
Top achievements
Rank 2
Bronze
Bronze
Veteran
commented on 04 Mar 2022, 03:24 PM

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
Telerik team
commented on 04 Mar 2022, 04:18 PM | edited

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
Top achievements
Rank 2
Bronze
Bronze
Veteran
commented on 05 Mar 2022, 09:28 AM

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

0
Erik
Top achievements
Rank 1
Iron
Iron
answered on 13 Mar 2023, 10:00 PM

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
Telerik team
commented on 16 Mar 2023, 10:54 AM

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.

Tags
ListBox
Asked by
Vedad
Top achievements
Rank 2
Bronze
Bronze
Veteran
Answers by
Georgi Denchev
Telerik team
Erik
Top achievements
Rank 1
Iron
Iron
Share this question
or