This is a migrated thread and some comments may be shown as answers.

Visual bug on grouping

4 Answers 54 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 01 Oct 2017, 03:06 PM

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?

 

4 Answers, 1 is accepted

Sort by
0
Tayger
Top achievements
Rank 1
Iron
answered on 01 Oct 2017, 10:47 PM

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?

0
Dimitar
Telerik team
answered on 03 Oct 2017, 01:53 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
Iron
answered on 09 Oct 2017, 10:03 PM
I just have implemented your solution and it works great, thank you! 
0
Dimitar
Telerik team
answered on 10 Oct 2017, 07:37 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Tayger
Top achievements
Rank 1
Iron
Dimitar
Telerik team
Share this question
or