Expande/Collapse Panel Card Programatically?

jdtrent · May 13, 2022, 8:27pm

Hey,

Working in a UD02 screen, I’d like to collapse and disable a panel card based on the value of a field in UD02.

I thought about trying to bind the panel card to a dataview column and use row rules to disable the column.

Before I launch off on that, does anyone know a shortcut?

Thanks,

Joe

hmwillett · May 13, 2022, 8:29pm

“Programmatically” is a loose term in App Studio.

Buuuut, if I recall, you can use the property-set widget, enter the panel ID or whatever it needs, then set the “expanded” property to true.

hmwillett · May 13, 2022, 8:43pm

I did my example on a button click, but you can use whatever event you need.

ExpandPanel

jdtrent · May 13, 2022, 9:04pm

Thanks, Hannah. The row rule disables the panel card okay, but doesn’t collapse it.

hmwillett · May 13, 2022, 10:54pm

Row Rules isn’t appropriate for that.
You should be using an event.

fama_0 · June 19, 2023, 5:45pm

Am I going crazy or is this only working for normal Panel cards currently (2023.1.4)? Trying to expand a grid panel and the property-set is setting the flag to true, but not actually expanding. Tried with a normal panel card and that expanded without issue. Tried setting expanded to false when it was open and same thing where it sets it, but doesn’t do anything.

hmwillett · June 20, 2023, 2:42pm

Yeah–I can’t get it seem to work on a panel card grid either.

fvodden · September 15, 2023, 2:49pm

So, I was trying to do this as hack to fix virtual scrolling issues. My issue was that if I loaded data, then scrolled down a ways, then changed the parameters and reloaded the dataview, the scroll doesn’t reset. If the new data has fewer rows, it can look like no data was loaded. The user must scroll around a bit to realize that data was actually loaded.

I found that collapsing the grid panel and expanding it forced the scroll to reset, so I tried to do this programmatically with property-set and the expanded property. As described, this doesn’t work.

For my scrolling issue specifically, my super hacky way to a better UX is by using property-set to execute some simple Javascript to scroll the table div to the top. It seems to work great! This could probably be made more robust by searching the grid containers children for a div CSS overflow set.

The actual property value:

"#_document.querySelector('#Grid-OpPerformance .k-grid-content.k-virtual-content').scrollTop = 0_#"

Swap #Grid-OpPerformance for the ID of your grid.

[edit]Have you had any luck with virtual scrolling issues in your organization?[/edit]