Dynamically change checkbox color

[PietervkParticipant]

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

[PietervkParticipant]

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

[PietervkParticipant]

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 "";
};

[Author]

Posts