Hi,

I'd like to request a feature for programmatically dismissing notifications in Angular. This is a common feature for notification / toast component, but it is missing in Kendo UI for Angular.

Right now, once a closable notification is shown, there's no way to dismiss it programmatically, which can lead to clutter (see attached screenshot).

Here are the proposed features:

1. Programmatic Notification Dismissal:

   • Dismiss by type
   • Dismiss by ID
   • Dismiss all

2. Global Notification Limit:

   • Set a global limit for how many notifications can be displayed at once.

These additions would greatly enhance the user experience by preventing notification clutter and providing better control for developers.

Thanks for considering this!

Best, Sergei.

Hi,

I've noticed a strange issue with the ContextMenu: in Firefox, the div text selection loses focus after the context menu is shown.

Here is FireFox context menu behavior (focus lost on selected text).

Sample Code:

https://stackblitz.com/edit/angular-udag3v-aoxarf?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fcontextmenu-items.ts

Please let me know if there is any solution for this.

Thanks,

I'm experiencing an issue with the filtering and sorting functions in a Kendo Grid. This problem seems to occur with the latest version of Kendo UI for Angular in combination with Angular 18.

I have created a sample project on StackBlitz where the issue can be reproduced: StackBlitz Project.

In the example, you can see that the filtering and sorting capabilities are enabled. However, both filtering and sorting do not seem to work correctly.

Here is a relevant code snippet:

<kendo-grid [data]="gridData" [selectable]="selectableSettings" [navigable]="true" [height]="300" filterable="menu, row" [sortable]="true">
    <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
    <kendo-grid-column field="UnitsOnOrder" title="Units On Order"></kendo-grid-column>
    <kendo-grid-column field="ReorderLevel" title="Reorder Level"></kendo-grid-column>
</kendo-grid>

What I have tried:

1. I checked that the correct versions of Kendo UI and Angular are installed.
2. I tried different settings for the filtering and sorting capabilities.
3. I reviewed the Kendo UI documentation to ensure I didn't miss anything.

Current behavior:

• Filtering: When I try to filter, the results are not updated correctly.
• Sorting: Sorting does not seem to produce the correct order.

Expected behavior:

• The grid should correctly filter and sort based on the column values.

Am I doing something wrong, or does this seem to be an issue with the Kendo UI framework? Any suggestions or solutions are welcome!

Thanks in advance for the help!

https://stackblitz.com/edit/angular-pxppfk-s4ix7b?file=tsconfig.json

Change target in tsconfig in this stackblitz to targer es2022 to recreate bug

The inner circle of radio buttons are incorrectly scaled/positioned in Bootstrap themes. The radio buttons in bootstrap theme are by default dependent on "rem" unit. For applications, that specify different base for "rem" unit, than 16px, it is possible to naturally override dimensions of the radio button without any specific overrides.

In example application, the following points are important:

1. :root specifies font-size=24px. So 1rem=24px.

2. Radio buttons uses size="small". The width and height then defaults to 0.75rem=18px.

Important note, is that the wrong positioning of inner circle is most visible when scaling down the browser view. There is offset by 1px to the sides. The image in the attachments is screenshot from the application and demonstrates the offset in pixels from the sides. The first number above the radio button is the offset of the inner circle in pixels from the left, the second number after "/" is the offset of inner circle from the right.

This issue appears only if the dimensions are being increased/decreased in respect to the default "medium" size. If the radio button is scaled using "scale" CSS function, then the scaling is correctly preserved. Also I didn't notice any problem for the "medium" sized radio button in any browser view. The root font-size might not be important for bug to be reproducible, but inconsistencies are then more visible.

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

• Choose Heading 1 style
• Type AAA
• The form value = <h1>AAA</h1>
• Clean the value using backspace
• The form value = <h1></h1>

Expected result

• The form value should be empty

1. Start using the Kendo Tree View in Angular.

2. Load a large dataset for the Kendo Tree View, observe the time taken to render the Tree View.

3. The timing will increase if the dataset keeps on increasing.

4. Suggest some ways to reduce or optimize it.

This is how I am using the Kendo TreeView in Angular,

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

Currently it is possible to override certain messages of the kendo grid with the KendoGridMessages component.

However, this applies the message to the entire grid at once.
For example assume I have a grid with 2 boolean value columns, I would like to override the filter menu IsTrue & IsFalse messages to another string.
This is entirely possible with the KendoGridMessages component.
After the columns in my grid I might put something like this:

This would work if I wanted both boolean filter menus to display Yes & No.
But lets suppose I have set a template for cells in one of the columns like so:

the cells in this column would now display 'Validated' or 'Not Validated' instead of true/false.
It would make more sense for this column filter menu to have 'Validated' & 'Not Validated' instead of the Yes/No message that has been set to the entire grid.

Currently I would have to choose between one or the other strings for the boolean filter, either Yes/No or Validated/Not Validated.

This is a simple example, and in this case using the Yes/No messages for both wouldn't cause a user too much head-ache, but there are plenty of other more complex use cases where not having individual grid messages could cause confusion.

Here is a Stackblitz where I have mocked the grid:
https://stackblitz.com/edit/angular-qynsrr?file=src%2Fapp%2Fapp.component.ts

In the above Stackblitz I've mocked what I would expect it to work like.
I would expect that you can add a KendoGridMessages in the grid to set a default, and then on each column override it as necessary with another component or another KendoGridMessages.

Would like the API expanded to include support for adding your own tool(s) that would allow you to tag the selected text with custom html tags.

For example, would like to be able to highlight some text, hit the custom button and then "text goes here" is replaced with "<custom>text goes here</custom>".  From some documentation research, it looks like you don't support custom tools that would be able to accomplish this, is that correct? 

From this previous post, it states that such a thing is not supported?

https://www.telerik.com/forums/add-custom-tool

input to grid:

@Input()
public additionalExcelExportInfos: { additionalWorksheetTitle: string, 
parameters: { key: string, parameterValue: any }[]
};

output in excel file:

Test Environment:
Browser: Edge browser Version 114.0.1823.51 (Official build) (64-bit)
OS: Windows 22H2

Steps to Reproduce:

1. Open the URL - https://angular-kendo-dropdown-list.stackblitz.io/ in edge browser.
2. Press Tab key and navigate to “Select gender” dropdown.
3. Run fastpass in Accessibility insights for web extension.

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

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,

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/.

https://stackblitz.com/edit/angular-tq5ncp?file=src%2Fapp%2Fapp.component.ts%3AL31,src%2Fapp%2Fproducts.ts

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)