Table with expandable rows, content of expanded rows to be prepared on expansion only

Table with expandable rows, content of expanded rows to be prepared on expansion only

  

Hi everyone, 


I am currently trying to design a table with expandable rows being prepared on expansion only. What I mean here is I would like the content of expandable rows to be empty (not only hidden) for collapsed rows, and accurate for expanded ones.

The reason why I need this behaviour is that the content of each expandable row is heavy. Thus, I do not want to fetch the database for information that will not be displayed.

Is there a simple way to do this?


Thanks a lot!

Solution

So, I'm assuming you are implementing that using a "list records" with "sectionExpandable" widgets. 

I would say the best option is to re-implement the widget "sectionExpandable" as a server side widget. I.e. copy the css of the native widget and re-implement the widget with the "IsExpanded" variable and an if wrapping the placeholder that will ensure the content is not sent on the viewstate if the section is not expanded.


I tackled that use case before and it was the approach I followed; it worked for me and didn't take me long to re-implement the widget as a server side widget; but if you have any questions, feel free to ask.

Solution

Thanks for the quick reply!


I am currently implementing it using no silk ui widgets at all, but my expansion animation (using jquery slideToggle()) is laggy. That's why I would like to give a try using sectionExpandable widget.


I am not sure I understand what you mean by a server side widget. Could you please provide me with more details on how to implement it as a server side widget?


Thanks!

> "I am currently implementing it using no silk ui widgets at all, but my expansion animation (using jquery slideToggle()) is laggy. That's why I would like to give a try using sectionExpandable widget."

For simple animations I recommend you use native stuff. The less javascript you have the more maintainable is your code. You can select an animation on the ajax refresh widget.

> "I am not sure I understand what you mean by a server side widget. Could you please provide me with more details on how to implement it as a server side widget?"

What I mean is that the sectionExpandable widget works on the client machine, i.e. it's javascript doing the magic. The consequence is that the server does not know what is or is not visible and cannot populate the viewstate (the info that is shared between client and server) accordingly.

By server side, I mean it should be Outsystems and the server, not javascript, doing the magic. This way, the server knows what is or is not open.

I attached a simple implementation of the implementation I described on my previous answer; you will now need to work the CSS and tweak for any particularity you find.

Unfortunately, the animation is still a bit laggy using the ajax refresh animation, but your solution does what I was looking for in a very simple manner.

Thank you