I'm working with a jqxgrid and I need to change the cursor to a pointer when hovering on a column's header name. I've tried to use CSS on the .jqx-grid-columngroup-header, .jqx-grid-column-header, and the .jqx-widget-header.
#jqxWidget .jqx-grid-columngroup-header:hover,
.jqx-grid-column-header:hover,
.jqx-widget-header:hover {
cursor: pointer;
}
All this seems to do is have the cursor turn into a pointer around the header but not on the header itself. I would like the pointer to appear when hovering on the words of the header, not the space around it.
I inspected the element on the webpage and it shows me this:
<span style="text-overflow: ellipsis; cursor: default;">Column Name</span>
Clearly, the CSS on the span is overriding anything I do and creating my issue. I tried to search my CSS files for this and could not find it.
Could someone clear this up for me?
EDIT: I'm tagging javascript too. Maybe there's something I could do when the grid is rendering with javascript?
After trying just about everything I could think of I came up with a clunky solution.
In the jqx grid itself, I added a new class to each column header label and that class changes the cursor to a pointer.
In the grid for each column header:
columns: [{ text: "Header Name",
datafield: "Data",
width: 160,
menu: false,
rendered: function (header) {
header.html("<span class='jqxheaderlabel'>Header Name</span>")
}
}]
In my CSS:
.jqxheaderlabel {
cursor: pointer !important;
}
If anyone can come up with a cleaner solution, it would be much appreciated.