This is a migrated thread and some comments may be shown as answers.

Toolbar, dynamic buttons & overflow

11 Answers 1433 Views

ToolBar

This is a migrated thread and some comments may be shown as answers.

ICT asked on 30 Jun 2020, 08:38 AM

Hello,

i'm trying to create a toolbar component wrapper that allows the user to configure the toolbar passing a list of json objects, using overflow feature.

I'm facing 2 problems

when i hide a button using ngIf the button disappears from normal visualization and appears in the overflow popup, despite the available space. The button appears when a resize is fired.
o often get an error "TypeError: Cannot read property 'nativeElement' of undefined" when the overflow popup is opened

Is there a correct way to create buttons dynamically?

Thanks,

My markup

01.<div

02. class="toolbar-container"

03. [ngClass]="{ 'toolbar-container-closed': !isExpanded }"

04.>

05. <div class="toolbar-expander" title="{{ 'CORE.TOGGLE_TOOLBAR' | translate }}">

06. <i

07. class="material-icons expander"

08. *ngIf="!isExpanded && canCollapse"

09. (click)="toggleExpand()"

10. >

11. keyboard_arrow_down

12. </i>

13. <i

14. class="material-icons expander"

15. *ngIf="isExpanded && canCollapse"

16. (click)="toggleExpand()"

17. >

18. keyboard_arrow_up

19. </i>

20. </div>

21. <div

22. class="toolbar-toolbar-container"

23. [ngClass]="{

24. 'toolbar-toolbar-container-hidden': !isExpanded

25. }"

26. >

27. <kendo-toolbar

28. #toolbar

29. [ngClass]="{

30. 'toolbar-toolbar-right': right,

31. 'toolbar-toolbar-left': !right

32. }"

33. overflow="true"

34. [style.width.%]="100"

35. [popupSettings]="{ animate: false }"

36. >

37. <div *ngFor="let item of config.items">

38. <kendo-toolbar-button

39. *ngIf="item.type === 'button' && !item.hidden"

40. [disabled]="item.disabled"

41. [iconClass]="getIconClass(item.icon)"

42. [text]="item.text"

43. title="{{ item.tooltipText | translate }}"

44. (click)="item.onClick(item)"

45. >

46. </kendo-toolbar-button>

47. <kendo-toolbar-dropdownbutton

48. *ngIf="item.type === 'dropdownbutton' && !item.hidden"

49. [iconClass]="getIconClass(item.icon)"

50. [text]="item.text"

51. [data]="item.data"

52. title="{{ item.tooltipText | translate }}"

53. (itemClick)="onItemClick($event, item)"

54. [textField]="item.textField"

55. >

56. </kendo-toolbar-dropdownbutton>

57. <kendo-toolbar-splitbutton

58. *ngIf="item.type === 'splitbutton' && !item.hidden"

59. [disabled]="item.disabled"

60. [iconClass]="getIconClass(item.icon)"

61. [text]="item.text"

62. [data]="item.data"

63. title="{{ item.tooltipText | translate }}"

64. (buttonClick)="item.onClick(item)"

65. (itemClick)="onItemClick($event, item)"

66. [textField]="item.textField"

67. >

68. </kendo-toolbar-splitbutton>

69. <kendo-toolbar-separator

70. *ngIf="item.type === 'separator' && !item.hidden"

71. ></kendo-toolbar-separator>

72. </div>

73. </kendo-toolbar>

74. </div>

75.</div>

11 Answers, 1 is accepted

answered on 30 Jun 2020, 01:30 PM

Hello Benedetta,

Thanks for the provided details. We are aware of the reported problems. Here are the relevant GitHub issues:

Fortunately there are workarounds for these problems.

The workaround for the first issue is to change programmatically the width of the toolbar when a tool is added. Here is a sample StackBlitz - https://stackblitz.com/edit/angular-wcbek7-zphx68?file=app/app.component.ts. These are the key steps:

When toggling a button we have to also resize the toolbar:

public onToggleButton() {
  this.showButton = !this.showButton;

  this.setSize(99);
  this.setSize(100);
}

Resizing the toolbar has to be done after a button has been toggled. To do that setTimeout is used:

public setSize(percent: number): void {
  // run setTimeout() outside NgZone to avoid unnecessary change detection runs of the whole app
  this.zone.runOutsideAngular(() => {
    setTimeout(() =>
      // after setTimeout() has finished, set the new width of the toolbar in sync with Angular's change detection algorithm
      this.zone.run(
        () => (this.toolbar.nativeElement.style.width = `${percent}%`)
      )
    );
  });
}

The workaround for the second issue is to set [popupSettings]="{ animate: true }".

