Disabling the Grid Column Headers

Environment

Product

Progress® 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.

html

<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.

Change Theme

Theme

Loading ...

Suggested Links

• Grid Overview
• API Reference of the Grid Component
• Styling the Grid columns