This is template code: 

 <kendo-grid
      [data]="gridView"
      [groupable]="true"
      [hideHeader]="true"
    > ... </kendo-grid>

This is code from component: 

export class MyComponent {
  data: any[] = [
    {
      id: crypto.randomUUID(),
      name: 'Emma Thompson',
      group: 'Team A',
    },
    {
      id: crypto.randomUUID(),
      name: 'Oliver Smith',
      group: 'Team B',
    },
    {
      id: crypto.randomUUID(),
      name: 'Anna Brown',
      group: 'Team A',
    },
  ];
  group: GroupDescriptor[] = [{ field: 'group', dir: 'asc' }];

  get gridView() {
    return process(this.data, {
      group: this.group,
    });
  }
}

This is output: 

Question is, how can I customize this label so that it displays text that I want? I have tried setting it programatically, but as soon as I collapse/expand top group, seems like all other groups reset label back to this default one?

Package / Version:
@progress/kendo-angular-grid v23.2.1 (also reproduced on v23.3.0)
Angular 20.x

Description:

When using a Kendo Grid with scrollable="virtual", [rowHeight]="30", and [data] bound to a GridDataResult, if the user scrolls down (triggering (pageChange) with a non-zero skip), and then the data is replaced programmatically (e.g., by applying a filter that changes the dataset), the grid's virtual scroll container does not reset properly. The result is a large white/empty area above the actual rows — the user must scroll past this empty space to see the data (or the "No records available" message if the filtered result is empty).

Steps to Reproduce:

1. Create a grid with virtual scrolling:

<kendo-grid [data]="gridData" [kendoGridBinding]="filteredData"    scrollable="virtual" [rowHeight]="30" [pageSize]="300"    [skip]="currentSkip" (pageChange)="onPageChange($event)"></kendo-grid>

2.Load the grid with enough data to enable scrolling (e.g., 1000+ rows).

3.Scroll down significantly so the grid fires (pageChange) with a skip value > 0 (e.g., skip=300+).

This causes the grid's internal virtual scroller to:

Set translateY(Npx) on the grid table element to offset the visible rows
Set .k-height-container > div height to total * rowHeight
4.Now programmatically change the bound data to a much smaller or empty dataset:

this.filteredData = this.allData.filter(item => item.driverId === selectedDriverId);
this.gridData = {  
data: this.filteredData.slice(0, this.pageSize),
total: this.filteredData.length
};
  

  
private resetGridVirtualScroll(): void { 
try {       

const gridEl: HTMLElement = this.myGrid.ariaRoot.nativeElement; 

      // Reset scroll position   const content = gridEl.querySelector('.k-grid-content');

        if (content) {    
        content.scrollTop = 0;      
  }       

// Reset the table translateY that virtual scroll sets 
    const table = gridEl.querySelector('.k-grid-content table, .k-grid-content .k-grid-table-wrap');   

    if (table instanceofHTMLElement) {

            table.style.transform = 'translateY(0px)';       

}       

// Reset the height container to match new total
 const heightDiv = gridEl.querySelector('.k-height-container > div') asHTMLElement;     

  if (heightDiv) {       

    const total = this.filteredData?.length || 0;       

    heightDiv.style.height = (total * this.rowHeight) + 'px'; 

      } 

  }

catch (e) { }
}
       

applyFilter() {   

this.skip = 0; 

  this.filterData(); 

  this.loadGridData();   

this.resetGridVirtualScroll();

}

We also had to fix loadData() to handle empty datasets — when FilteredData is empty, gridData must be set to { data: [], total: 0 }, otherwise the grid retains the old total and the virtual container keeps its large height.

Expected Fix:

The grid should automatically call resetVirtualScroll() whenever [data] changes with a new (different) total value and the virtual scroller is out of sync — regardless of the current internal skip state. The ngOnChanges guard this.skip === 0 should either be removed or should check the incoming skip binding value rather than the stale internal state.

So I have a requirement to have gantt timeline spread as much as possible. Since treelist is fixed 500px width, I calculate upon view init how much slotWidth for each day should be. When I resize screen, what I noticed is that width is not updating, so I tried to set table width via CSS to be 100%. When I resize window in this case, table columns do resize, but task stays the same width.

Also when I collapse treelist and timeline is expanded, it should take 100% of screen, yet it still takes calculated width.

Is there a solution for this resize?

I’m using Kendo UI for Angular (Angular 20) with the Kendo MultiViewCalendar along with Kendo Tooltip.

I have a custom month cell template where I’m showing indicators (like categories) and applying a tooltip using the title attribute. The tooltip works fine in general.

However, I’m facing an issue specifically with dates that fall inside the selected range (highlighted/red background). For these cells, the tooltip is not  (not visible / not triggering).

It seems like the range selection overlay or styling is preventing the tooltip from being triggered, possibly due to layering or pointer event limitations.

What I want:

I need to display a tooltip on those red (range-selected) date cells as well.

My question:

Is there any supported way or workaround to make tooltips work on dates that are inside the selected range in the MultiViewCalendar?

Any guidance would be really helpful.

Thanks!

Here is an article I wrote, and I would appreciate your feedback

Bridging the gap: Angular Signals + Kendo UI Grid. 🔄
I’m sharing my journey on refactoring enterprise apps using rxResource, withPreviousValue, and a custom directive for a glitch-free, high-performance UI.

https://medium.com/we-code/kendo-angular-grid-meets-signals-25537c901cdf

Thanks.

Diego

This is code:

<kendo-textarea
      placeholder="Write description…"
      resizable="vertical"
      [rows]="2">
</kendo-textarea>

and this is output (top button is only for vertical resizing and bottom one resizes both ways):

Hi all.

I'm using kendo-pdfviewer and loading it with a PDF I get from a web service.  The web service takes query parameters and returns a PDF as a Byte[] and I turn that into a base64 string and put that in the viewer.  Basic stuff ;)  Here's the element from my HTML:

Now, if i.e. the user has a PDF in the viewer and wants to narrow the data with some extra parameters, and that result returns an empty PDF, I need to remove the previous PDF from the viewer.

I've tried to set [data] to null and undefined but that does not work. Any suggestions ?

Best regards,
Kalli Kaldi

Whenever I use kendo-dropdownbutton, if button contains only icon and not text, even though I set title, ariaLabel or attr.aria-label it will give me issues with jasmine.axe ( link ). I solve this every time by setting title and aria-label in ngAfterViewInit, but is there another way that is more aligned with component?

Edit: Screen reader NVDA also does not announce title/aria-label on button focus, so jasmine.axe complains for a reason.