asked on December 9, 2021
Hi there,
I am trying to highlight and scroll to a row of a report right after the report finished rendering. Figured out how to write both the highlight/scroll code, and they work, I just cannot trigger them upon the refresh of the pivot with new data.
I tried ALL the events I could think of...they all trigger too early, so there is basically no html element yet to scroll to...using CustomizeCell, the highlight works, in the end, when the cell gets into the visual space. It's of no use, though, if it is hidden below.
I am using Angular, by the way.
The report is refreshed by using this command:
this.pivot1.flexmonster.updateData(this.currentDataSource);
These are the events I tried, none of them worked. reportcomplete works like I want, but only when the report loaded the first time (setReport method). After that, on updateData, it's not firing anymore.
(ready)="onPivotReady($event)"
(reportcomplete)="onReportComplete()"
(reportchange)="onReportChange()"
(update) = "onReportUpdate()"
There must be a solution for this. I cannot imagine nobody thought about highlighting/scrolling after the report is rendered...that is common practice for most grid-like technologies.
Thank you in advance,
Serban
⋅ December 9, 2021
Actually, I take back what I said about setReport/updateData. I always call setReport to refresh.
That doesn't change my issue, though. I still cannot get the report rendering done event to fire. If there is such an event...
⋅ December 13, 2021
Hello, Serban,
Thank you for your question.
It seems the aftergriddraw event would work for your case. This event is fired once the grid is rendered. With this in mind, you could use the update or reportchange events to track changes. Once the event is fired, sign on the aftergriddraw event to apply additional logic when the grid is rerendered.
For example:
flexmonster.on("update", () => {
console.log("Update happened");
// Sign on the aftergriddraw event to know when the new grid is ready
flexmonster.on('aftergriddraw', doSomethingSpecial);
});
function doSomethingSpecial() {
// It is important to first sign off the event to prevent an infinte call loop
flexmonster.off('aftergriddraw');
console.log("Grid is drawn");
// Here you can provide additional logic
}
Also, we would like to mention that our team added two new API calls that allow scrolling to a specific row or column that may be of interest: scrollToRow() and scrollToColumn().
We hope this helps!
Kind regards,
Vera
⋅ December 13, 2021
Hi Vera,
As it turns out, re-registering the aftergriddraw event in the eventUpdate event is the only way to intercept the aftergriddraw for a setReport refresh, every single time, not just the first time as the angular event binding was doing. So thank you much for the suggestion...
One observation here is to pass the parameters for the event from one to another with a partial function reference, complemented by binding to the same global context as the first event received. Something like this:
onReportUpdate(idx: number): void {
this['pivot' + idx.toString()].flexmonster.off('reportupdate');
//trigger griddraw here, doesn't fire on setReport otherwise
this['pivot' + idx.toString()].flexmonster.on('aftergriddraw', function(){return this.onGridDraw({"smooth": false}, idx)}.bind(this));
if (this['onReportUpdateCallback']) {
this['onReportUpdateCallback']();
this['onReportUpdateCallback'] = undefined;
}
}
onGridDraw(e, idx: number) {
// if (e.smooth == false)
// console.log('After grid draw with row/column scroll!');
// else
// console.log('After grid draw with pixel scroll!');
// }
this['pivot' + idx.toString()].flexmonster.off('aftergriddraw');
if (this['onGridDrawCallback']) {
this['onGridDrawCallback']();
this['onGridDrawCallback'] = undefined;
}
}
⋅ December 13, 2021
Now I have a different issue...I need to highlight and scroll to a row that contains a certain value for the column with the unique identifier of the row. That means that I do not know which row number to scroll to ahead of time. When trying to find out which row number I need to scroll to, the only way that I know of is to intercept the column values in the replacement customizeCell function that I wrote, and persist that to be able to highlight and scroll. The problem with that approach is that the specific row of cells I am interested in is only rendered through customizeCell when the cell area is close to entering the visual space of the grid (lazy loading). I think you get what I am saying at this point. Do we have a way to intercept the row number that contains a certain column value BEFORE the lazy customizeCell event occurs? Something during the "Analyze Data" phase, maybe...
⋅ December 20, 2021
Hello, Serban,
Thank you for giving us some time.
Currently, it seems we don't have a straightforward solution for scrolling to a specific row, the id of which is not known in advance.
As we understand, in your use case, you are trying to draw the user's attention to specific data by scrolling it into view and highlighting it. For such cases, as an alternative solution, our team suggests the following workarounds:
We hope this helps.
Kind regards,
Vera