We’re experiencing a performance slowdown in our Angular application whenever a tooltip is hovered. Upon inspection in Chrome DevTools, we observed multiple warnings such as

These violations appear only during tooltip hover events, causing noticeable UI lag.

Environment:

• Framework: Angular 19.2.14

• Browser: Chrome (140.0.7339.208)

• Tooltip Version :  (@progress/kendo-angular-tooltip": "18.5.2")
  
  can you help with that? Thanks in advance.

After v20.0.0 update and the removal of kendoGridGroupBinding directive, there is a new bug that was not there before.

If you are in group mode, and you programmatically change row data, the data does not reflect the changes visually, unless you collapse the groups and re-expand them again to see the new changes. 

This problem only started after removing the kendoGridGroupBinding input or directive.

*Update: this problem only happens when virtual scroll is on. 

I have also noticed that selecting a row is glitchy when the grid is grouped and sorted, especially when it is initially sorted and grouped.

We are using the @progress/kendo-angular-grid@^20 without the AI Prompt feature.

However it turns out @progress/kendo-angular-conversational-ui and it's peer dependencies are included in the final bundle.

We do not want these unused features to be included in the final bundle, as they're not required.

See related https://github.com/telerik/kendo-angular/issues/4700

Hi,

The scolling to an item doesn't seem to be working when paging (and not on the correct page).

The demo also doesn't work (click the scroll to item 57 button):

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes#scrolling-to-a-specific-item

It there a fix or workaround?

Kind regards

Hi Team,

I have default text filter (manual/server side) and want to have another filter as dropdownlist but both filters together  working

Sample : https://stackblitz.com/edit/dvv6dr8o

Before Filter

After apply both filters and remove filter for "Product Name" is not working. Also the filter array lost the selection for  "Category" field.
Also I need help to clear the dropdownlist/filter for category.

Hi,

I'm using kendo-grid in Angular with both resizable columns and virtual scrolling enabled.
I also call the autoFitColumns() method (through ViewChild) to auto-adjust the column widths based on the content.

However, I noticed the following problematic behavior:

• My grid uses pageSize = 60, so only 60 rows are rendered in the DOM at a time.

• I have a total of about 101 rows.

• The content in row #101 is much wider than any of the rows currently rendered.

• When I call autoFitColumns(), the method calculates the width based only on the visible (rendered) rows (the first 60).

• As a result, when I scroll down to row 101, the cell shows ellipsis (...) because the column width didn't get adjusted based on its content.

It seems that autoFitColumns() does not take into account rows that aren't currently rendered due to virtual scrolling.

Expected behavior:
Ideally, autoFitColumns() should consider the ENTIRE dataset, or at least provide an option to temporarily render all rows, so the width is calculated correctly.

I'll attach a sample StackBlitz with:

• 101 records

• Virtual scrolling + resizable = true

• Last row has a long text

• After calling autoFitColumns, the column is not wide enough and shows "..."

Could you please confirm if this is expected behavior or if there's a recommended workaround?

https://stackblitz.com/edit/angular-8rzs1wr6-7hvlbi8f?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fproducts.ts

Thanks in advance!

Hi Team,

Originally we have implemented the client side filter using the Date Range for date column. Now the requirement got changed and we need to fetch it from server. But the problem is API call returns the data based on start and end date selected but the UI is not rendering the same. UI is rendering the data if we select only the start date.
We have implemented the date range filter by referring this page https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row#using-daterange. Can you please help to render the data by ignoring the client side filter. we are using the CompositeFilterDescriptor for filter the kendo grid data from server. still the client side filter is working for text/string filter but rendering the final data returned by API.

import { Component, Input } from "@angular/core";
import {
  BaseFilterCellComponent,
  FilterService,
} from "@progress/kendo-angular-grid";
import { FilterDescriptor } from "@progress/kendo-data-query";
import { SVGIcon, xIcon } from "@progress/kendo-svg-icons";

/**
 * NOTE: Interface declaration here is for demo compilation purposes only!
 * In the usual case include it as an import from the data query package:
  */
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';

@Component({
  selector: "date-range-filter-cell",
  styles: [
    `
      kendo-daterange > kendo-dateinput.range-filter {
        display: inline-block;
      }
      .k-button {
        margin-left: 5px;
      }
    `,
  ],
  template: `
    <kendo-daterange>
      <kendo-dateinput
        class="range-filter"
        kendoDateRangeStartInput
        [value]="start"
        (valueChange)="filterRange($event, end)"
        style="width:120px"
      >
      </kendo-dateinput>
      -
      <kendo-dateinput
        class="range-filter"
        kendoDateRangeEndInput
        [value]="end"
        (valueChange)="filterRange(start, $event)"
        style="width:120px"
      >
      </kendo-dateinput><button
      kendoButton
      [svgIcon]="xIcon"
      title="Clear"
      (click)="clearFilter()"
    ></button>
    </kendo-daterange>
  `,
})
export class DateRangeFilterCellComponent extends BaseFilterCellComponent {
  // @Input() public filter: CompositeFilterDescriptor;

  @Input()
  public field: string;

  public xIcon: SVGIcon = xIcon;

  // constructor(filterService: FilterService) {
  //   super(filterService);
  // }

  public get start(): Date {
    const first = this.findByOperator("gte");

    return (first || <FilterDescriptor>{}).value;
  }

  public get end(): Date {
    const end = this.findByOperator("lte");
    return (end || <FilterDescriptor>{}).value;
  }

  // public get hasFilter(): boolean {
  //   return this.filtersByField(this.field).length > 0;
  // }

  public clearFilter(): void {
    this.filterService.filter(this.removeFilter(this.field));
  }

  public filterRange(start: Date, end: Date): void {
    this.filter = this.removeFilter(this.field);

    const filters = [];

    if (start) {
      filters.push({
        field: this.field,
        operator: "gte",
        value: start,
      });
    }

    if (end) {
     let enddate = new Date(end);

      filters.push({
        field: this.field,
        operator: "lte",
        value: end.setDate(enddate.getDate() + 1),
      });
    }

    const root = this.filter || {
      logic: "and",
      filters: [],
    };

    if (filters.length) {
      root.filters.push(...filters);
    }

    this.filterService.filter(root);
  }

  private findByOperator(op: string): FilterDescriptor {
    return this.filtersByField(this.field).filter(
      ({ operator }) => operator === op
    )[0];
  }
}

Hi there,

When [locked] is set in grid column, the kendoGridDetailTemplate will be broken. Noticed this issue after recent kendo version upgrade to 18.

Two expand + button will show in the locked columns and not locked columns and both buttons not working to expand.

Thanks.

hi,

i have a snippet codes:

https://codesandbox.io/p/sandbox/adoring-galois-4cpxxm?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A29%2C1

what i want is 

if the product name is "Chai", i want to give the "TD" cell  a speical css class name.

i can get the product name by the above codes, but i dont know how to set the "TD" class name . the TD is the parent element of the span .

can you please tell me how to do this?