New to Kendo UI for Angular? Start a free 30-day trial

Disabling the Grid Column Headers

Environment

ProductProgress® Kendo UI for Angular Grid

Description

How can I disable the column headers in the Kendo UI for Angular Grid? I want to limit the user interaction with the column headers in the Grid component and in this way prevent any modifications to the sorting of the specific columns.

Solution

To disable the column headers of the Grid component, use the built-in headerClass property and set its value to the k-disabled CSS class.

<kendo-grid [data]="gridView">
    <kendo-grid-column headerClass="k-disabled">
    </kendo-grid-column>
    <kendo-grid-column headerClass="k-disabled">         
    </kendo-grid-column>
</kendo-grid>

The following example demonstrates the full implementation of the suggested approach.

Example
View Source
Change Theme:

In this article

Not finding the help you need?