[HenryFParticipant]

Hi Yavor,

I found this is working on my scenario, tracking down the scroll bar and mouse action and apply css changes:

var scbar = $(“#grid”).jqxGrid(“hScrollBar”); // Horizontal scrollbar. Verical one is vScrollBar
scbar.jqxScrollBar(“_triggervaluechanged”, true);
scbar.on(“valueChanged”, function () {
if (_headerFontColor !== undefined && _headerFontColor !== “”) {
$(“.jqx-grid-column-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-widget-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-cell-pinned”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-cell-filter”).css(“color”, “#” + _headerFontColor + “!important”);
}

if (_headerColor !== undefined && _headerColor !== “”) {
$(“.jqx-grid-column-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-widget-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-cell-pinned”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-cell-filter”).css(“background-color”, “#” + _headerColor + “!important”);
}
});

$(“#grid”).mouseout(function () {
if (_headerFontColor !== undefined && _headerFontColor !== “”) {
$(“.jqx-grid-column-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-widget-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-cell-pinned”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-cell-filter”).css(“color”, “#” + _headerFontColor + “!important”);
}

if (_headerColor !== undefined && _headerColor !== “”) {
$(“.jqx-grid-column-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-widget-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-cell-pinned”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-cell-filter”).css(“background-color”, “#” + _headerColor + “!important”);
}
});

[HenryFParticipant]

Hi Yavor,

Thanks for the reply, this is exactly what I am experiencing, and from what I know so far, when scrolling and “mouse out” of the columns, it will took the style from css again.

Is there a way to handle these situations?

Regards,
Henry

[HenryFParticipant]

Sorry, one more note to add, color for the header row was working, but the background color of the filter row is not….

$(“.jqx-grid-column-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-widget-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-header”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-cell-pinned”).css(“color”, “#” + _headerFontColor + “!important”);
$(“.jqx-grid-cell-filter”).css(“color”, “#” + _headerFontColor + “!important”);

$(“.jqx-grid-column-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-widget-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-header”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-cell-pinned”).css(“background-color”, “#” + _headerColor + “!important”);
$(“.jqx-grid-cell-filter”).css(“background-color”, “#” + _headerColor + “!important”);

[HenryFParticipant]

I found that it may due to the visibility of the columns when the grid was first loaded, not the number of columns.

If I decrease the width of the columns, more columns can handle the color we have defined programmatically, but when we starts scrolling to the right, header colors of the later columns becomes default colors.

Any grid event I should be looking at to address this problem?

Many thanks!

[Author]

Posts