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.
When adding a filter to a grid, there is no way to define "case insensitivity" for the oData filter query.
There is a property in the Data Query library (toLower) but it seems only to work for the value and not accessible from grid.
This Feature Request is to have the ability to do case insensitive queries via the query string and not in the API.
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.
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));
}
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"));
}
}
Hi, Team!
Currently, I am using the Column Menu functionality of the Grid component and would like to be able to set a default value/placeholder of the input fields in the Filter section.
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 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!
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,
I am looking to have a MultiSelect which not allows do add Tags by Typing and still allows the tags to 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:
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
We are using RecurrenceEditor :
<kendo-recurrence-editor [formControl]="formGroup.get('recurrency')">
</kendo-recurrence-editor>
Context : Date = 2023-03-06
We can see the context of RecurrenceEditor is 2023-03-06 instead of 2023-03-09.
When we create an event on different date of today, the RecurrencyEditor context should the creation date.
Same problem with other repeat rule (Daily, Weekly and Yearly)
https://stackblitz.com/edit/angular-botsaf?file=src/app/app.component.ts
The internal element has a calculated width - but it only grows in value if slider width changes (responsive or even in CSS with media queries etc).
It permanently stays at the largest size.
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.
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.
Convert YAML file to JSON, so they can be used to translate the built-in messages in the components to desired locale.
For example: It would be convenient to use this YAML file if it was available in JSON to translate the messages to German instead of creating my own custom message service.
Current behavior
ToolbarComponent, DropDownButton and SplitButton utilize the PopupSettings of type:
interface PopupSettings {
animate?: boolean;
appendTo?: 'root' | 'component' | ViewContainerRef;
popupClass?: string;
anchorAlign?: Align;
popupAlign?: Align;
width?: number | string;
height?: number | string;
}
For the overflow popup, they all work fine, but for the buttons:
- popupAlign
- anchorAlign
- height
- width
properties don't work.
https://stackblitz.com/edit/angular-jqhp2d?file=app/app.component.ts
Currently, the DropDownButton and SplitButton popup alignment can be changed, by using the align property of the Buttons PopupSettings type
https://stackblitz.com/edit/angular-jqhp2d-smtyhp?file=app/app.component.ts
Expected behavior
Create separate PopupSettings interface for the DropDownButton and SplitButton components to:
isolate the width and height options
to unify the PopupSettings of the Toolbar SplitBtn and DropDownBtn with the updated Buttons PopupSettings:
interface PopupSettings { animate?: boolean; appendTo?: 'root' | 'component' | ViewContainerRef; popupClass?: string; anchorAlign?: Align; popupAlign?: Align; width?: number | string; height?: number | string; }
Due to recent changes to kendoButton directive behaving like a component, this directive is no longer compatible.
This was important for buttons used in grid editing to extend the themes and styles of the kendoButton.
Now this however leads to
ERROR Error: NG0300: Multiple components match node with tagname button: ButtonComponent and AddCommandDirective. Find more at https://angular.io/errors/NG0300