Possible bug in DataList delegates concering layout and reflows.

Today I ran into a layout issue in enyo 2.4.0 of which I'm not sure if it is a bug, or if it's a behaviour specific to the old DataList solved in newer versions.

My case is as follows. I've got a DataGridList with a custom delegate to create fluid grids of items. My custom delegate extends the VerticalGridDelegate to calculate column count and column width for a grid based on configurable min and max width of the grid's tiles. This means that depending on the size of the browser window, grid tiles can be larger or smaller.

The size of the tiles is set in the VerticalGridDelegate.layout method by applying some styles. If the delegate is laying out the grid in reponse to a resize event, the tile will reflow some time after the width of the tile has been updated. However, during the initial rendering, the tile is reflowed before the VerticalGridDelegate.layout method calculates it's size. After the new size is applied using some css, the tile does not reflow. For kinds that require a reflow to properly respond to their new dimensions, this is a bad thing as their internal layout won't be updated.

Currently I'm working around this problem by setting a boolean resizing flag on the delegate at the beginning of the VerticalGridDelegate.didResize method and set the flag back to false after the list has refreshed. This way, I can trigger a reflow on the tile if needed.

Is this an issue specific to my application or something that could affect DataLists in general? As always, if it's a bug, i'll make a patch.


  • I believe that we recently addressed quite a number of issues with the way data list components handled sizing and reflowing. Have you checked the master version of Enyo to see how it deals with your scenario?
  • Nope, I haven't. If it becomes an issue down the road I'll get back to it, if not I'll assume for now that it's probably been fixed.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!