Update custom toolbar action example

2 posts, 0 answers
  1. Brandon
    Brandon avatar
    7 posts
    Member since:
    Nov 2019

    Posted 09 Feb Link to this post

    First, Im looking for the ability to customize the dropdown button on the toolbar. I found this example https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/ 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.

  2. Svetlin
    Admin
    Svetlin avatar
    448 posts

    Posted 11 Feb Link to this post

    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:

    https://github.com/angular/angular/pull/28810#issue-254078020

    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.

    Regards,
    Svetlin
    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.
Back to Top