Formatting Column Headers

[timtateMember]

I’m trying to format column headers in the grid according to examples I’ve found, but it’s not working.
I’m basing this on the example here http://www.jqwidgets.com/jquery-grid-with-column-tooltips/ (which also doesn’t work for me).

I want to set the color of the background of a certain column, and I added a coloredred callback to the column definition like so:

{ text: 'Part Number', datafield: 'PartNumber', editable: false, width: 80, rendered: coloredred },

I created a function to match, like this:

var coloredred = function (element) {
    $(element).addClass('Red');
}

It has no effect, and when I add console.log(element) after the addClass function I get:

<a style="margin-top: 22px; float: left;" href="#">Part Number</a> 

Clearly the class isn’t being added. What am I doing wrong?

[timtateMember]

I have tried using both the current jQuery 1.10.1 and the recommended jQuery 1.8.3 by the way.
I am using jQWidgets 2.8.3.
Current Chrome, 27.0.1453.110, IE 9, Firefox 20.0.1 all have the same issue.

[Peter StoevKeymaster]

Hi,

You can see how to render a Column header in this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customrowsselection.htm?web

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[timtateMember]

Hi Peter,
If you’re talking about these lines:

rendered: function (element) {
    $(element).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    [other code to bind click event]
}

It doesn’t work. I copied and pasted your code directly, and my header stays exactly the same. No errors in console.log either.

[Author]

Posts