Manipulating tablePane columns programmatically
Hi-
Does anyone have an example of manipulating Zen tablePane columns programmatically?
Specifically, clearing out the columns and adding a new set of columns.
It would be helpful if you had both a server side and client side example.
Thanks
The general approach is:
Sample code (SAMPLES namespace):
Calling:
Toggles visibility of the ID column.
Hi,
Rather than programmatically modifying the source code and recompiling the class - if your page already defines, by default, the full set of columns available, you can show and hide each and every one of them programmatically by manipulating the table columns collection which is already part of the DOM:
Save this class in the SAMPLES namespace. In this example, the Buttons hide some columns and un-hide others on client and server:
Class sp14.tableTest Extends %ZEN.Component.page
{
/// Class name of application this page belongs to.
Parameter APPLICATION;
/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
</style>
}
/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<tablePane id="tblPerson" sql="Select ID,Age,DOB,Name,Home_City,Home_State from Sample.Person" >
<column id="c0" colName="ID" hidden="false"/>
<column id="c1" colName="Age" hidden="false"/>
<column id="c2" colName="DOB" hidden="false"/>
<column id="c3" colName="Name" hidden="true"/>
<column id="c4" colName="Home_City" hidden="true"/>
<column id="c5" colName="Home_State" hidden="true"/>
</tablePane>
<hgroup width="350" align="left">
<button id="clearColumns" caption="Clear Columns (client)" onclick="zenPage.clearTableColumns()" />
<spacer width="10px"/>
<button id="basicColumns" caption="Add other Columns (client)" onclick="zenPage.addBasicTableColumns()"/>
</hgroup>
<spacer height="5px"/>
<hgroup width="350" align="left">
<button id="clearColumnsSS" caption="Clear Columns (Server)" onclick="zenPage.clearTableColumnsSS()" />
<spacer width="10px"/>
<button id="basicColumnsSS" caption="Add other Columns (Server)" onclick="zenPage.addBasicTableColumnsSS()"/>
</hgroup>
</page>
}
/// clearTableColumns
ClientMethod clearTableColumns() [ Language = javascript ]
{
tbl=zen("tblPerson")
for (i = 0; i < tbl.columns.length; i++) {
tbl.columns[i].setProperty("hidden",true)
}
tbl.executeQuery()
return
}
ClientMethod addBasicTableColumns() [ Language = javascript ]
{
// Add ID, Name, and City columns
tbl=zen("tblPerson")
for (i = 0; i < tbl.columns.length; i++) {
if ((tbl.columns[i].getProperty("colName")=="Name") ||
(tbl.columns[i].getProperty("colName")=="Home_City") ||
(tbl.columns[i].getProperty("colName")=="Home_State")) {
tbl.columns[i].setProperty("hidden",false)
}
}
tbl.executeQuery()
return
}
Method clearTableColumnsSS() [ ZenMethod ]
{
set tbl=%page.%GetComponentById("tblPerson")
for i=1:1:tbl.columns.Count() {
set column=tbl.columns.GetAt(i)
set column.hidden=1
}
set tbl.refreshRequired=1
Quit
}
Method addBasicTableColumnsSS() [ ZenMethod ]
{
set tbl=%page.%GetComponentById("tblPerson")
for i=1:1:tbl.columns.Count() {
set column=tbl.columns.GetAt(i)
if "Name,Home_City,Home_State"[column.colName {
set column.hidden=0
}
}
set tbl.refreshRequired=1
Quit
}
}
Even if your default <table> definition did not hard-code the full set of columns in the XDATA block, which you later manipulate, you can also programmatically add the table and column objects of the table, something like this - from server side instance method -
- Steve