[Christophe OpoixParticipant]

There is a small problem though.
The tooltip is only displayed on the first part of the column header, the iconscontainer div blocks the tooltip display.

Is there a way to redefine the iconscontainer title or apply the title on the parent div ?

[Christophe OpoixParticipant]

Actually this won’t work if you also have filtering, it will lose focus on the filters.

Can we get the parameter we specify in the filter function :

$("#jqxGrid").jqxGrid('updatebounddata', 'filter');

So we can ignore those events ?

If not, you have to unbind the event after the first execution, like this :

var jqxgridlocalizationobj = {...};
var localizeString = function(event) {
    $("#jqxGrid").jqxGrid('localizestrings', jqxgridlocalizationobj);
    $("#jqxGrid").unbind('bindingcomplete', localizeString)
};
$("#jqxGrid").bind('bindingcomplete', localizeString);

But IMO it rather should allow localization to be applied even if the data isn’t loaded.

[Christophe OpoixParticipant]

For reference, you can access to other elements of the row with :

this.owner.source.records[row]['datafield']

The cellsrenderer function should look like this :

var cellsrenderer = function (row, column, value) {
    var color = this.owner.source.records[row]['color'];
    if (color) {
        return '<div style="background: ' + color + '; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + value + '</div>';
    } else {
        return '<div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + value + '</div>';
    }
}

[Christophe OpoixParticipant]

Hi,

You can pass parameters to functions that return functions, like this :

var headerTooltipRenderer = function(text) {
    return function (columnHeaderElement) {
        return "<div style='margin-left: 10px;margin-top: 5px' title='" + text + "'>" + columnHeaderElement + "</div>";
    };
};

Then define your columns like this :

columns: [
    { text: 'Y', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150, renderer: headerTooltipRenderer('The Year') },
    { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer('The HPI') },
    { text: 'Cost', datafield: 'BuildCost', cellsformat: 'f2', width: 180, renderer: headerTooltipRenderer('The Build Cost') },
    { text: 'Pop', datafield: 'Population', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer('The Population') },
    { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100, renderer: headerTooltipRenderer('The Rate') }
 ]

[Author]

Posts