Telerik Forums
Kendo UI for Angular Forum
1 answer
14 views

Hey,

I tried to play around with the new Toolbar inside the Grid.

From the documentation I copied:

<kendo-grid
    [data]="gridData"
    [selectable]="false"
    (selectionChange)="onRowSelected()"
    [filterable]="true"
  >

<kendo-toolbar overflow="scroll">
      <kendo-toolbar-button kendoGridFilterTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridSortTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridGroupTool></kendo-toolbar-button>
      <kendo-toolbar-separator></kendo-toolbar-separator>
      <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
      <kendo-toolbar-spacer></kendo-toolbar-spacer>
      <kendo-toolbar-button kendoGridPDFTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridExcelTool></kendo-toolbar-button>
    </kendo-toolbar>

...

Sadly, I can't seem to get the first three directives (kendoGridFilterTool, kendoGridSortTool, kendoGridGroupTool) to work.

I'm in Webstorm which tells me: "Attribute kendoGridFilterTool is not allowed here".


Am I missing an import or something?

Please help.

Yanmario
Telerik team
 answered on 20 Jun 2025
1 answer
15 views

 

We want to use "kendo-angular-pdfviewer" package with 13.0.0 version only as we have other exiting kendo packages with "11.6.0" version. If we use latest "kendo-angular-pdfviewer" packages ( which has able to customize pdf toolbar) then we need to change all other packages also which we are not willing to change now. In pdf viewer component, we want to display download button based on some conditions. 

 

"dependencies": {
    "@angular/animations": "^15.2.6",
    "@angular/common": "^15.2.6",
    "@angular/compiler": "^15.2.6",
    "@angular/core": "^15.2.6",
    "@angular/forms": "^15.2.6",
    "@angular/platform-browser": "^15.2.6",
    "@angular/platform-browser-dynamic": "^15.2.6",
    "@angular/router": "^15.2.6",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@progress/kendo-angular-buttons": "^11.6.0",
    "@progress/kendo-angular-common": "^11.6.0",
    "@progress/kendo-angular-dateinputs": "^11.6.0",
    "@progress/kendo-angular-dialog": "^11.6.0",
    "@progress/kendo-angular-dropdowns": "^11.6.0",
    "@progress/kendo-angular-excel-export": "^11.6.0",
    "@progress/kendo-angular-grid": "^11.6.0",
    "@progress/kendo-angular-inputs": "^11.6.0",
    "@progress/kendo-angular-intl": "^11.6.0",
    "@progress/kendo-angular-l10n": "^11.6.0",
    "@progress/kendo-angular-layout": "^11.6.0",
    "@progress/kendo-angular-listview": "^11.6.0",
    "@progress/kendo-angular-messages": "^1.44.0",
    "@progress/kendo-angular-notification": "^11.6.0",
    "@progress/kendo-angular-pdfviewer": "^13.0.0",
    "@progress/kendo-angular-popup": "^11.6.0",
    "@progress/kendo-angular-treeview": "^11.6.0",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-theme-default": "^6.2.0",
    "@rxjs/rx": "^4.1.0",
    "auto-complete": "^1.0.0",
    "bootstrap": "^3.3.7",
    "cldr-data": "^36.0.1",
    "core-js": "^3.30.0",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "jquery": "^3.6.4",
    "moment": "^2.29.4",
    "rxjs": "^7.8.0",
    "rxjs-compat": "^6.6.7",
    "stream-to-string": "^1.2.1",
    "zone.js": "^0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.2.5",
    "@angular/cli": "~15.2.5",
    "@angular/compiler-cli": "^15.2.6",
    "@angular/language-service": "^15.2.6",
    "@angular/localize": "^15.2.6",
    "@types/jasmine": "~4.3.1",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "~18.15.11",
    "codelyzer": "~6.0.2",
    "jasmine-core": "~4.6.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~10.9.1",
    "tslint": "~5.20.1",
    "typescript": "~4.9.4"
  }

 

 

 

 

