How to implement cellclick function

Answered

Hello,
Is it possible to get an example of the use of the @Output property
@Output() cellclick: EventEmitter<WebDataRocks.Cell> = new EventEmitter();
with Webdatarocks Angular?
I am attempting to execute a function on cell click, and so far neither cellclick nor adding ‘(click)=”open()”‘ in a customizeCell function html element is working, where open() is a function defined on the same component.  I also tried referring to it as ‘this.open’ or ‘this.open’ or “${this.open}” or “${this.open()}” with customizeCell defined using fat arrow syntax in order to close over the component’s ‘this’.  Only the last syntax recognized the this.open() as a variable but the table was rendered very strangely with large light green cells extending horizontally over the whole table.
This is the onCustomizeCell code and the onCellClick() and open() functions.  ( I am trying to use the ng-bootstrap modal to open another component in both cases, either the cellclick output or onCustomizeCell.) 

   onCustomizeCell = ( cell: WebDataRocks.CellBuilder, data: WebDataRocks.Cell) => {
if (data.isClassicTotalRow) cell.addClass("fm-total-classic-r");
if (data.isGrandTotalRow) cell.addClass("fm-grand-total-r");
if (data.isGrandTotalColumn) cell.addClass("fm-grand-total-c");
var augmentedRestriction=JSON.parse(JSON.stringify(this.origJsonQueryObj.restriction));
if (!data.isTotal && data.rows[0] && data.columns[0]) {
augmentedRestriction.push([data.rows[0].hierarchyCaption, data.rows[0].caption, "="]);
augmentedRestriction.push([data.columns[0].hierarchyCaption, data.columns[0].caption, "="]);
var encodedUri=encodeURIComponent(`{"restriction":${JSON.stringify(augmentedRestriction)}, "projection":${JSON.stringify(this.origJsonQueryObj.projection)}}`);
}
var openModal=this.open;
var text;
switch (data.value) {
case 0: text="FAIL";
case 1: text="PASS";
case 2: text="SKIP";
}
if (data.isTotal || data.isTotalColumn || data.isTotalRow) {
cell.text=text
} else {
switch (data.value) {
case 0: {
// cell.text=`<a href='#/search?stringQuery=${encodedUri}', target='_blank', style='text-decoration: underline; color: white'>FAIL</a>`
cell.text=`<button class="btn btn-outline-primary" type="button" (click)="${this.open}">FAIL</button>`
};
break;
case 1: {
cell.text=`<a href='#/search?stringQuery=${encodedUri}', target='_blank', style='text-decoration: underline; color: white'>PASS</a>`
};
break;
case 2: {
cell.text=`<a href='#/search?stringQuery=${encodedUri}', target='_blank', style='text-decoration: underline; color: white'>SKIP</a>`
};
break;
}
}
}

onCellClick = (cell: WebDataRocks.CellBuilder) => {
console.log("onCellClick called");
const modalRef = this.modalService.open(DrilldownComponent);
modalRef.componentInstance.name = 'Drilldown';
}
open() {
console.log("open called");
const modalRef = this.modalService.open(DrilldownComponent);
modalRef.componentInstance.name = 'Drilldown';
}

Additionally this is how I’m attempting to listen for the (cellclick) event on the component containing wrb-pivot, but onClickCell() never gets called:

 <wbr-pivot *ngIf="!empty" #pivot1 [toolbar]="false"
[width]="'100%'"
[height]="500"
[customizeCell]="onCustomizeCell"
(ready)="onPivotReady($event)"
(reportcomplete)="onReportComplete()"
(reportchange)="onReportChange()"
(cellclick)="onCellClick($event)"
>
WebDataRocks will appear here
</wbr-pivot>

Thank you in advance,
Olga

4 answers

Actually now onCellClick() is getting called all of a sudden.  However I need it to accept a WebDataRocks.Cell input parameter as onCustomizeCell() does.  (Either that or to get the (click) event call in onCustomizeCell() as above working properly, which still does not call the open() function.)
Is it possible to suggest how to alter onCellClick() to accept a cellData parameter, or provide an example of doing so?

WebDataRocks Team WebDataRocks 7 days ago

Hello Olga,
Thank you for writing to us.
It’s nice to hear that you are getting on well with your case.
Passing WebDataRocks.Cell as input parameter for onCellClick handler is not supported.
As possible workaround, you can call getSelectedCell() API method from the handler method. That will return you a WebDataRocks.Cell. Here is the reference to docs: https://www.webdatarocks.com/doc/getselectedcell/.
Regards,
WebDataRocks Team

Olga 5 days ago

Hi,
Thanks for your response.  Actually now I’m finding the opposite, it’s a CellData and not a CellBuilder object that is emitted by the cellclick output event.
@Output() cellclick: EventEmitter<WebDataRocks.Cell> = new EventEmitter()
This is good in that I’m able to get the cellData, but bad in that I *also* need the CellBuilder object. Since getSelectedCell also returns a cellData object, there is no way to get the CellBuilder on cell click. 
So I am trying to modify my local webdatarocks code such that cellclick will emit a CellBuilder, since the user can then use getSelectedCell() for the data.
I made the following updates:
@Output() cellclick: EventEmitter<WebDataRocks.CellBuilder> = new EventEmitter();
and in ngOnInit:
cellclick: (cell: WebDataRocks.CellBuilder) => this.cellclick.next(cell),
 
But it still continues to emit only a CellData object.  I cannot find any more references to cellclick  in the webdatarocks code.  Would you be able to suggest what other local changes can be made to support this?
 
Thank you,
Olga

WebDataRocks Team WebDataRocks 20 hours ago

Hello Olga,
 
Thank you for the answer.
Actually, getting WebDataRocks.CellBuilder with cellclick event is not supported.
The component is designed to pass cell builder only for customizeCell function when rendering is performed.
 
Also, please note that the main logic of the component is located in the obfuscated code that is not Open Source and it’s modifications are prohibited (more details are here https://www.webdatarocks.com/doc/licensing-terms-copyright/).
 
So, we recommend adjusting your use case to work with the supported features.
 
Regards,
WebDataRocks Team

Please login or Register to Submit Answer