Hello,
The PDF export component does not seem to handle tables that are in the editor content. In the Stackblitz example I included, which is based off of the PDF export demo under the Editor component, the table borders do not show in the editor and in the exported PDF. In my own practice, any editor version 8 and above will not export the tables to PDF. In fact, the exported PDF is blank no matter what is in the editor. Here is what I am using. When I change the editor version to 0.7.0, the PDF export works (albeit without table support). I would like to be able to export the tables that inside of the editor's content to PDF. This problem only started happening after I updated my editor to versions 0.8.0 and above.
<kendo-pdf-export #pdf paperSize="Letter" margin="1cm" [scale]="scale">
<kendo-editor #editor iframe="false" style="align-self: auto; padding: 20px; height: 90vh; width: 24cm; margin: 0 auto;" [(value)]="value"
(dragover)="onDragOver(event)" (drop)="onDrop(event)">
<kendo-toolbar>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<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-button kendoEditorStrikethroughButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
<kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>
<kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>
<kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>
<kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-editor-insert-table-button></kendo-editor-insert-table-button>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>
<kendo-toolbar-button text="Export as PDF"
[icon]="'pdf'"
(click)="pdf.saveAs('editor-content.pdf')"></kendo-toolbar-button>
</kendo-toolbar>
</kendo-editor>
</kendo-pdf-export>
Ts Code:
Html code:
Sometime but not always, the Editor will start to set the style attribute for each and every element, even though they are all the same.
Example Html:
<p>
<span style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Bedroom One</span>
<br style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<span style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">- Wrap, box and move non-affected contents and small furniture away from the affected area.</span>
<br style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<span style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">- Carryout inventory and dispose of non-restorable contents and furniture.</span>
</p>
How can I avoid this duplication?
This is my current configuration for the Kendo Editor:
<kendo-editor ctsStyle
[style.height]="to.height"
[formControl]="formControl"
[class.is-valid]="showError"
[formlyAttributes]="field"
>
<kendo-toolbar [overflow]="true">
<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>
<kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
</kendo-toolbar>
</kendo-editor>
https://www.telerik.com/kendo-angular-ui/components/scheduler/timezones/#toc-fixed-timezones
In the kendo scheduler fixed timezones are not working properly because it only takes the local time which on the browser and shows the local time only in kendo scheduler.
Not showing the fixed timezones depends upon the other country timezones.
we want some solution for set the fixed timezones.
Example: if browser time shows the india timezones locally but we want to show other country timezones which depends upon the country.
Hi team,
Zoom in /out options are required to view the content of the editor.
Regards,
Babu
Dear Support Team,
I had a problem with the Scheduler-Component
So my Problem was that the Resource[] in the Scheduler-Component did not work as an Array. It always used only the first entry.
I tried to create multiple Resources and filled the Array with them, but I only could use the first Entry to style an event.
Because of this "bug" I had to do a huge workaround to colorize multiple different type of events.
The file selection popup on iOS does not always open next to the file select popup. This is possible to replicate on the main page for the angular upload component https://www.telerik.com/kendo-angular-ui/components/uploads/upload/ and the stackblitz as well without any modification
https://stackblitz.com/run/?file=src%2Fapp%2Fapp.component.ts
Screenshot shows that the photo library/choose files popup opens in a seemingly random spot after the user taps it.
Current behavior
Currently, toODataString() does not fix filter operators like process() does for the grid data.
Our team is using OData to do server side filtering on kendo grids.
When given the filter operator 'equals', the current implementation of the code will error out when trying to create a serialized query string for OData operations. That is because it is actually trying to look for the operator 'eq' to create the string.
This is because the toODataString does use the operatorMap that is in filter.operator.js.
process(), used for client-side paging however does. And will fix the value before applying the operation.
Expected behavior
What I would expect toODataString to do. Is make use of the same correcting that process() does.
So my filters in the State object can use either 'equals' or 'eq'.
This stumped me for a bit, and would be an easy fix. I think changing this would save people some time. And make the functions used for server-side and client-side paging, uniform.
Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/angular-a8rdk3
In this example, you can see changing 'equals' to 'eq' will make it stop erroring.
TLDR -> toODataString() doesn't understand 'equals', like process() does.
When updating data input of Kendo Sortable component, it currently destroys and re-renders dom for all items. That leads to "flickering" view and bad performance.
Example
// pseudocode
@Component(template: <kendo-sortable [data]="data"></kendo-sortable>)
class MyComponent {
data = [obj1, obj2, … obj200];
updateData() {
this.data = [...this.data];
}
}
Expected
When I call updateData() sortable dom should not be modified. All items are the same (same object reference) and so angular should keep the dom.
Current behavior
When I call updateData() kendo Sortable will destroy the dom and re-render all items.
Notes
The reason seems to be, that SortableComponent maps all items to an internal _localData array that adds a container element to each item. These container elements are always new objects and so Angular *ngFor will re-render everything. There's also no option to provide a custom trackBy callback.
Our scenario: We use kendo Sortable for a field mapping component that allows users to map CSV files to our database structure. Every user interaction will lead to a new array of mappings and so... every user input leads to a full re-rendering of some 100 form rows now...
Provide a built-in hideAfter option as Kendo for jQuery Tooltip:
https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip/configuration/hideafter
Hey Kendo Team,
you already have a solution in jQuery for my problem (https://docs.telerik.com/kendo-ui/knowledge-base/grid-group-remove-footer-header-one-record).
Unfortunately this solution did not work in Angular.
Desirable solution would be a flag in GroupHeaderTemplate which removes header if group size is one.
Another solution could be; allow a class field in GroupHeaderTemplate, so that we can set display to none if group size is one.
Best regards,
Matthias
Hello! My team has identified a need for an extended hours indicator for the scheduler, hopefully this is the correct place to put in a feature request! Essentially, my team would like the ability to indicate that appointments exist for the current day, but those appointments are outside of the standard set working hours and thus not shown on the scheduler. On the below screenshot of a different scheduler, an arrow is circled in red on the bottom. That arrow indicates that there is an appointment outside the current viewed schedule for that day. Would you be open to implementing a feature like this one day?
Hi,
Need a circle packing bubble chart. In my application, I required to use one use case.
Please refer attached screenshot.
FYI We are using the below dependencies in our project.
"@angular/animations": "7.2.3",
"@angular/cdk": "7.3.0",
"@angular/common": "7.2.3",
"@angular/compiler": "7.2.3",
"@angular/core": "7.2.3",
"@angular/forms": "7.2.3",
"@angular/http": "7.2.3",
"@angular/material": "7.3.0",
"@angular/platform-browser": "7.2.3",
"@angular/platform-browser-dynamic": "7.2.3",
"@angular/platform-server": "7.2.3",
"@angular/router": "7.2.3",
"@ng-bootstrap/ng-bootstrap": "4.2.2",
"@progress/kendo-angular-common": "1.1.0",
"@progress/kendo-angular-buttons": "5.0.0",
"@progress/kendo-angular-charts": "4.1.0",
"@progress/kendo-angular-dateinputs": "4.0.1",
"@progress/kendo-angular-dropdowns": "4.0.0",
"@progress/kendo-angular-excel-export": "3.0.1",
"@progress/kendo-angular-gauges": "3.0.0",
"@progress/kendo-angular-grid": "4.2.0",
"@progress/kendo-angular-inputs": "6.1.1",
"@progress/kendo-angular-intl": "2.0.0",
"@progress/kendo-angular-l10n": "2.0.0",
"@progress/kendo-angular-pdf-export": "2.0.0",
"@progress/kendo-angular-popup": "3.0.1",
"@progress/kendo-angular-scrollview": "3.0.0",
"@progress/kendo-angular-treeview": "2.5.0",
"@progress/kendo-angular-upload": "5.1.0",
"@progress/kendo-data-query": "1.5.0",
"@progress/kendo-drawing": "1.5.12",
"@progress/kendo-theme-default": "3.2.0",
"@progress/kendo-angular-layout": "4.0.0",
"@progress/kendo-ui": "2019.1.130",
I would like have "Format Painter" or "Copy Format" in the Editor.
Currently there is no "Format Painter" or similar option available for Editor.
I hope Editor enhancement feature you will add into your plan near future.
Could you provide a tooltip close event
Thank you
Hello Kendo,
In our company more than 5 projects we are using Kendo Splitter. We really need to have Animation in Splitter collapse/expand event
thanks
Could you provide a drill-in functionality for the Gauge.
Thank you in advance.
1) After opening a tooltip, hitting tab will not focus on the close icon if there is another focusable item in the DOM below the tooltip trigger.
Reproduction Steps:
- Open the https://www.telerik.com/kendo-angular-ui/components/tooltip/closable-tooltip/ example in stackblitz
- Add a plain button (or any focusable item) underneath the tooltip component
- Focus on the tooltip button with the keyboard
- Open the tooltip by pressing "Enter"
- Hit tab
- The focus goes to the next button rather than into the tooltip
This is an issue for keyboard users because they cannot easily tab into the tooltip to close it
2) When opening or tabbing into the tooltip, the screen reader (Voice Over, NVDA) doesn't read the tooltips content
I would like to allow users to sort single and multiple at the same time.
This could be achieved by adding another option to SortSettings: Single | Multiple | SingleShiftMultiple. The name is not the best proposal, but describes desired behaviour:
By default when user click column, previous sort is cleared and new is applied. But if user holds down shift key, new sort is added to SortDescriptor[] (current behaviour for multiple).
The ability to to drag and drop a event into and out of the scheduler control is required.
This would allow for more complex UI's allowing users to drag from multiple scheduler or from other controls