Hello,
I am trying to override the padding on the column total cells to 0px (needed in order to make checkboxes in cells react to all cellclick events). I have tried using cell.addClass() and cell.attr in onCustomizeCell() to add a class and/or id attribute of ‘noPadding’ to the cells, which is successfully added to the html, and is then configured in the component css as seen below, but it is completely ignored.
onCustomizeCell():
Start
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";your code here
resulting html for column total cells:
<div style="text-align:center;background-color:#F44336;color:#FFFFFF;font-family:Arial;font-size:12px;min-width:100px;height:32px;top:94px;left:964px;" class="wdr-cell wdr-total wdr-grand-total 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>
.css:
.noPadding {
padding: 0px !important;
}
#noPadding {
padding: 0px !important;
}
div#webdatarocks-div #wdr-pivot-view .wdr-grid-layout div.wdr-cell.wdr-total.wdr-grand-total.fm-grand-total-c.noPadding {
padding: 0px !important;
}
The only thing that does seem to get recognized at all to override the “#wdr-pivot-view .wdr-grid-layout div.wdr-cell ” css styling (padding 7px 4px) is adding cell.style as seen commented out above – BUT then the column total cells disappear completely and are not inspectable- except for a tiny empy cell wrapped to the beginning of the first row which appears to have the right class.
Actually what appears to happen if any cell.style at all (even without padding=0px, or entirely matching the natively applied style string for the cell) is applied is that the style gets garbled into unreadable 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>
Any help greatly appreciated. Using cellclick to add row captions to an array with checkboxes in the cells is the only thing that is working since getSelectedCells () does not in fact return an array when multiple cells are selected.
Hello Olga,
Thank you for writing.
You can override the default CSS of WebDataRocks.
Here is the example of how to remove padding for the first level subtotal:
#wdr-pivot-view .wdr-grid-layout.wdr-compact-view .wdr-header-r.wdr-level-1 {
padding-left: 5px !important;
}
Regards,
WebDataRocks Team
Thank you for your responses.
Unfortunately neither this selector nor the one suggested in the other question work either, and they don’t select any cells using developer tools (
"#wdr-pivot-view .wdr-grid-layout.wdr-compact-view .wdr-header-r" selects the left row title cells but
, "#wdr-pivot-view .wdr-grid-layout.wdr-compact-view .wdr-header-r.wdr-level-1" selects no cells
Whereas the selector I had been trying to use does select the correct column total cells using developer tools: “div#webdatarocks-div #wdr-pivot-view .wdr-grid-layout div.wdr-cell.wdr-total.wdr-grand-total.fm-grand-total-c.noPadding”
But the problem is that in none of the cases, even if the selector is seen to correctly select cells using developer tools, does the css styling get affected at all; that is, the style included in the Angular component’s .css file is not even reflected in the Styles panel of developer tools.
I also tried putting the css elsewhere such as the app’s style.css , app-component.css, or even to edit the webdatarocks.min.css file (copied into a local file) but the former cases also don’t result in any css styles being recognized within the webdatarocks grid at all, and in the latter case adding the new styles file into angular.json doesn’t work as it says it’s not in the proper format to be applied as a styles file.
Here is an attachment showing the cells, with checkboxes on right, that I’m trying to modify. I don’t think the css selector is the issue. It’s that somehow none of the component or app or global styles are getting applied inside the Webdatarocks child component.
Also tried adding the .css file with the additional formatting directory into the webDataRocksComponent decorator, e.g.
@Component({
selector: "wbr-pivot",
template: "<div><div class='wbr-ng-wrapper'></div></div>",
styleUrls: ['./webdatarocks.component.css']
})
export class WebDataRocksPivot {
and putting all the possible suggested selectors in. However no .css except that in webdatarocks.min.css is applied or recognized as being potentially applicable at all.
The way I’ve set up my integration with Angular (7) is to include the downloaded WebDataRocks module as an imported module in app.module. Webdatarocks.min.css is linked in the top-level index.html for the app.
The attached image shows the overall app structure, where the <wbr-pivot> is used within pivot-grid.component, and all the .css files where the overriding css is included are indicated with red boxes. The content of the main index.html file with the webdatarocks imports is also shown.
If there are any suggestions as to how to restructure the files so that any css besides that in webdatarocks.min.css can be recognized, please let me know.
Never mind, it works when included in styles.css. Closing issue.
This question is now closed
