jQuery UI Widgets › Forums › Grid › Cannot render Header Color after 10th column
This topic contains 5 replies, has 2 voices, and was last updated by HenryF 3 years, 4 months ago.
-
Author
-
$(“.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-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”);We have multiple grid in the same page and we apply user define color to the grid one by one, for any grid in the page, it works fine for the first 10 columns, but starting from 11th, header font color was ignored and set to default(or whatever color was set in the css).
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!
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”);Hi HenryF,
If you are using virtual columns this behavior is possible because not all columns are rendered when the jqxGrid is initialized, but are rendered when you scroll horizontally the grid which is why this functionality is not supported.
However if this is not the case it will be best to share a bit more context of your use case and how you have set up your grid.
Please, do not hesitate to contact us if you have any additional questions.
Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.comHi 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,
HenryHi 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”);
}
}); -
AuthorPosts
You must be logged in to reply to this topic.