How to add Seperator In Kendo DropDownList - Angular

[Sashika]

Hi, 
Currently, I have a kendo dropdown list that looks like this,

I want to add a separator between the last two options (not between all options). Here is my requirement.

I want to know I can do this with angular. 

[Hetali]

Hi Sashika,

In order to add a separator between the different categories of the Kendo UI DropDownList, add grouping to the DropDownList data. You can also hide the Group title from the dropdown. For example:

public data: Array<any> = [
  { name: 'Month-to-Date', category: 'defined' },
  { name: 'Custom', category: 'undefined' },
  { name: 'Custom1', category: 'undefined1' }
];

public groupedData: GroupResult[] = groupBy(this.data, [{ field: 'category' }])

.k-list-group-sticky-header,
.k-popup .k-list-group-item .k-list-item-text {
  display: none;
} 

In this StackBlitz example, I have grouped the data to add a separator in the Kendo UI DropDownList popup and also hidden the Group title.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Daniel]

Hi 

I have the same problem as PO

I looked in youur stack blitz code but result of it looks like this:

separator is not present anymore. Can you update your stackblitz example?

[Hetali]

Hi Daniel,

Thank you for reaching out. I have updated the answer with the latest version and modified class names in the CSS to add a separator and hide the title in the Kendo UI DropDownList.

Please give the example a try and let me know if it helps or if you have further questions pertaining to adding a separator.

Regards,
Hetali
Progress Telerik

[Daniel]

Hi,

Thank you for updating your example.

One more question.

Can I somehow add some custom class to this popup window? It is bound to body so adding these styles 

.k-list-group-sticky-header,
.k-popup .k-list-group-item .k-list-item-text {
  display: none;
} 

will work on all dropdowns on my web page. And there are some other dropdowns which use grouping and display some group titles. After applying above styles group titles from other dropdowns disappeared too :(

[Hetali]

Hi Daniel,

Yes. By using the popupClass configuration of the popupSettings, custom styling can be applied to that class itself. For example:

<kendo-dropdownlist
  [popupSettings]="{ popupClass: 'addSeparator' }"
>
</kendo-dropdownlist>

.addSeparator .k-list-group-sticky-header,
.addSeparator.k-popup .k-list-group-item .k-list-item-text {
  display: none;
} 

In this updated StackBlitz example, I have added the styling to the DropDownList popup with the defined popupClass.

Let me know if you have additional questions pertaining to the popupSettings of the DropDownList.

Regards,
Hetali
Progress Telerik

[Daniel]

Hi Hetali,

No more questions . These popup settings fixed it all :)

Thanks a lot!