Expande/Collapse Panel Card Programatically?

Kinetic ERP
1

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

2

“Programmatically” is a loose term in App Studio. :rofl:

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.

1 Like
3

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

image
image1920×937 51.8 KB

image
image1920×937 32.4 KB

image
image1920×937 32.4 KB

ExpandPanel

4 Likes
4

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

5

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

6

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.

image
image1433×755 54.4 KB

:thinking:

7

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

8

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.

image
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]