Question
· Jan 22, 2021

Zen Table pane: Can I update a row in the table pane?

I am able to display my query result in the table pane, but I want to update it based on user click but it doesnt work. Can this be done? Below is what I am doing but it doesnt change my value on clicking. Would appreciate some guidance on this

I have ondblclick = zenPage.SelectItem

ClientMethod selectItem(id, time) [ Language = javascript ]
{

    table this.getComponentById('tablename');
    var data table.selectedIndex;
    var rowval table.getRowData(data);
    var valuep new zenProxy();
           valuep.TXTFLAG rowval["TEXT"];
    zenPage.ToggleTextFlag(pP);

    var table this.getComponentById('tablename');
     table.executeQuery();
}

ClassMethod ToggleTextFlag(bData As %ZEN.proxyObject, act As %String) As %Boolean [ ZenMethod ]
{
 if bData.TXTFLAG = "Y"
{
     s bData.TXTFLAG = "N"
}
else
{
bData.TXTFLAG = "Y"
}

Set tSC = 0     

Quit tSC
}

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

Here's how I'd typically do something like that, going back to my example from one of your earlier questions and expanding a bit. The persistent class as a new %Boolean property named "Toggleable" (not a magical name - you can call it whatever you like), and the tablePane has <column> elements added. The query supplying data for the table has the ID and Toggleable columns added as well. The "Toggleable" column has OnDrawCell defined to provide custom HTML for the cells in the table; this references an ObjectScript method (which doesn't need to be, and in fact shouldn't be, a ZenMethod). That ObjectScript method renders HTML which calls a ZenMethod to actually do the update, using query results from the %query variable (which is a special thing that's available for use in OnDrawCell). No table refresh is needed, but if you refresh the page you'll see that the checkbox values have indeed been persisted.

Here's the Zen XData change:

<tablePane id="myTable" OnCreateResultSet="CreateResultSet" valueColumn="ID">
<parameter value="" />
<parameter value="" />
<parameter value="" />
<column colName="ID" hidden="true" />
<column colName="Name" />
<column colName="SomeDate" />
<column colName="Toggleable" OnDrawCell="DrawToggleCell" />
</tablePane>

And corresponding ObjectScript methods:

/// Note: this doesn't need to be a ZenMethod.
ClassMethod DrawToggleCell(pTable As %ZEN.Component.tablePane, pColName As %String, pSeed As %String) As %Status
{
    &html<<input type="checkbox" #($Case(%query("Toggleable"),1:"checked",:""))# onchange="zenPage.Toggle(#(..QuoteJS(%query("ID")))#,this.checked)" />>
    Quit $$$OK
}

ClassMethod Toggle(pID As %String, pValue As %Boolean) [ ZenMethod ]
{
    Set obj = ##class(DC.Demo.SampleData).%OpenId(pID,,.sc)
    $$$ThrowOnError(sc)
    Set obj.Toggleable = pValue
    $$$ThrowOnError(obj.%Save())
}

Here's the full sample:

Class DC.Demo.SampleData Extends (%Persistent, %Populate)
{

Property Name As %String;

Property SomeDate As %Date;

Property Toggleable As %Boolean;

}

Class DC.Demo.ZenPage Extends %ZEN.Component.page
{

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<fieldSet legend="Filter" layout="horizontal">
<text label="Name Starts With:" onchange="zen('myTable').setProperty('parameters',1,zenThis.getValue())" />
<dateText label="Start Date:" onchange="zen('myTable').setProperty('parameters',2,zenThis.getValue())" />
<dateText label="End Date:" onchange="zen('myTable').setProperty('parameters',3,zenThis.getValue())" />
</fieldSet>
<tablePane id="myTable" OnCreateResultSet="CreateResultSet" valueColumn="ID">
<parameter value="" />
<parameter value="" />
<parameter value="" />
<column colName="ID" hidden="true" />
<column colName="Name" />
<column colName="SomeDate" />
<column colName="Toggleable" OnDrawCell="DrawToggleCell" />
</tablePane>
<button onclick="zenPage.Populate()" caption="Repopulate Data" />
</page>
}

ClassMethod CreateResultSet(Output pSC As %Status, pInfo As %ZEN.Auxiliary.QueryInfo) As %SQL.Statement
{
    Set nameFilter = pInfo.parms(1)
    Set startDateFilter = pInfo.parms(2) // Will be in ODBC format
    Set endDateFilter = pInfo.parms(3) // Will be in ODBC format
    Set query = ##class(%SQL.Statement).%New()
    Set query.%SelectMode = 1
    Set sql = "select ID, Name, SomeDate, Toggleable from DC_Demo.SampleData"
    Set conditions = ""
    If (nameFilter '= "") {
        Set conditions = conditions_$ListBuild("Name %STARTSWITH ?")
        Set parameters($i(parameters)) = nameFilter
    }
    If (startDateFilter '= "") && (endDateFilter '= "") {
        // Yes, this could just be independent AND'ed conditions on start/end date,
        // which would reduce code complexity, but you wanted to see BETWEEN, so... :)
        Set conditions = conditions_$ListBuild("SomeDate BETWEEN ? and ?")
        Set parameters($i(parameters)) = startDateFilter
        Set parameters($i(parameters)) = endDateFilter
    } ElseIf (startDateFilter '= "") {
        Set conditions = conditions_$ListBuild("SomeDate >= ?")
        Set parameters($i(parameters)) = startDateFilter
    } ElseIf (endDateFilter '= "") {
        Set conditions = conditions_$ListBuild("SomeDate <= ?")
        Set parameters($i(parameters)) = endDateFilter
    }
    If (conditions '= "") {
        Set sql = sql _ " where "_$ListToString(conditions," and ")
    }
    Set pSC = query.%Prepare(sql)
    If $$$ISERR(pSC) {
        Quit $$$NULLOREF
    }
    
    //Important: Reduce to only the parameters specified/used.
    Kill pInfo.parms
    Merge pInfo.parms = parameters
    Quit query
}

ClassMethod Populate() [ ZenMethod ]
{
    Do ##class(DC.Demo.SampleData).%KillExtent()
    Do ##class(DC.Demo.SampleData).Populate(20,,,,0)
    &js<zen('myTable').executeQuery();>
}

/// Note: this doesn't need to be a ZenMethod.
ClassMethod DrawToggleCell(pTable As %ZEN.Component.tablePane, pColName As %String, pSeed As %String) As %Status
{
    &html<<input type="checkbox" #($Case(%query("Toggleable"),1:"checked",:""))# onchange="zenPage.Toggle(#(..QuoteJS(%query("ID")))#,this.checked)" />>
    Quit $$$OK
}

ClassMethod Toggle(pID As %String, pValue As %Boolean) [ ZenMethod ]
{
    Set obj = ##class(DC.Demo.SampleData).%OpenId(pID,,.sc)
    $$$ThrowOnError(sc)
    Set obj.Toggleable = pValue
    $$$ThrowOnError(obj.%Save())
}

}