Ability to customize the fields control of the FilterExressions:

You're docs say

Open the example in a new window to evaluate it with Axe Core or other accessibility tools.  for the Kendo angular grid

When i do that i see the attached error, which is the same issue i get in our product when running playwright axe

That suggests to me that it is not WCAG 2.2 compliant

Ensure elements with an ARIA role that require child roles contain them

.demo-frame.loaded.demo-module--wrap--718a6 > .demo-module--demoWrap--d1437 > .demo-module--explorerWrap--4bf1f.flex-grow-1 > .demo-module--demoBody--97eee > iframe #k-fbe44131-4768-4755-93c3-e321b714780e

<div role="grid" kendodragtargetcontainer="" kendodroptargetcontainer="" mode="manual" class="k-grid-aria-root" id="k-fbe44131-4768-4755-93c3-e321b714780e" aria-label="Data table" aria-rowcount="62" aria-colcount="5">

<div tabindex="-1" class="k-grid-content k-virtual-content">
 
 

In certain scenario, Popup of the Multiselect component is not quite opened on the correct position. I did not check but this issue is probably reproducible for other dropdown components  (such as Combobox, DropdownList, etc) as well.

It seems to me this happens when:

1. A width greater than the widht of the input is set
2. AND input is too close to the bottom-right edge of the window and as a result popup cannot be shown below the input element but above it instead
   

THEN in the very first render, the popup is not position quite right and moves a bit in the next render.

Precise steps to reproduce problem:

1. Make sure to use minimal reproducible example attached below.
2. Click and hold left button of a mouse inside the MultiSelect Component.
3. The popup should open up and be positioned above the input but not being quite aligned right with the window nor the input.
4. Release the left button of a mouse.
5. The popup recalculates its position.
6. Problem: The popup should have been positioned correctly when opened (NOT after releasing mouse button).

Minimal reproducible example:

import { Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  KENDO_DROPDOWNS,
  PopupSettings,
} from '@progress/kendo-angular-dropdowns';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';

