0

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?

evanesco
  • 33
  • 9

1 Answers1

0

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.

evanesco
  • 33
  • 9