如何对剑道DropDownButton的项目进行分组(在项目之间添加水平线)

Question

我想在Kendo DropDownButton的两个项目之间添加<hr>。我想我需要一些类似于如何将分隔符添加到剑道工具栏splitbutton菜单项的东西，因为所需的功能是相同的。

Html

<kendo-dropdownbutton aria-label="Actions" class="k-button" [disabled]="isLoading" [data]="actionsOptions" (dblclick)="toolBarButtondblclick()" style="padding-bottom: 2px; padding-top: 2px;"><span class="k-icon k-i-grid"></span>{{lbl_Actions}}</kendo-dropdownbutton>

Ts

this.actionsOptions = [
{
text: this.lbl_Copy,
icon: 'copy',
click: () => {
this.copyAPHit();
}
},
{
text: this.lbl_ShowRelations,
icon: 'connector',
click: () => {
this.showRelations();
}
},
{
disabled: (this.segmentsPath !== "APs"),
text: this.lbl_UnSync,
icon: 'non-recurrence',
click: () => {
this.unSync();
}
}
];

因此，我需要在第二项和第三项之间添加一条水平线(单独的(。我怎样才能做到这一点？

Answer 1

我设法使用HTML中的kendoDropDownButtonItemTemplate解决了它。

<kendo-dropdownbutton aria-label="Actions" class="k-button" [disabled]="isLoading" [data]="actionsOptions" (dblclick)="toolBarButtondblclick()" style="padding-bottom: 2px; padding-top: 2px;">
<span class="k-icon k-i-grid"></span>
{{lbl_Actions}}
<ng-template kendoDropDownButtonItemTemplate let-dataItem>
<div style="width: 100%;">
<span class="k-icon k-i-{{ dataItem.icon }}"></span>
<span>{{ dataItem.text }}</span>
<hr *ngIf="dataItem.last" style="display: block; border: 1px solid #bebebe; margin-top: 0; margin-bottom: 0">
</div>
</ng-template>

TS中的数据源应该进行一点修改：

this.actionsOptions = [
{
text: this.lbl_Copy,
icon: 'copy',
click: () => {
this.copyAPHit();
},
last: true
},
{
text: this.lbl_ShowRelations,
icon: 'connector',
click: () => {
this.showRelations();
}
},
{
disabled: (this.segmentsPath !== "APs"),
text: this.lbl_UnSync,
icon: 'non-recurrence',
click: () => {
this.unSync();
}
}
];

其中CCD_ 3用于显示组的最后一项并创建所需的水平行。