Please let us know if there is any way to acheive our requirement to display download button based on conditions and with out impacting other kendo packages.

Zornitsa
Telerik team
 answered on 11 Jun 2025
1 answer
261 views

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/  However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>

Yanmario
Telerik team
 updated answer on 09 Jan 2025
11 answers
1.4K+ views

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

  1. 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.
  2. 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>
ICT
Top achievements
Rank 1
Iron
 answered on 27 Nov 2024
3 answers
90 views

Hi there,

I am new to Kendo UI Charts. Am I getting this right? The navigator is only for stock charts?
I don't get why, this would also be very helpfull for line charts. I could only find a very old question regarding this, with not a really good answer.

Is it still the case that there is no way to display a line chart with a navigator? Or is it possible to display a line in the stockchart kind of similar to a line chart instead of candlesticks?

Best Regards,

FirestormHell

Leo
Top achievements
Rank 1
Iron
 updated answer on 30 Apr 2024
2 answers
413 views

Hi all, I am trying to add a custom toolbar component that contains a dropdown button with role guards such that only certain users see all of the items in the dropdown button. Specifically following this example in your guides

https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/

I get an error Property 'toolbarTemplate' will overwrite the base property in 'ToolBarToolComponent'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.ts(2612) when trying to replicate the example on that guide. Furthermore even clearing the error by renaming the variable I can see the ng-template in my html but what is inside it will not render. Please let me know if you guys have a more current working example of a custom toolbar component or any advice. Thank you!

Zach
Top achievements
Rank 1
Iron
 answered on 24 Apr 2024
0 answers
70 views

I have a custom control type in a toolbar container (a simple input text box); inside the input box the arrow keys do not work.
Upon investigation I discovered that the problem is related to toolbar navigation (it adds a listener to the keydown event and overrides the arrow keys), so is there a method to avoid this? I though there was a property like navigable to enable or disable this feature.

I found a workaround, but it's almost a hack because it accesses private variables:
inside aferviewInit of toolbar's the parent i call 😱

toolbar["toolbarKeydownListener"]()

to remove the  listener, it works until you change the listener name.
i did an example 
https://stackblitz.com/edit/angular-ubjvvg?file=src%2Fapp%2Fcustom-tool.component.ts,src%2Fapp%2Fapp.component.ts

Greetings

 

n/a
Top achievements
Rank 1
 asked on 14 Mar 2024
2 answers
1.3K+ views

When I click on a row, the incoming data opens automatically when I click anywhere in the grid.

I did a debug, before clicking nowhere I clicked on an empty pane on the grid and down into my dbClickWorkFlow() method.

 

Is it possible to put the dbClickWorkFlow() method in another part of the Grid Html? It didn't work when I tried it. Or do you have any good suggestions to fix it? For instance, only one row should be affected. 

 

I had researched a lot of questions and found similar problems but it is not helpful.

It does not allow any good experience.

 

 

LIKE THAT, JUST ANGULAR KENDO GRID PROBLEMhttps://www.telerik.com/forums/grid-edit-popup-double-click-event-bug

I need help!

 

 

JORGE
Top achievements
Rank 1
Iron
 answered on 07 Feb 2024
0 answers
49 views

Hello,

I would like to know if this is expected behavior, if I have to possibly adjust my code, or if this is a bug.

The issue is when typing and selecting a font family or size and then selecting the left button of the color gradient or background the style will get reset to the default values for font family and style. Or, maybe this is due to the underlying ProseMirror change in node. 

 

Please see my ScreenPal for demonstration of the issue.  

https://somup.com/cZnhrjpi34

Thank you for your help.

Stephanie
Top achievements
Rank 1
 updated question on 05 Feb 2024
0 answers
78 views

I want to hide the toolbar that is framed in red. How can it be done?

 

Alisa
Top achievements
Rank 1
 updated question on 20 Dec 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?