jQuery UI Widgets Forums Grid Dynamically change checkbox color

Tagged: ,

This topic contains 2 replies, has 1 voice, and was last updated by  Pietervk 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Dynamically change checkbox color #107733

    Pietervk
    Participant

    Based on a boolean in one of the data fields, I would like to dynamically change the color of the checkbox. So rather than showing two checkboxes, I want to show one with either a black or a green check mark.

    I thought I could make a cellclass function, but this sets the css on a higher level than what I need:

    `var cellActiveEpdclass = function (row) {
    //highlight when the api has retrieved a finished result or doc
    if (row === -1) return ”;
    var rowid = $(‘#jqxgrid’).jqxGrid(‘getrowid’, row);
    var data = $(‘#jqxgrid’).jqxGrid(‘getrowdatabyid’, rowid);
    if (data === undefined) {
    return ”;
    }
    if (data.Finished && data.Epd) {
    return ‘ jqx-checkbox-green-checked’;
    }
    return ”;
    };`

    with css:

    .jqx-checkbox-green-checked {
         background: transparent url(images/check_green.png) center center no-repeat!important;
     
    }

    I would appreciate any suggestions

    Dynamically change checkbox color #107734

    Pietervk
    Participant

    Often asking the question precisely leads to the answer 🙂

    I needed to change the css to:
    .jqx-checkbox-green-checked .jqx-checkbox-check-checked {
    background: transparent url(images/check_green.png) center center no-repeat !important;
    }

    Dynamically change checkbox color #107749

    Pietervk
    Participant

    I see the interface has more functionality compared to where I got the example from. It can be simplified to:

    
    var cellActiveEpdclass =  function (row,column, value, data) {
    //highlight when the api has retrieved a finished result or doc
    if (row === -1) return "";
    if (data.Finished && data.Epd) {
    return "jqx-checkbox-green-checked";
    }
    return "";
    };
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.