Hey,
I tried to play around with the new Toolbar inside the Grid.
From the documentation I copied:
<kendo-grid<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.
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.
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.
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>
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
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
>
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
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!
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
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!
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.
Thank you for your help.
I want to hide the toolbar that is framed in red. How can it be done?