I am using below piece of code inside <kendo-grid>. Here, I am using a dropdown and kendo excel export button inside toolbar. dropdown is in left and button is right aligned. Earlier, it was working till Kendo 18. When I upgraded to kendo 19, it stopped working.
Root Cause is kendo-dropdownlist contains an array button. When we click on button to expand dropdown, excel export button gets the focus and dropdown loses focus. When we click on dropdown button, 'k-focus' class is applied on 'excel-export'. Because of this, dropdown is not working.
Code:
<ng-template kendoGridToolbarTemplate>
<div class="toolbar-container" style="display: flex; align-items: center; gap: 16px; width: 100%;">
<!-- Dropdown Wrapper -->
<div style="flex-shrink: 0;">
<kendo-dropdownlist [data]="data"
[(ngModel)]="someField" [valuePrimitive]="true" (valueChange)="perform()"
[popupSettings]="{ appendTo: 'component' }" style="width: 175px;">
</kendo-dropdownlist>
</div>
<!-- Spacer to push button to right -->
<div style="flex-grow: 1;"></div>
<!-- Excel Export Button -->
<div style="flex-shrink: 0;">
<button type="button" kendoGridExcelCommand>Export</button>
</div>
</div>
</ng-template>