javascriptjqxgridjqxwidgets

Make cursor turn to pointer on .jqxgrid column headers


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?


Solution

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