Color field in Datagrid works in ng-desktopclient not ng-webclient

Servoy

Version: 2024.3.7.3950_LTS

show color in Datagrid, works in ng-desktop not in ng-webclient

Datagrid cell.

StyleclassDataprovider cell_style_color

Calculation in database

/**

  • @properties={type:12,typeid:36,uuid:“8AA2D8C6-346E-461A-B6B0-92B4F405488C”}
    */
    function cell_style_color()
    {
    return ‘bg-’ + utils.stringReplace(agndcode_kleur,‘#’,‘’)
    }

globals load css

/**

  • Color from database field
  • @properties={typeid:24,uuid:“F352C4B3-B5E7-484E-84D1-F3A275B4D94F”}
    /
    function css_agenda() {
    //created dataset from database
    var csv = vDataset.getAsText(‘,’,‘\n’,‘"’,true);
    /application.output(‘------\n’ + csv + ‘-------’)
    “color”
    #f2f542*”
    #dc0909
    #398e3a
    #bcbc29”/
    var color = ‘#ffffff’;
    for (var i = 1 ; i <= vDataset.getMaxRowIndex(); i++){
    color = vDataset.getValue(i,1);
    var cssname = ‘.bg-’ + utils.stringReplace(color,‘#’,‘’);
    var stylesheetContent = cssname + ’ { background-color: ’ + color + ‘; }’
    addStyleSheet(stylesheetContent);*
    */
    output color stylesheetContent
    #f2f542
    .bg-f2f542 { background-color: #f2f542; }
    #dc0909
    .bg-dc0909 { background-color: #dc0909; }
    #398e3a
    .bg-398e3a { ba@paramkground-color: #398e3a; }
    #bcbc29
    .bg-bcbc29 { background-color: #bcbc29; }*/@param}

}

/**

  • TODO generated, please specify type and doc for the params
  • @param stylesheetContent
  • @properties={typeid:24,uuid:“41C1B361-4E33-4CB1-A149-33AAE9A1E607”}
    */
    function addStyleSheet(stylesheetContent) {
    var _stylesheetContentB64 =utils.stringToBase64(stylesheetContent)
    addCSSReference(“data:text/css;base64,” + _stylesheetContentB@para@param4)
    }

/**

  • TODO generated, please specify type and doc for the params

  • @param URL

  • @properties={typeid:24,uuid:“D53BA5A7-D90D-4326-AA28-F84D233D784B”}
    */
    function addCSSReference(URL){

     var _oTag = {
     	        tagName: "link",
     	        attrs : [{
     		         name: "rel",
     		         value: "stylesheet"
     	        },{
     	         name: "href",
     	         value: URL
     	        }]
     }
    
     plugins.ngclientutils.contributedTags.push(_oTag);
    

}

my feeling is that this doesn’t work in an actual client because that is in CSP full block mode..
Are you seeing in the browser when you do that also errors that the browser blocks stuff because of CSP violation constraints?

i think you should try to avoid this to try to dynamically add css again, that css should be in the solution.css/less file so you only set a class at the cell/row

I made a ng2.less file with .bg-111111 to .bg-ffffff only use 1 3 5 7 9 b d f with the same hexcolor

.bg-ffffbb {

background-color: *#ffffbb*

}

when a user choose a color #12de2F it will save as #11dd33.

With the cell_style_color calculation it works