How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?
When using plain JavaScipt, we write the rendering logic inside the 'paint' function and it gets executed and the view gets re-rendered, whenever we resize the element, or when the data changes on applying filters.
But when using AngularJS controller, re-rendering is not happening in both the cases. I've to refresh the browser to see the changes take effect.
Yes that's a way to do it: the Validated event is actually not an angular event, but one that Qlik Sense defines. You probably also could use the paint method.
A bit late maybe, but we have not the same problem. I want to know when grid cell size has been changed so we could recalculate some stuff ( scrollbars / virtual scroll). At this point we use Angular 2+ to create extensions so the Angular1 scope is not very usefull.
In short ( this is Typescript nothing special for JS just remove Types ) to get notified something has been changed, just use the MutationObserver to get notified some styles changes ( or other dom properties ).
// get parent cell which describes width and height of the cell
const cell: HTMLElement = $element.closest('.cell').get(0);
const obs = new MutationObserver((mutations) => {
// at this point we get notified if grid cell style has been changed
// this could be width, height, left or top
// this only happens if we modify the grid cell into editor
console.log(mutations);
});
/** tell the mutation observer to watch the cell for style changes */
obs.observe(cell, {
attributes: true,
attributeFilter: ["style"]
});
/** @todo disconnect on destroy to avoid memory leaks */
