Synchronize multiple tables scroll position

Ignition
,
1

Need a little help. I have a table I'm trying to display in a Vision window. The data is coming from a named query, the table has more rows that would fit well on a screen, I would like to show all rows. I was going to break the query into two tables. I would like to synchronize the scrolling of both tables, is that possible? I asked ChatGPT and this is what it came up with:
An event script on one of the tables

if event.propertyName == 'verticalScrollPosition':
# Get the new scroll position of Table 1
newScrollPos = event.newValue

# Find Table 2
table2 = event.source.parent.getComponent('Table 2')

# Update Table 2's scroll position to match Table 1
table2.setVerticalScrollPosition(newScrollPos)

':
# Get the new scroll position of Table 1
newScrollPos = event.newValue

# Find Table 2
table2 = event.source.parent.getComponent('Table 2')

# Update Table 2's scroll position to match Table 1
table2.setVerticalScrollPosition(newScrollPos)

Look good to me however, it did not work. I did I print out the property event in the script (at the top of course), yet it never said the 'verticalScrollPosition' event when I scroll the scrollbar and of course, nothing happens. Needless to say, the synchronization of the scrolling bars did not work.

I look forward to your ideas and comments,
David

2

This will get you started. You should add a ChangeListener to sync the scrollbar positions.

In the initialize extension function on the first table add this script

	from javax.swing.event import ChangeListener

	tableMain = self.parent.getComponent('Power Table')
	table2 = self.parent.getComponent('Power Table 1')
	
	class myListener(ChangeListener):
		def stateChanged(self, e):
			scrollBarMain = tableMain.getVerticalScrollBar()
			scrollBar2 = table2.getVerticalScrollBar()
			scrollBar2.setValue(scrollBarMain.getValue())
			
	#to remove ChangeListener
	listeners = tableMain.viewport.getChangeListeners()
	for listener in listeners:
		tableMain.viewport.removeChangeListener(listener)
		
	#to add ChangeListener
	tableMain.viewport.addChangeListener(myListener())

You may want to consider this comment from a similar thread.

3

WOW, thank you so much for responding. You mentioned ' In the initialize extension function on the first table add this script', there is no initialize extension function from within the table's scripting.

image
image204×229 8.46 KB

4

The power table component has the initialize function, which I tend to use for its configuration flexibility over the regular table component. In a regular table you would move this script to the propertyChange event handler with a filter clause since you don't want to run the script on every property change.

if event.propertyName == 'componentRunning':
	from javax.swing.event import ChangeListener
	
	# put your initialization code here
	tableMain = event.source.parent.getComponent('Table')
	table2 = event.source.parent.getComponent('Table 1')
	
	class myListener(ChangeListener):
		def stateChanged(self, e):
			scrollBarMain = tableMain.getVerticalScrollBar()
			scrollBar2 = table2.getVerticalScrollBar()
			scrollBar2.setValue(scrollBarMain.getValue())
			
	#to remove ChangeListener
	listeners = tableMain.viewport.getChangeListeners()
	for listener in listeners:
		tableMain.viewport.removeChangeListener(listener)
		
	#to add ChangeListener
	tableMain.viewport.addChangeListener(myListener())

This will only work in the designer if you enable preview mode before opening the window with the associated components.

1 Like