I hope this helps. Please let me know if further assistance is needed.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 02 Jul 2020, 03:11 PM

Hello Benedetta,

As the provided snippet seems quite complex and involves significant amount of custom logic, it will be best if I have a small app or ideally a StackBlitz which reproduces the issue.

In the meantime I can only suggest things based on the provided code - since the toolbar is inside two wrappers, each having classes for hiding them, my suggestion is to try removing the wrappers one by one and see if the issues persist.

Regarding button alignment - we do not provide this option out of the box, but it can be achieved using CSS. Here is a sample StackBlitz demonstrating this - https://stackblitz.com/edit/angular-mbxszs?file=styles.css. Upon inspection of the DOM of the toolbar we can see that each toolbar tool is wrapped inside a <kendo-toolbar-renderer> so in order to position the elements to the left or right, we have to apply margin-left:auto or margin-right to the needed <kendo-toolbar-renderer>s.

I hope this helps.

Looking forward to your response.

Regards,
Petar
Progress Telerik

answered on 06 Aug 2020, 01:57 PM

Hi Benedetta,

Based on the provided code up until now, I think that the problem is related to Angular(and there is a fix for it). Let me explain.

Since Angular 9 a breaking change regarding how ContentChildren are handled was introduced. The gist of it is that since Angular 9 when querying for ContentChildren, a component looks only at its direct descendants in the DOM.

I will try to illustrate this with an example. Up until Angular 9 this was valid code:

        <kendo-toolbar>
            <div *ngFor="let item of config">
                <kendo-toolbar-button [text]="item.text"> </kendo-toolbar-button>
                <kendo-toolbar-dropdownbutton [text]="item.text" [data]="item.data"> </kendo-toolbar-dropdownbutton>
                <kendo-toolbar-splitbutton [text]="item.text" [data]="item.data"> </kendo-toolbar-splitbutton>
            </div>
        </kendo-toolbar>

From Angular 9 on this code does not work. This is because internally the toolbar uses @ContentChildren to get references to the tools inside of it. A simple workaround for this is to use <ng-container> instead <div>.

Here is a modified version of the code above that should work with Angular 9 and up:

        <kendo-toolbar>
            <ng-container *ngFor="let item of config">
                <kendo-toolbar-button [text]="item.text"> </kendo-toolbar-button>
                <kendo-toolbar-dropdownbutton [text]="item.text" [data]="item.data"> </kendo-toolbar-dropdownbutton>
                <kendo-toolbar-splitbutton [text]="item.text" [data]="item.data"> </kendo-toolbar-splitbutton>
            </ng-container>
        </kendo-toolbar>

I hope this sheds some light on the issue.

Regards,
Petar
Progress Telerik

answered on 12 Aug 2020, 02:07 PM

Hi Benedetta,

I am glad to hear that you have managed to integrate the ToolBar in Angular 10 successfully. Also thank you for the provided example as it helped a lot.

Here is an updated version of it which works around the issue - https://stackblitz.com/edit/angular-ivy-nkg3wn?file=src%2Fapp%2Fapp.component.ts

Previously it wasn't working due to the aforementioned issue about the async buttons combined with the usage of <ng-container> for iteration.

In the working StackBlitz the toolbar is again being programmatically resized but the difference is that the shrinking to 99% is done when tools are hidden and expanding to 100% is done only after ngAfterViewChecked() has been called by Angular.

I hope this helps. Please let me know if further assistance is needed.

Regards,
Petar
Progress Telerik

answered on 02 Sep 2020, 07:23 AM

Hello Benedetta,

If my understanding is correct, the goal is to align the toolbar tools to the right (or in the center) and have the overflow popup button remain on the right.

If my assumptions are correct then I am afraid that the ToolBar component does not have such a built-in option. However, there are several approaches that could be taken in order to accomplish (at least partly) the desired layout:

Enabling RTL mode:

https://www.telerik.com/kendo-angular-ui/components/toolbar/globalization/#toc-right-to-left-support

Or using custom CSS code. Here is an example:

https://stackblitz.com/edit/angular-mbxszs-pgpmuk?file=styles.css

Please keep in mind that the second option does not work as expected when [overflow]="true".

In case having a built-in option for tool, alignment is important for you, please consider submitting a feature request through our Feedback portal. We keep a close eye on it as this is one of our main indicators on what is really needed.

I hope this helps.

Regards,
Petar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Martin Bechev

commented on 28 Nov 2024, 11:23 AM

Hi,

Thank you for the provided feedback.

Yes, this is a known bug logged here:

https://github.com/telerik/kendo-angular/issues/4465

Please subscribe for it to be notified in a timely manner when there is any update.