kendo-toolbar-dropdownbutton not working in kendoGridToolbarTemplate Angular 7

Question

I would like to use a kendo-toolbar-dropdownbutton in kendoGridToolbarTemplate. Everything else except kendo-toolbar-dropdownbutton appears as expected.

<ng-template kendoGridToolbarTemplate>
    <div class="col-xs-12 col-md-3 col-lg-3 col-xl-3 example-col" style="padding: 0 !important;">
         <button aria-label="New" kendoGridAddCommand [disabled]="isInEditingMode || isUpdateLoading || !isGDPRApproved || (!isTemplate && !isAllowedToUpdate && !isNewAPForm) || (!isTemplate && !isAllowedToCreate && isNewAPForm) || (isTemplate && !isAllowedToUpdateExpensesTemplates && !isNewAPForm) || (isTemplate && !isAllowedToCreateExpensesTemplates && isNewAPForm)"><span class="k-icon k-i-plus-circle"></span>{{lbl_New}}</button>
         <button aria-label="Cancel" *ngIf="isInEditingMode" (click)="cancelGridEdit()" class="k-button k-primary">{{lbl_Cancel}}</button>
         <kendo-toolbar-dropdownbutton [text]="lbl_Actions"
                                       [icon]="'grid-layout'"
                                       [disabled]="isUpdateLoading"
                                       [data]="dropdownButtonDataLines">
         </kendo-toolbar-dropdownbutton>
         <button aria-label="Excel" type="button" kendoGridExcelCommand [disabled]="isUpdateLoading"><span class="k-icon k-i-file-excel"></span>{{lbl_ExportToExcel}}</button>
                 <button aria-label="PDF" kendoGridPDFCommand [disabled]="isUpdateLoading"><span class='k-icon k-i-file-pdf'></span>{{lbl_ExportToPdf}}</button>
                 <button aria-label="saveCurrentGridLinesState" class="k-button" [disabled]="isUpdateLoading" (click)="saveCurrentGridLinesState()">{{lbl_SaveCurrentView}}</button>
                 <button aria-label="LoadSavedGridLinesState" class="k-button" *ngIf="savedGridLinesStateAPsExists" [disabled]="isUpdateLoading" (click)="loadSavedGridLinesState()">{{lbl_LoadSavedView}}</button>
                 <button aria-label="RemoveSavedGridLinesState" class="k-button" *ngIf="savedGridLinesStateAPsExists" [disabled]="isUpdateLoading" (click)="removeSavedGridLinesState()">{{lbl_RemoveSavedView}}</button>
                 <button aria-label="ClearSavedGridLinesState" class="k-button" *ngIf="savedGridLinesStateAPsExists" [disabled]="isUpdateLoading" (click)="clearSavedGridLinesState()">{{lbl_ClearView}}</button>
    </div>
    <div class="col-xs-12 col-md-9 col-lg-9 col-xl-9 row example-config" style="float: right; padding: 0 !important;">
         <div *ngFor="let column of columns" class="col-xs-12 col-md-3 col-lg-2 col-xl-2 checkbox-col" style="width: 8.09%">
                 <input type="checkbox"
                        id="{{column.field}}"
                        class="k-checkbox"
                        [disabled]="isDisabled(column.field)"
                        [checked]="!isHidden(column.field)"
                        (change)="hideColumn(column.field)" />
                 <label class="k-checkbox-label" for="{{column.field}}">{{column.title}}</label>
         </div>
     </div>
</ng-template>

No error comes up in the console. However the kendo-toolbar-dropdownbutton never appears.

If instead of kendo-toolbar-dropdownbutton I use kendo-dropdownbutton

<kendo-dropdownbutton [text]="lbl_Actions"
                      [icon]="'grid-layout'"
                      [disabled]="isUpdateLoading"
                      [data]="dropdownButtonDataLines">
</kendo-dropdownbutton>

I get the error

compiler.js:2430 Uncaught Error: Template parse errors:
Can't bind to 'text' since it isn't a known property of 'kendo-dropdownbutton'.
1. If 'kendo-dropdownbutton' is an Angular component and it has 'text' input, then verify that it is part of this module.
2. If 'kendo-dropdownbutton' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

All Kendo Modules (such as GridModule, ButtonsModule, etc) are correctly imported.

Please let me know how I can solve this issue or find a workaround to use it. Thank you in advance.

Answer 1

I found the solution.

Instead of kendo-toolbar-dropdownbutton I should use kendo-dropdownbutton as mentioned in my question. However, text is not an input of kendo-dropdownbutton. It only exists for kendo-toolbar-dropdownbutton. This is why the error comes up.

So, the actual answer is:

<kendo-dropdownbutton [icon]="'grid-layout'"
                      [disabled]="isUpdateLoading"
                      [data]="dropdownButtonDataLines">
  {{lbl_Actions}}
</kendo-dropdownbutton>