Disabling Data Grid Based on a Condition

Updated on Jun 25, 2026

Environment

Product

Progress® Kendo UI for Angular Grid

Description

I want to disable the entire Kendo UI for Angular Grid based on a condition. How can I achieve this?

This knowledge base article also answers the following questions:

• How can I make the Kendo UI for Angular Grid readonly?
• How do I apply a disabled class to the Grid component?
• Can I disable the Data Grid component dynamically?

Solution

To disable the entire Kendo UI Grid for Angular based on a condition, add the .k-disabled class using ngClass. Follow the steps below:

1. Define a condition in your component, such as a boolean variable.
2. Use the ngClass directive to dynamically add the k-disabled CSS class to the Grid's wrapper element. The class comes from the Kendo themes and prevents user interaction with the Grid and its elements.

Example

The following code snippet demonstrates how to toggle the disabled state of the Kendo UI Grid for Angular using a button click:

ts

import { Component } from '@angular/core';
import { CommonModule } from "@angular/common";
import { KENDO_GRID } from "@progress/kendo-angular-grid";

@Component({
  selector: 'my-app',
  imports: [KENDO_GRID, CommonModule],
  template: `
    <button (click)="toggleGrid()">Toggle Grid</button>
    <kendo-grid [data]="[]"... [ngClass]="{ 'k-disabled': isDisabled }"> </kendo-grid>
  `,
})
export class AppComponent {
  public toggleGrid() {
    this.isDisabled = !this.isDisabled;
  }
}

See Also

• Kendo UI for Angular Grid Documentation
• Using ngClass in Angular