Changing the Cursor Styling in the Header of the Data Grid

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

How can I customize the cursor when hovering over the column header in the Data Grid?

Solution

To achieve the desired scenario:

1. Set a custom class, which can be utilized to modify the cursor of the column header, by using the headerClass property.

   html

   <kendo-grid-column [headerClass]="{ myClass: true }"></kendo-grid-column>

2. Apply the custom cursor styles to the inner elements of the <th> element:

   css

   .myClass .k-cell-inner .k-link{
   	cursor: none;
   }

The following example demonstrates how to hide the cursor for the ID and Name columns.

Change Theme

Theme

Loading ...