jQuery UI Widgets Forums Grid Cannot render Header Color after 10th column

Tagged: , ,

This topic contains 5 replies, has 2 voices, and was last updated by  HenryF 2 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • HenryF
    Participant

    $(“.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).


    HenryF
    Participant

    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!


    HenryF
    Participant

    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”);


    Yavor Dashev
    Participant

    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.com


    HenryF
    Participant

    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


    HenryF
    Participant

    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”);
    }
    });

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.