GridStack item height and width in pixel

Question

I have elements within each of my GridStack item (think of graphs) that require re-rendering on when a gridstack item (cell) size changes. I want to use change event on GridStack to identify the changed items and fire a custom event with the size and width of each item which is listened by the internal elements.

Now the problem is that change event reports new height and width in its format but I need the actual new pixels to trigger the proper event. Using jquery on the item itself does not work because it won't report the after-snap sizes.

1> How can I convert the GridStack height and width to pixels?

2> Is there a better way for what I am trying to do. I mean a better way to notify the elements within each grid item about the size item size in pixel?

Answer 1

You can convert the height and width fairly easily. grid.cellWidth() * the width of the element will give you the width you want. grid.cellHeight() * element height + grid.opts.verticalMargin * element height - grid.opts.verticalMargin will give you the height you want. Give that a go, see if it works!