The Setup
Ignition v8.1.27 (b2023042509)
Browsers tested: Firefox, Edge, Chrome
URL Params
I've created a table page autoplayer using a binding to a slider component, and I'm driving the number of rows on each page from a view parameter, which I specify as a url argument. This is a main view with no docked views.
Bindings
I have 3 bindings on the table.props.pager properties.
options is based on the initialOption binding:
initialOption is set to the url param rowsPerPage:
activePage is bound to the slider to control the page number:
The Problem
The issue is that when I first load the page, the pagination settings don't apply the way I'd expect them to. All the rows are rendering on the same page, creating a scrollbar I don't want. The pagination is just broken, as if the pager is disabled.
Refreshing the screen fixes this issue, and I get the right number of rows per page and the slider is able to drive the pagination automatically.
The Questions
I'd like to understand the update cycle for bindings like these to make this behavior make more sense to me.
- Why does this issue happen in the first place?
- Why does refreshing the tab fix this issue?
- Is this a bug?
- What can I do to avoid this issue and ensure the page loads the same every time?
I see the same thing with the pager not respecting bindings like this, super annoying for views that can be on different screen sizes and you don't want scroll bars.
Any update on this one? has anyone been able to parameterize the Pager configuration? (initial option, total pages etc.)
I haven't worked on that project in awhile, but I think I had to get creative to solve that problem. I don't remember what my solution was then (sorry!), but I can share some similar wisdom I've learned since then.
The fundamental problem I was trying to solve was how to display paginated data in a grid or grid-like format. In a different project, I solved this issue by ignoring the table component altogether and using nested flex repeaters instead. This lets me control what data is being displayed at any given time, adjust the number of rows and/or columns to display based on data I have to populate it with (and the size of the screen I'm working with). It's a more customizable option, but it takes more work too.
The way I use tables now is for viewing a list with intention of scrolling. In hindsight, I think I forced the table option on this project when I should have used a different method. I don't think the table component was designed to be used like this, and I don't think we should continue to try using it like this, nice as the component is.
Hi @Brandon_Peterson,
The value of initialOption not updating during runtime has been reported as a bug and we've filed a ticket internally to our Development team.
As a workaround, you can set the props.pager.initialOption binding to "Persistent" which will load the value saved in Designer.
More details on Persistent properties can be found here: Version: 8.1 - Persistent Properties
1 Like
My issue is I am trying to limit the selection to only 10 per page so they have to select the page instead, and it works in the designer but not in the perspective browser page. Everything is set to Persistent.