@Component({
  selector: 'my-app',
  imports: [FormsModule, KENDO_DROPDOWNS, KENDO_LABELS, KENDO_INPUTS],
  styles: [
    `
      .app-layout {
        padding: 1rem;
        height: 800px;
        display: grid;
        grid-template-columns: 1fr 230px;
      }

      .sidebar {
        height: 100%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .unrelated-sidebar-content {
        height: 200px;
      }

      .box {
        border: 1px solid grey;
      }
    `,
  ],
  template: `
    <div class="app-layout">
      <main class="box"> Main Content </main>
      <aside class="box sidebar">
        <div class="box unrelated-sidebar-content">Imagine some other content here</div>
        <kendo-formfield showHints="always">
          <kendo-label text="Favorite sport:">
            <kendo-multiselect
              [data]="listItems"
              [(ngModel)]="value"
              [popupSettings]="popupSettings"
            ></kendo-multiselect>
          </kendo-label>
          <kendo-formhint
            >Add your favourite sport, if it is not in the
            list.</kendo-formhint
          >
        </kendo-formfield>
      </aside>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public listItems: Array<string> = [
    'Width Must Be Greater Than Width Of The Multiselect Component Because We Have Super Long Text',
    'When List Is Open, It Moves Slightly To The Right',
    'It Is Not Possible To Align Popup With The Right Edge',
    'It Is Not Possible To Set "anchorAlign" and "popupAlign"',
  ];
  public value: any = [];
  // @see https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning
  public popupSettings: PopupSettings = { width: 500 };
}

Alignment to the right

I believe, this could be simply solved if we were able to configure "anchorAlign" and "popupAlign" as described here: https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning  .

In addition, it would be a nice feature in general, to be able to align popup with the element's right edge. Currently, this is pretty much hard coded:

        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
        const anchorPosition = <Align>{ horizontal: horizontalAlign, vertical: "bottom" };
        const popupPosition = <Align>{ horizontal: horizontalAlign, vertical: "top" };
        const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';

        this.popupRef = this.popupService.open({
            anchor: this.wrapper,
            anchorAlign: anchorPosition,
            animate: this.popupSettings.animate,
            appendTo: this.appendTo,
            content: this.popupTemplate,
            popupAlign: popupPosition,
            popupClass: this.listContainerClasses,
            positionMode: appendToComponent ? 'fixed' : 'absolute'
        });

From the code above, it is clear that the "horizontalAlign" cannot be really configured. In simple terms, you could use "left" alignment as a default intead of it being hard-coded like that; and prefer alignment specified in the "popupSettings".

Please, let me know if something needs to be further clarified.

When Toolbar component is configured to

1. Have spacer between two elements: Angular ToolBar Control Types - Kendo UI for Angular
2. AND it uses `overflow=menu` strategy: Angular ToolBar Responsive ToolBar - Kendo UI for Angular
3. AND when there is sufficient space, so the Toolbar is NOT overflowing. In other words, the visibility of the overflow button is set to hidden.
   

THEN the elements are not properly aligned with the right edge of the Toolbar component. This is because the overflow button still occupies the space as is the bahviour of the `visibility` style: visibility CSS property - CSS | MDN

• The visibility CSS property shows or hides an element without changing the layout of a document.

Minimal reproducible example:

import { Component } from '@angular/core';
import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
import { FormsModule } from '@angular/forms';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';

@Component({
  selector: 'my-app',
  imports: [FormsModule, KENDO_TOOLBAR, KENDO_INPUTS, KENDO_LABELS],
  template: `
    <kendo-label [for]="width" text="Set toolbar width"></kendo-label>
    <kendo-slider
      #width
      [(ngModel)]="toolbarWidth"
      style="width: 100%; display: block;"
      [showButtons]="false"
      [min]="0"
      [max]="100"
      [largeStep]="1"
      tickPlacement="none"
    ></kendo-slider>

    <kendo-toolbar overflow="menu" [style.width.%]="toolbarWidth">
      <kendo-toolbar-button text="My Kendo Angular Toolbar Button A" />
      
      <kendo-toolbar-spacer></kendo-toolbar-spacer>
      
      <kendo-toolbar-button text="My Kendo Angular Toolbar Button B" />
    </kendo-toolbar>
  `,
})
export class AppComponent {
  toolbarWidth = 100;
}

Expected behaviour: The overflow button does not occupy that space in the scenario described above.

• EITHER has `display: none` OR it is completely removed from the DOM when there is sufficient space.

It would be great if the <kendo-listbox> had the possibility to take in a list of selected values, which causes the matching items to be selected.

Currently, the only option I see is to inject the ListBoxComponent as viewChild, and call .select manually, which is quite cumbersome.

Suggestion:

- additionally to the "textField", provide a "valueField" property

- also add a "selectedValues" property, which takes in an array / signal of value properties, which then are automatically selected, whenever its value changes.

See https://www.telerik.com/kendo-angular-ui/components/listbox/api/listboxcomponent

Due to the internal mechanism by which the Scheduler displays events per day, some events are shrunk without reason, because others are shrunk due to overlap.

In the following screenshot, the Scheduler Event 1 has enough space to occupy the entire column, but is shrunk the same as Event 2 (which is shrunk due to the overlap with Event 3). Internally, each day use column separation logic to distribute the events. Since all three events fall into the same slot, the entire column is divided by 3 and events are distributed among them. Since Event 1 is the first event, it has been shown in the first 1/3. This isn't optimal, as this case proves it.

Here is how Kendo Scheduler behaves compared to Google Calendar in this case





Google Calendar

Please provide a way to disable the months or years when displaying months or years in the Calendar. The disabledDates callback function could be evaluated for these views.

Thank you

This will enhance the PDFViewer usability as the Toolbar provides many built-in features like responsiveness, tool customizations, etc., which will add extra value to the component.

The component is already used internally in the Editor and Spreadsheet.

Provide an option to dynamically remove a PDF file from the PDFViewer (a method, property, or a built-in toolbar tool).

When the PDF is removed, show the default blank page or the custom kendoPdfViewerBlankPageTemplate.

The Angular Grid export only includes PDF and Excel formats. Requesting an enhancement to be able to export to CSV for purposes of opening the data in a text editor other than Excel or to allow for easier upload into other applications.

There are articles that show how to do this but it would be better out of the box from Telerik.

https://stackblitz.com/edit/kendo-angular-grid-csv-export?file=app/app.component.ts

https://www.codeproject.com/Articles/5162666/CSV-Export-In-Angular-with-Kendo-Control 

In firefox, open the Kendo Radio Button documentation and slowly resize the window (https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton)

The radio button will kind of jiggle around and occasionally the white dot in the radio button will become off-center.

This also seems to happen in response to some material bouncy (cubic-bezier) animation transitions.

Kendo timeline range in the gantt can be miscalculated if children have start and end days earlier that their parent.

This happens to due oversight in TimelineBaseViewService.getRange function. Two variables startResult and endResult are calculated using only top-level entities from the supplied data hierarchy.

This stackblitz shows 2 cases.

1. The item is out of the bounds on the left due to an earlier start date than its parent's start date.
   
2. The item is rendered either as three dots or out of bounds on the right side (depends on the browser. Firefox tend to display three dots, Chrome clips the right side) due to end date being later than its parent's end date.
   

That's mostly visible on Day and Week timelines, however I believe can be reproduced on monthly and yearly views if the date spread is large enough.

Description

When you move the cursor to a new series item, the tooltip position does not move until you leave the chart area and re-enter. It changes the content based on where the cursor is pointing, but does not change the position.

Steps To Reproduce

1. Create a new Angular application
2. Add the Kendo UI Chart and paste the following code in the app.component.ts file:

import { Component } from '@angular/core';
import {KENDO_CHARTS} from "@progress/kendo-angular-charts";

@Component({
  selector: 'app-root',
  imports: [KENDO_CHARTS],
  template: `
    <kendo-chart>
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="donut"
          [data]="data"
          field="value"
          categoryField="category"
          colorField="color"
          [holeSize]="60"
          [tooltip]="{
            visible: true,
            format: '{0:C0}'
          }"
          [highlight]="{ visible: true }"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
`,
})
export class App {
  public data = [
    { category: "Electronics", value: 245000, color: "#0058e9" },
    { category: "Clothing", value: 189000, color: "#37b400" },
    { category: "Home & Garden", value: 156000, color: "#f59c1a" },
    { category: "Sports", value: 134000, color: "#ff6358" },
    { category: "Books", value: 98000, color: "#8c43ff" },
    { category: "Toys", value: 78000, color: "#00acc1" },
  ];
}

3. Run the application

Screenshots or video

Actual Behavior

The Tooltip position only changes when you leave and reenter the Chart area. It does not change when you move the cursor from one series item to other, it updates the content displayed in the Tooltip though.

Expected Behavior

The Tooltip position should move with the cursor as seen in the screen recording below:

Provide the possibility to dynamically change the height of the slots in Month, Multi-Week, and other views. This feature is useful in order to fit the events in the specific slot:

jQuery Scheduler:

https://demos.telerik.com/kendo-ui/scheduler/adaptive-slot-height

Add an optional positionCallback property to PopupSettings.

When using CSS transforms (e.g., transform: scale()) on container elements with dynamic values (CSS variables), the Popup component's positioning calculations don't account for the transformed coordinate space.

While the SCALE injection token exists, it only supports static values set at component initialization and cannot read dynamic CSS variables or respond to runtime changes.

• Enables custom positioning logic without breaking collision detection
• Supports dynamic transforms and CSS variable-based scaling
• Maintains backward compatibility (optional property)
• Eliminates the need for workarounds like MutationObserver
• Applicable to all components that use PopupSettings (DropDownList, ComboBox, MultiSelect, etc.)

With the current default behavior of the Splitter, when a user manually drags a Splitter pane to resize it, the component stores the pane's size as an absolute pixel value (i.e., flex-basis is set to a pixel value), and this is by design.

This means the pane does not scale with the browser window, unlike panes that have not been manually resized.

It would be useful if the Splitter could convert the pixel values to percentages on window resize, so that all panes continue to scale proportionally regardless of whether they were manually resized.

Currently, the Chat component does not provide a dedicated template for customizing only the avatar part of the user messages.

It would be great if such a template exists, so that the avatar can be customized as desired - for example, conditionally displaying an image with the avatarUrl or displaying only the initials if an avatarUrl is not present.

   I have tested kendo grid accessibility with AXE Dev tool. Found following errors that seems difficult to fix.

1)Certain ARIA roles must contain particular children

2)Scrollable region must have keyboard access

Any suggestion to fix these above-mentioned issues could be very helpful. Noticed these issues even exist in kendo grid demos published in kendo documentation. Check the link below

stack blitz link : https://stackblitz.com/edit/angular-uhjyd3x9?file=src%2Findex.html