New post
Question
· Nov 22, 2016

How do you ensure synchronisation between two %ZEN.Component.tablePane objects?

#Caché #Frontend #ZEN

TablePane1 is populated when a %ZEN.Component.button on a form is clicked from a JavaScript onclick method. 

 <button caption="Search" onclick="zenPage.onSubmit();"

TablePane1 also has a JavaScript onselectrow method  zenPage.onSelectRow() that gets the currently selected RowID. 

 onselectrow="zenPage.onSelectRow()"

This JavaScript method gets the RowID and feeds it into ClassMethod GetAuditLogs(ByRef pRowId) [ ZenMethod ] to get the audit events for that record. 

ClientMethod onSelectRow() [ Language = javascript ]
{
 	var table=zenPage.getComponentById('table1');
	var dataRow=table.getRowData(table.selectedIndex);
	var rowID = zenPage.GetSelectedRowId(dataRow.Col1,dataRow.Col2,dataRow.Col3);
	if (rowID)
	{
		zenPage.GetAuditLogs(rowID);
	}
}

The audit events are stored in a global and sorted by $H date/time value. This global is mapped to a %Persistent class using a SQLStorage strategy and is re-created every time a new row is selected in TablePane1. The following method is called to populate the contents of TablePane 2

ClientMethod populateAuditEvents() [ Language = javascript ]
{
                var table=zenPage.getComponentById('auditEventsTable');
                table.setHidden(false);
                table.executeQuery();
}

The problem is that although the globals are being created correctly when a row is selected, there are times when the selected row in TablePane1 is not refreshing the contents of TablePane2. Below is a list of the attributes for TablePane2 (auditEventsTable).

<tablePane
    id="auditEventsTable"
    maxRows="1000"
    width="1000px" 
    showRowNumbers="false"
    showZebra="true"
    useSnapshot="false"
    extraColumnWidth="5%"
    rowSelect="false"
    valueColumn="ID"
    initialExecute="false"
    hidden="true"
    
    sql="SELECT EventDescription, StaffName, Date, Time FROM AuditResults"
    >
    <column header="Description" colName="EventDescription" width="40%"/>
    <column header="Staff" colName="Staff" width="20%"/> 
    <column header="Date" colName="Date" width="9%"/>
    <column header="Time" colName="Time" width="9%"/>
</tablePane>

 

Does anyone have any idea what could be the problem?

Discussion (3)0
Log in or sign up to continue
Stephen Wilson · Nov 23, 2016

Edit: Ok, so I THOUGHT I answered my own question. Read up on asynchronous and synchronous modes via the online documentation.  Here's my "solution".

ClientMethod onSelectRow() [ Language = javascript ]
{
	// Set mode
	var zenSynchronousMode='true'

	// Do some synchronous stuff

	// Turn off mode when done
	zenSynchronousMode='false'
}

It hasn't worked :(

0 0
Stephen Wilson · Nov 25, 2016

Ok, I *think* I have it now.

ClientMethod onSelectRow() [ Language = javascript ]
{
	var resultsPane=zenPage.getComponentById('resultsPaneId');
	var isHidden=resultsPane.getHidden();

	if (!isHidden)
	{
		var table=zenPage.getComponentById('workBioTable');
		var dataRow=table.getRowData(table.selectedIndex);


	if (dataRow)
	{
		var rowID = zenPage.GetSelectedRowId(dataRow.RequestDate,dataRow.Worksheet,dataRow.SpecId);

		if (rowID)
		{
			this.populatePIDForm(dataRow);
			var waittoend = zenPage.GetAuditLogs(rowID);
			this.populateAuditEvents();
		}
	}


} // end-if
}

Note the variable 'waittoend' and the zenPage.GetAuditLogs(RowId) method. This process builds the global that the secondary tablePane is built from. Without the return value, it is possible for the table to refresh before the global is built for the newly selected row.

Testing this has been difficult because in the most cases, the table was displayed correctly but several dozen clicks later you gasp, "Did I just see that!?" when you notice that on this one occasion it did not update correctly.

0 0