This is a migrated thread and some comments may be shown as answers.
Update custom toolbar action example
1 Answer 14 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Brandon asked on 10 Feb 2020, 01:31 AM

First, Im looking for the ability to customize the dropdown button on the toolbar. I found this example but it appears to be out of date from the latest kendo ui libs and doesn't work in angular 9. I mean an exact copy of this example running Angular 9.0.0, results in no custom button.

So close on so many of these things but so far from being a useful library when custom matters in business apps.

It should not be that difficult to provide a custom template for the dropdown list.

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 11 Feb 2020, 03:20 PM

Hi Brandon,

Thank you for reaching out to us.

It seems that the reported discrepancy is caused due to the new usage of the @ViewChild decorator introduced in Angular 9. Please check the following issue and the provided description from the official Angular GitHub repository for details:

Passing the proper static parameter yields the expected functionality when using Angular 9:

in custom-tool.component.ts

export class CustomToolComponent extends ToolBarToolComponent {
    public tabindex = -1;

    @Input() public text: string;

    @ViewChild('toolbarTemplate', {static: true}) public toolbarTemplate: TemplateRef<any>;
    @ViewChild('toolbarElement') public toolbarElement: ElementRef;
    @ViewChild('button') public button: ElementRef;

Please check the attached Angular 9 project demonstrating the two examples from the referenced article. The second example demonstrating how to add a Kendo DropDownList Component as custom tool to a responsive ToolBar didn't need any adjustments as it already used @ViewChild properly:

export class CustomToolComponent extends ToolBarToolComponent implements OnInit {
    @Input() public text: string;

    @ViewChild('toolbarTemplate', { static: true }) public toolbarTemplate: TemplateRef<any>;
    @ViewChild('toolbarElement', { static: false }) public toolbarElement: ElementRef;

    @ViewChild('popupTemplate', { static: true }) public popupTemplate: TemplateRef<any>;
    @ViewChild('popupElement', { static: false }) public popupElement: ElementRef;

    @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) public dropdownlist: DropDownListComponent;
    @ViewChild('button', { static: false }) public button: ElementRef;

Currently the examples on our documentation site are based on Angular 7 as there haven't been major differences between version 7 and 8 of the framework. Indeed, in the coming weeks, we will update all examples on our documentation to use Angular 9.

Please let us know in case further assistance is required for this case. Thank you in advance.

Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question