When header in grid is hidden (either via CSS or via hideHeader property), instead of first cell (first header column cell) getting focus, pressing tab will just skip grid so it is impossible to navigate through grid, toggle groups etc.

https://stackblitz.com/edit/angular-yhtc6xbz-n9c6u4ti?file=src%2Fapp%2Fapp.component.ts

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.

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

Hello,

I'm trying to get a custom column menu item list using the Angular Grid to work, but it does not seem to be accessible through the keyboard.

See following Stackblitz for a reproduction example: https://stackblitz.com/edit/angular-tzm2tpqt?file=src%2Fapp%2Fapp.component.ts

I navigated to a header column using tab to focus the grid and the arrow keys to select a specific header column, then pressed ALT + Arrow Down to open the column menu. The column menu opens as expected, but the initial menu item is not focussed and I cannot access the menu items using the keyboard. Instead, the grid is still focussed.

Any advice on what might be wrong in this example would very much be appreciated.

I have a grid where row height and detail row height are set correctly (i think) and virtual scrolling is turned on.  when I expand a row to show the detail view, as soon is i try to interact with the detail view (It has a tabstrip in it) it will jump that row to the top of the gird view.  It's pretty jarring.  ONLY when the detail component is at the top of the grid view will it let me interact with the detail view.  Not sure if i'm doing something wrong or there's a bug.

i attached a zipped mp4 of the behavior.

Tengo algo como esto dentro de un kendo grid , en el toolbar yo necesito tener un input que me servira de buscador para mi grid y al lado quiero  kendoGridAIAssistantTool , hacia la derecha quiero 2 botones importar excel y pdf , la pregunta es porque no aparece mi input? cuando utilizo kendo toolbar  , ademas que quiero usar comandos de generar PDF Y Excel del grid pero solo puedo con kendoGridToolbarTemplate deberia poder usarlo tambien con kendo-toolbar , ya que kendoGridToolbarTemplate y kendo-toolbar no se puede usar a la misma vez  , deberian arreglar eso

 <kendo-toolbar>

   <kendo-textbox
      style="width: 200px"
      placeholder="Buscar..."
      (valueChange)="onFilterChange($event)">
    </kendo-textbox>

<kendo-toolbar-button

kendoGridAIAssistantTool requestUrl="https://demos.telerik.com/service/v2/ai/grid/smart-state"

[keepOutputHistory]="true"

[aiPromptSettings]="aiPromptSettings"

[aiWindowSettings]="aiWindowSettings">

</kendo-toolbar-button>

    <button kendoGridExcelCommand>
      Exportar Excel
    </button>

    <button kendoGridPDFCommand>
      Exportar PDF
    </button>

 </kendo-toolbar>

Hi,

I'm experiencing an issue with the Kendo Grid Context Menu, when cellRowspan is active.

Reproduction:

• Open https://stackblitz.com/edit/angular-dbrbstsb-jmugb3st?file=src%2Fapp%2Fapp.component.ts
• Right click on the first cell within the "Unit Price" column
  • the alert shows that the "UnitPrice" column has been clicked, which is correct
• Now right click on the second cell within the "Unit Price" column
  • the alert shows that "UnitsInStock" is clicked, which is wrong

It seems like the wrong column is being calculated when rowspan is active.

I'm on the latest Kendo version (v21.3.0).

Is this a known issue?

Thanks in advance!

Hi,

I've implemented a <kendo-grid-column-group> in my Grid and discovered this lead to warnings being plotted into the browser developer console:

You can easily verify this by the official example:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/headers

-> Edit in -> Stackblitz -> Open Console

I'm working with the latest Kendo version 21.2.0 and ng 21.0.2.

Is this a known issue? Thanks in advance!

kendo 19.3.0, angular 19.2.17. 

applying kendoGridToolbarFocusable to kendo-dropdownlist gives it the correct behavior to stay focused on click but this same behavior did not work for kendo-multiselect. it stays open so long as the click is held in but once released it closes. if the mouse is hovered over the dropdown that opens AND THEN released, the multiselect stays open and has intended behavior after selecting items.

kendoGridFocusable was also tried in this scenario and did not produce results.

<ng-template kendoGridToolbarTemplate>
<kendo-dropdownlist style="min-width:220px; margin-right:5px; margin-left:5px"
                    kendoGridToolbarFocusable
                    [data]="names"
                    (valueChange)="handleApplyAllValueChange()"
                    [defaultItem]="defaultApplyAllItem"
                    [textField]="'nm'"
                    [valueField]="'id'"
                    [(ngModel)]="applyAllItem"
                    [hidden]="isRevisedRadioButton()">
</kendo-dropdownlist>
<kendo-multiselect style="min-width:220px; max-width:220px; max-height: 140px; overflow-y: auto"
                   kendoGridToolbarFocusable
                   [data]="applyAllSecondaryList"
                   [textField]="'nm'"
                   [valueField]="'id'"
                   [disabled]="isApplyAllSecondaryDisabled()"
                   [autoClose]="false"
                   [(ngModel)]="applyAllSecondaryItem"
                   [placeholder]="'Select Secondary'"
                   [hidden]="isRevisedRadioButton()">
  <ng-template kendoMultiSelectTagTemplate let-dataItem kendoGridToolbarFocusable>
    {{ dataItem.deviationNm }}
</ng-template>
</kendo-multiselect>
</ng-template>