Disabling Data Grid Based on a Condition

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

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