Using the Editor component with Form Support, if I choose the style Heading 1 and type some letter.
I clean the value using only backspace key on the keyboard and the value of the form control is <h1></h1>.
This is reproductible on the demo : https://www.telerik.com/kendo-angular-ui/components/editor/forms/#toc-template-driven-forms
Expected result
when click kendo slider increment or decrement tile it's moving two small steps.
My case instead of moving two steps, one step need to move
https://stackblitz.com/edit/angular-5elhtu?file=src%2Fapp%2Fapp.component.ts
When a detail row is used, the moment you expand one row and scroll, it automatically loads the last items from the dataset.
Ex expand row 1 - start scrolling, and it suddenly loads 5xx th row+;
When grouping is also enabled - expanding the detail row under one group, expands it under all groups.
The stackbliz is from the kendo demo page for virtualscroll (with the added detail row).
If you have a kendo grid table with some data over multiple pages and you go e.g. to the last page and then reload the data, resulting with less pages - the table is empty and you have to manually click on the first page to see the data. Here is a working example:
https://codesandbox.io/s/upbeat-lamarr-d67m8k?file=/src/app/app.component.ts
Step 1. Go to the last page
Step 2. Click on the button "'Reset data" <- you see no data
Step 3. Click on the first page <- You see the data
Here is a simple example:
HTML:
<kendo-listview
[height]="400"
[data]="notes$ | async"
class="k-d-flex-overflow-auto"
(scrollBottom)="loadMore()">
<ng-template kendoListViewHeaderTemplate>
<span title>Reminders</span>
</ng-template>
<ng-template kendoListViewItemTemplate let-dataItem="dataItem">
<app-message-note [note]="dataItem"></app-message-note>
</ng-template>
</kendo-listview>
TS:
@Component({
selector: 'app-message-list',
templateUrl: `./message-list.component.html`,
styles: [
`
.k-d-flex-overflow-auto {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow: auto;
}
`,
],
})
export class MessageListComponent implements OnInit {
notes$: Observable<NoteDto[]>;
constructor(private replyService: ReplyNoteService) {}
ngOnInit(): void {
this.notes$ = this.replyService.getUserNotesList();
}
loadMore() {
console.log('loading...');
}
}
Without these styles scroll is not visible.
Current behavior: scroll to the bottom, nothing happens.
Expected behavior: scroll to the bottom "loading..." will be logged to the browser console.
Test Environment:
Browser: Edge browser Version 114.0.1823.51 (Official build) (64-bit)
OS: Windows 22H2
Steps to Reproduce:
Actual Result: Fastpass run shows "Ensures every ARIA input field has an accessible name" error for “Select gender” dropdown.
Expected Result: Every ARIA input field has an accessible name
Fix ONE of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Fix ONE of the following:
Required ARIA children role not present: group, option
Element has no aria-busy="true" attribute
When an assistive technology encounters an element with an invalid ARIA attribute value, it might ignore the attribute or respond to it in an unexpected way. As a result, people who use assistive technologies might find the element difficult or impossible to use.
Fix ONE of the following:
Required ARIA children role not present: group, option
Element has no aria-busy="true" attribute
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"));
}
}
Previously igrid 5.0.0 introduced sortable column headers and their contents being wrapped in spans with inner cell and link classes
<span class="k-cell-inner">
<span class="k-link>......
now after upgrading to 11.2.0 it looks like ALL column headers get this additional element nesting even if they aren't sortable which is greatly affecting how column headers display since .k-link has a display: flex value. As well as many other styles.
Before
After
There are also "link" like styles applied to any and every column even if it doesn't sort giving the false impression that a column header is clickable.
This can be seen from kendo's own stackblitz for the grid https://stackblitz.com/edit/angular-lyxxa7?file=src%2Fapp%2Fapp.component.ts where if you inspect the header elements you'll see they've been wrapped in the sortable span elements. If this is intentional to wrap all column headers in we'll just have to work around it but we're curious if applying the sortable styling to ALL column headers was done on purpose or a bug.
https://stackblitz.com/edit/angular-4bbepg?file=src%2Fapp%2Fapp.component.ts
The sort indicator (down arrow) remains after removing the sort (setting the [sort] input to undefined)
Thanks,
-Adam
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/.
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)
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
In dialog, if we close it giving `false` as a result i.e.
```
this.dialog.close(false)
```
Actual return is empty object.
Additional thing is result itself in `DialogRef` is force-typed as `DialogResult` despite that actual `dialogRef.close()` allows us to return any value.In such case I'd understand mapping to empty object (probably some truthy-based if which maps to empty object) but then close method should also force-type taken argument. So can we return any value or not?
Ideally it should return `undefined` in case of no result value is provided (also mapped to empty object) and return `false` if we return `false`