Currently the imageSrc input property only accepts string as value. Allow the property to accept and work with blob URLs as well. Additionally, as the property accepts only string as value, the URL cannot be sanitized as sanitizing it always results in a SafeUrl type.
Reproduce the bug with
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: `
<button (click)="show = !show">Show/hide</button>
<ng-container *ngIf="show">
<div class="example-config">
Selected value is: {{ value | kendoDate: "MM/dd/yyyy" }}
</div>
<div class="example-wrapper" style="min-height: 400px">
<p>Select a date:</p>
<kendo-datepicker
[(value)]="value"
fillMode="outline"
></kendo-datepicker>
<p>
(use Alt+↓ to open the calendar, ← and → to navigate, ↑ to increment
and ↓ to decrement the value)
</p>
</div>
</ng-container>
`,
styles: [
`
kendo-datepicker {
width: 170px;
}
`
]
})
export class AppComponent {
public show = false;
public value: Date = new Date(2000, 2, 10);
}error displayed:
"TypeError: Cannot read properties of undefined (reading 'nativeElement')
at set fillMode [as fillMode] (progress-kendo-angular-dateinputs.mjs:9186:53)
at Object.ngOnChangesSetInp"
in file
node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs
at
/**
* Sets the fillMode of the component.
*
* The possible values are:
* * `solid` (Default)
* * `flat`
* * `outline`
* * `none`
*
*/
set fillMode(fillMode) {
this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
if (newFillMode !== 'none') {
this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
}
It works when the code changes in
import { AfterViewInit, Component } from "@angular/core";
@Component({
selector: "my-app",
template: `
<button (click)="show = !show">Show/hide</button>
<ng-container *ngIf="show">
<div class="example-config">
Selected value is: {{ value | kendoDate: "MM/dd/yyyy" }}
</div>
<div class="example-wrapper" style="min-height: 400px">
<p>Select a date:</p>
<kendo-datepicker
[(value)]="value"
[fillMode]="fillMode"
></kendo-datepicker>
<p>
(use Alt+↓ to open the calendar, ← and → to navigate, ↑ to increment
and ↓ to decrement the value)
</p>
</div>
</ng-container>
`,
styles: [
`
kendo-datepicker {
width: 170px;
}
`
]
})
export class AppComponent implements AfterViewInit {
public show = false;
public value: Date = new Date(2000, 2, 10);
public fillMode = "solid";
ngAfterViewInit() {
Promise.resolve().then(() => (this.fillMode = "outline"));
}
}It only appears in DateInputs Components, other Inputs work well
Built-in editors lack the option to set accessible labels. This can be worked around by declaring an editor template.
A built-in setting for the label would be nice to have. The column title can be used as a default.
Hi,
I am looking to have a MultiSelect which not allows do add Tags by Typing and still allows the tags to be removed.
- The Searchbar should not appear.
- Typing should not be possible
- If the delete Button of a Tag is clicked it should be removed
So flagging MultiSelect as disabled or readonly is not an option as removing the tags is not possible anymore.
My i think legimate scenario is:
- I don't want to be the users able to assign their own tags.
- I want the user to be able to remove assigned tags
- The UI to select a new tag is to complex to have it directly in the searchbar - also if i wanted to integrate it the template options are not suficient so i do it in an extra pop up controlling the selected tags by typescript
https://www.telerik.com/forums/remove-typing-box-from-multiselect-component
An extra option or config scenario to achieve this would be appreciated.
If you look at your competition, there it's possible to do that:
https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxTagBox/
Thanks and Regards
Description
We are using RecurrenceEditor :
<kendo-recurrence-editor [formControl]="formGroup.get('recurrency')">
</kendo-recurrence-editor>
Repro Steps
Context : Date = 2023-03-06
- Double click on the 2023-03-09
- The editor is open :
- We choose the repeat rule Monthly :
We can see the context of RecurrenceEditor is 2023-03-06 instead of 2023-03-09.
Expected Result
When we create an event on different date of today, the RecurrencyEditor context should the creation date.
- The input "Day" default value should be 9
- The input "On" default value should be 2023-03-10
- First Monday => First Thuesday
Same problem with other repeat rule (Daily, Weekly and Yearly)
Regarding not only DateTime Pickers, but Data Query in general, it would be great if you could offer the option to automatically remove the time offset in OData path. Please find an example below: We need to retrieve all data concerning the date "2000-01-01". Data are stored as shown below: Date1: "2000-01-01T00:00:00+02:00" Date2: "2000-01-01T00:00:00+03:00" The OData path constructed is the following: "... or cfTrade/TradeDate eq 2000-01-01T00:00:00.000Z..." So, no Date is actually retrieved.
On grid with 50 rows and 100 columns, autoFitColumns method freezes browser and annoying "Page unresponsive" is shown to the user. Please make function responsive.
Based on high Chrome CPU usage I think method could be ran in background thread. Probably Web workers would be appropriate for this task. This may help.
Hi,
As far as I see there is no way in a kendo-treeview to indicate that the current drop position is invalid without overriding clue/hint templates. (Also done in the examples.) It would be very convenient if there would be a method in event arguments of nodeDrag that one could indicate invalid drop targets with. (For that the event should have all the information that the drop event has.)
Technical side note: The nodeDrag event is fired before the current DropAction of the drag is decided (hence the event does not contain this information). If the event would be fired just before updating the drag hint/drop clue (if there is no reason not to), we could have all the information in the event, and the suggested new method should just set the dropAction to invalid.
Hi,
Filter operator 'equalTo' doesn't work properly with columns that has DateTime format. I set 'format' property on column, so filter will have the same format, but after providing exact same day and time the result is "no records ".
Here is a reproduction in Stackblitz based on one of the examples from https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/.
Hi Team,
Requesting a feature to grid rows merge like below example for similar data. And by when we can expect this feature in Kendo grid.
| Col1 | Col2 | Col3 | Col4 | Col5 | Col6 |
| Row1 | Row1 | Row1 | Row1 | Row1 | Merge1 |
| Row2 | Row2 | Row2 | Row2 | Row2 | |
| Row3 | Row3 | Row3 | Row3 | Row3 | Merge2 |
| Row4 | Row4 | Row4 | Row4 | Row4 | |
| Row5 | Row5 | Row5 | Row5 | Row5 | |
| Row6 | Row6 | Row6 | Row6 | Row6 | Merge3 |
| Row7 | Row7 | Row7 | Row7 | Row7 | |
| Row8 | Row8 | Row8 | Row8 | Row8 | Merge4 |
| Row9 | Row9 | Row9 | Row9 | Row9 |
Thanks!
A brand new component to crop, rotate and resize an image before upload. I think almost every CMS that uses kendo components will make use of such a component.
For reference Kendo UI jQuery ImageEditor component:
I need an Angular control works pretty much like Kendo-JQuery Autocomplete control or Telerik Asp.Net Auto Complete text box.
I understand that Kendo-Angular currently have an "auto complete" control based on a dropdown. However, it is missing some core features I am looking for:
1. It needs to accept multiple inputs.
2. It needs to eliminate unmatched results based on user input.
3. It needs to call a server side API to get the available items dynamically after input changes.
The current Kendo-Angular AutoComplete MIGHT have the 3rd point since I have not yet to try with all the events, but I am pretty sure that the first 2 points are not there. If they do exist, please provide demo or documentation link.
Thank you.
Currently the Treelist uses the `k-grid-md` class by default and does not provide a way to change this.
Since the Treelist uses looks and feels just like the Grid component and it uses the same classes, it should (imo) provide the same options for sizing as the Grid component.
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>
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.
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 alternating grid rows got k-table-row-alt
.k-table-row-alt
.k-table-alt-row
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",