Perspective Table: Any way to get the new column widths after user makes adjustments?

Ignition
1

HI. I have a simple perspective table that displays the results of a named query.
I also have a script that sets a default width for each column based on the resulting column types. That all works fine. Sets the widths one time, after the first query.

But I also allow the user to adjust the column widths manually. I'd like to allow these new widths to be saved. Already write and retrieve the JSON for the 'columns' property to a database along with the username so each user can create their own view.

But how do I get the new widths after the user makes adjustments? The column's WIDTH property does not change when the width changes.

Ignition 8.1.30

2

The designer doesnt seem to like this very much, but it works on client (in browser atleast).

Tip: write on change, only read on startup (else you get an infinite loop)

Copy the markdown,
Take note of the domId of the table, and the propName on the first line of the code.
You'll want an onchange script on the view.custom.propName.

columnwidth.zip (24.2 KB)

markdown code 
	#make the propName the key to write too in the view.custom 
	propName = "cellHeader"
	code =  """<img style='display:none' src='/favicon.ico' onload=\"
		const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; 
		const callbackTable = (mutationList, observer) => {
			document.querySelectorAll('#"""+value+""" .ia_table__head__header__cell').forEach(e => {
				const header = e.getAttribute('data-column-id');
				const width = e.offsetWidth;				
				const prop = view.custom.read('"""+propName+"""');				
				view.custom.write('"""+propName+"""',{...prop,[header]:width});
			});	
		};						
		const observerTable = new MutationObserver(callbackTable); 
		const tables = document.querySelectorAll('#"""+value+"""');
		tables.forEach(table => observerTable.observe(table, { attributes: false, childList: true, subtree: true }));	
		document.querySelectorAll('#"""+value+""" .ia_table__head__header__cell').forEach(e => {
			const header = e.getAttribute('data-column-id');
			const width = e.offsetWidth;
			const prop = view.custom.read('"""+propName+"""');			
			view.custom.write('"""+propName+"""',{...prop,[header]:width});
		});	
				
	\"></img>""".replace("\n", "").replace("\t", "")
	return code
1 Like
3

Thanks! I am always impressed by you guys that can dive into the inner workings like that!! I was hoping that I was just overlooking a simple property, but I'll give this a go.

Basically, I'm just looking to get the last width settings at the time that the view closes, then reapply those settings the next time the view opens. Your code looks like it will work nicely for the read, then I'll update the columns property with the new widths and write it to the database.

1 Like