[Solved] Visual bug on grouping

[Tayger]

Hello 

I plan to use the groupTemplate functionality of dropdownlist. There is a weird behaviour that also appears in your demo: groupTemplate -> Preview

I also have attached the visual bug as screenshot:

1. The very first group (Argentina) does not consider the groupTemplate as all other groups do. 
2. The very first group (Argentina) gets his own line while all other group titles appears on the line of the first group entry.

I would expect the same behaviour for ALL group names. Is this a bug and if not, how can I fix it to make it look/position all the same?

 

[Tayger]

I could "fix" it by Adding a "Make choice..." entry at top and hiding elements with class k-group-header. Not clean but working.

In between I realized that group entries are always upper case. I couldn't find a way to change that (1. letter upper case, rest lower case), also not by groupTemplate. Is there a way to change that?

[Dimitar]

Hello Tayger,

The described behavior with the first row is implemented by design and its purpose is to display the group that is currently in scroll view. Its content can be configured through the fixedGroupTemplate configuration option. 

I have prepared the following Dojo example, where the fixed template is hidden on dataBound event and then a simple group header is dynamically injected instead. This should force the first group header behavior to be similar to the rest.

Capitalizing the text inside the group headers can be achieved by the following CSS (aslo demonstrated in the above Dojo):

<style>
    .k-popup .k-list .k-item>.k-group { text-transform: capitalize; }
</style>

I hope this helps. In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik

[Tayger]

I just have implemented your solution and it works great, thank you! 

[Dimitar]

Hello,

I am glad to hear that the provided workaround resolved the issue.

I would also like to let you know that there is an official fix for the issue, which will be available with the Kendo UI R3 SP1 release, which is scheduled for mid to late October. More information can be found in the GitHub issue.

Regards,
Dimitar
Progress Telerik