Declined
Last Updated: 27 Aug 2025 06:48 by ADMIN
Muskan
Created on: 20 Aug 2025 10:13
Category: Kendo UI for Angular
Type: Bug Report
0
In kendo 19, not able to use kendo-dropdownlist and kendoExcelExportCommand together inside kendo-toolbar

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>

1 comment
ADMIN
Martin Bechev
Posted on: 27 Aug 2025 06:48

Hi Muskan,

Because of some accessibility and keyboard improvements (reusing the Kendo Toolbar inside the Grid), the developer needs to prevent the default action click of custom controls like DropDownList and apply the kendoGridToolbarFocusable directive. This would prevent stealing the focus and closing the pop-up immediately.

<kendo-dropdownlist [data]="listItems" kendoGridToolbarFocusable (click)="$event.stopPropagation()"></kendo-dropdownlist>

For more details, please check this article

https://www.telerik.com/kendo-angular-ui/components/grid/toolbar/toolbar-template#focusing-custom-toolbar-elements

I hope this helps. Let me know how it goes.

Regards,
Martin Bechev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.