Is it possible to add the grab icon when hovering over (cursor: grab;) a Column Header and the grabbing icon when reordering (cursor: grabbing;) like it is done for the reordering of the tile layout?
https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles/#toc-reordering
It looks like it would need .k-cursor-grabbing added when moving and .k-cursor-grab when hovering.
The issue I had with applying the cursor:grab and cursor:grabbable to the active .k-header is that while you are dragging a column on top of another column, you lose the grabbing icon and you get the open hand because you are hovering over another column. EVEN though you haven't dropped the column yet.
1 Answer, 1 is accepted
Hello Mo,
You can override the behavior for the desired columns cursor by using the `cursor` CSS property and `headerClassName` Grid property.
For example, you can add `yourCusrsorClass` inside the `headerClassName` and change the cursor behavior:
.yourCusrsorClass .k-link {
cursor: grab
}You can also add the needed styling for when the cursor needs to be `grabbing`.
You can check this article for more information about the styling of the links:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links
You can check this article for information about the `cursor` CSS property:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
And also this API reference to the `headerClassName` Grid property:
https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-headerclassname
Please let me know if you need more assistance.
Regards,
Ina
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.