Question
· Jan 18, 2017

ZEN tablePane always selects the bottom row. Why?

I have a tablePane that always displays with the bottom row selected. The SQL is executed when the submit/search button is clicked.  See attached.

Does anyone know how to enable row selection but prevent the bottom row being selected after the button onClick event?

<tablePane
  id="workBioTable"
  maxRows="1000" 
  pageSize="6"
  width="1000px" 
  showRowNumbers="false"
  showZebra="true"
  useSnapshot="true"
  extraColumnWidth="5%"
  initialExecute="false"
  sql="SELECT workbio.RequestDate, workbio.SpecId, workbio.Worksheet, %SQLUPPER(wsfbio.ProfileDescription) As ProfileDescription, workbio.NhsNo, workbio.HospNo, workbio.AENUM, workbio.Surname, workbio.Forename, workbio.Sex, workbio.Dob, workbio.BloodGroup, workbio.Site from LabsApp_Data.WorkBio As workbio, LabsApp_Data.WsfBio As wsfbio where workbio.RequestDate &gt;= ? and workbio.RequestDate &lt;= ? and workbio.Worksheet = wsfbio.Profile order by workbio.RequestDate ASC"
  onselectrow="zenPage.onSelectRow(which);"    
  valueColumn="ID">

  <parameter id="p1"/>
  <parameter id="p2"/>
  <column colName="ID" hidden="true" width="5%"/> 
  <column header="Request Date" width="20%" colName="RequestDate"/>
  <column header="Lab Number" width="20%" colName="SpecId"/> 
  <column header="Profile" width="9%" colName="Worksheet" hidden="true"/>
  <column header="Profile Description" width="30%" colName="ProfileDescription" />
  <column header="Site" width="9%" colName="Site"/>
  <column header="Record Type" width="20%" linkCaption="Current"/>
 </tablePane>

Related JavaScript

ClientMethod onSubmit() [ Language = javascript ]
{
  var auditForm=zenPage.getComponentById('auditForm');
  var valid this.IsSearchFormValid();

  if (valid==true)
  {
    var resultsPane=zenPage.getComponentById('resultsPaneId');
    this.getSearchQueryParams();
    this.executeQueryForTable1();
    resultsPane.setHidden(false);
    auditForm.setHidden(true);
  }
return true;
}


ClientMethod getSearchQueryParams() [ Language = javascript ]
{
// Get values from component ID
var startDateLabel=zenPage.getComponentById('startDateId');
var startDate=startDateLabel.formatValue(startDateLabel.getValue());
var endDateLabel=zenPage.getComponentById('endDateId');
var endDate=endDateLabel.formatValue(endDateLabel.getValue());

// Add the start date as a parameter
var table=zenPage.getComponentById('workBioTable');
var param1=zenPage.getComponentById("p1");
var param2=zenPage.getComponentById("p2");

param1.value=startDate;
param2.value=endDate;
}

ClientMethod executeQueryForTable1() [ Language = javascript ]
{
var table=zenPage.getComponentById('workBioTable');
table.executeQuery();
table.refreshContents(true);
}

UPDATE:

Working stripped down example attached. Some minor CSS omissions so styling will be different to earlier screenshot. To use the example, you will need to import the .xml containing the Cache classes into your SAMPLES namespace and import the ^WORK and ^WSF globals using the .GOF file and the System Management Portal. To run the example, simply press F5 on the LabsApp.AuditTrail class within Cache Studio.  The important thing to note is that the tablePane always has the bottom row selected.

Here is the version of Cache I am using.

$ZV : Cache for Windows (x86-32) 2013.1.6 (Build 950_1) Fri Jun 6 2014 19:03:11 EDT

Discussion (5)1
Log in or sign up to continue

Thank you Stephen, that helps a lot.

You have valueColumn defined: valueColumn="ID"
"Each time the table is refreshed, in each row Zen tests this logical value against the actual value that appears in the valueColumn in that row. Zen selects any row(s) that contain value in valueColumn"
http://docs.intersystems.com/cache20162/csp/docbook/DocBook.UI.Page.cls?...

However no ID column in query. So value of every row is empty string, that matches value of table for every row, so last row is hightlighted.

You need either remove valueColumn="ID" or add ID column to query.

Regards,
Alexander.