Expanding only one row at a time

[gdavalos]

Is there a way to make it so that expanding a row closes any other row expanded previously?

So far, we tried adding a column with a button that calls a function which has the expand/collapse logic but we couldn't access to the expanded property nor to the item data through the event's model so we can't handle the expanded state there.

Are we going the right way? Is there another better way or doing it? Or is it just not possible with the current version?

[Saulis]

You can try iterating through _expandedItems and calling collapseItem for each before expanding the currently clicked row.

[gdavalos]

Thanks, that worked just fine, then again, wasn't using "private" properties from outside the element discouraged by the Polymer team?

[Saulis]

@gdavalos yes that's right, private properties should be avoided because they might get changed or removed. In this case you can trust the author, _expandedItems isn't going anywhere, I'll probably make it public at some point.

[Saulis]

I'm thinking on adding events like expanding-item and collapsing-item which you can grab and call event.preventDefault() to cancel the default behavior and substitute with your own. How does it sound like to you?

[gdavalos]

Would you send the item as a detail or something? If so, then it might be useful for this use case (and maybe some others)

[Saulis]

Yes sure item would be included, the implementation would similar as I sketched out for selection in the branch item-selection-events