cell.style in onCustomizeCell() gets compiled to garbage text and corrupts display

Re-Open

Any attempt to apply a cell.style via onCustomizeCell() results in garbage style text, e.g.

<div style="0:t;1:e;2:x;3:t;4:-;5:a;6:l;7:i;8:g;9:n;10::;11:c;12:e;13:n;14:t;15:e;16:r;17:;;18:b;19:a;20:c;21:k;22:g;23:r;24:o;25:u;26:n;27:d;28:-;29:c;30:o;31:l;32:o;33:r;34::;35:b;36:l;37:a;38:c;39:k;40:;;41:c;42:o;43:l;44:o;45:r;46::;47:#;48:F;49:F;50:F;51:F;52:F;53:F;54:;;55:f;56:o;57:n;58:t;59:-;60:f;61:a;62:m;63:i;64:l;65:y;66::;67:A;68:r;69:i;70:a;71:l;72:;;73:f;74:o;75:n;76:t;77:-;78:s;79:i;80:z;81:e;82::;83:1;84:2;85:p;86:x;87:;;88:m;89:i;90:n;91:-;92:w;93:i;94:d;95:t;96:h;97::;98:1;99:0;100:0;101:p;102:x;103:;;104:h;105:e;106:i;107:g;108:h;109:t;110::;111:3;112:2;113:p;114:x;115:;;116:t;117:o;118:p;119::;120:2;121:2;122:0;123:p;124:x;125:;;126:l;127:e;128:f;129:t;130::;131:9;132:6;133:4;134:p;135:x;" class="wdr-cell wdr-total wdr-grand-total fm-grand-total-r fm-grand-total-c noPadding" id="noPadding"><label style="width:100%;height:100%"><input type="checkbox" style="width:100%;height:100%" value="data.rows[0].caption" (click)="this.selectRow1($event)" name="checkBoxForm.selectedRows" [(ngmodel)]="checkBoxForm.selectedRows[data.rows[0].caption]"></label></div>

when any style is added, for example

(inside onCustomizeCell() :) if (data.isTotalColumn && data.value===0 && this.viewType!=='Kit Comparison') {
let testsuite=`data.rows[0].caption`;
cell.text=`<label style="width:100%;height:100%"><input type="checkbox" style="width:100%;height:100%" value="${testsuite}" (click)="this.selectRow1($event)" name="checkBoxForm.selectedRows" [(ngModel)]="checkBoxForm.selectedRows[${testsuite}]"></input></label>`
cell.addClass("noPadding");
cell.attr={"id":"noPadding"};
// cell.style="text-align:center;background-color:#F44336;color:#FFFFFF;font-family:Arial;font-size:12px;min-width:100px;height:32px;top:220px;left:964px;padding:0px";
cell.style="text-align:center;background-color:black;color:#FFFFFF;font-family:Arial;font-size:12px;min-width:100px;height:32px;top:220px;left:964px";

This is related to question https://www.webdatarocks.com/question/cannot-ovverride-css-padding-on-column-total-cells/ also as it compounds the inability to override the cell style in any way.
 
In this example, cell.text, cell.attr and cell.addClass() work fine (except that they don’t affect css style application), just cell.style does not work as expected.

1 answer

WebDataRocks Team WebDataRocks 16 hours ago

Hello Olga,
Thank you for posting your question here.
The described issue with cell.style is reproducible on our side. We will add it to our backlog.
As for class properties, please make sure that your CSS is applied correctly to the cell.
Here is an example:

#wdr-pivot-view .wdr-grid-layout.wdr-compact-view .wdr-header-r.wdr-level-1.noPadding {
}

The CSS applied such way should work as expected.
Regards,
WebDataRocks Team

Please login or Register to Submit Answer