Column Header renderer function

[kamdengParticipant]

Hello. I am relatively new to jqxgrid and had a simple question. I am trying to use the column custom header renderer, and am unable to get it work at all.

The documentation is pretty limited:

renderer – sets a custom column renderer. This can be used for changing the built-in rendering of the column’s header.

I have a column definition as follows in the jqxGrid initial constructor:

columns: [
{ text: 'First Name', datafield: 'First Name', filtertype: 'input', renderer: customheader}
]

And I also define the following function:

	            var customheader = function() {
	            	return 'hello!';
	            }

I see the following Javascript error when I view the page:
Uncaught Error: Syntax error, unrecognized expression: hello!

What is the proper way to use the renderer function? Thank you.

[DimitarParticipant]

Hello kamdeng,

Here is how to use the renderer callback function:

columns: [
    { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250, renderer: function (defaultText, alignment, height) {
        return '<span>hello!</span>';
    }
    },

rendered may also be useful in such situations:

columns: [
    { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250, rendered: function (header) {
        header.html("hello!");
        header.css("font-style", "italic");
    }
    },

Best Regards,
Dimitar

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

[Author]

Posts