Mike Gonzalez Mike Gonzalez - 19 days ago 4
Javascript Question

Setting a column value in an enhanced datagrid

If I have an xpage with a

datagrid
on it using a Rest service. In the
datagrid
are two records stored as individual records in
Notes
. A user edits the xpage and goes to edit one of the columns in the data grid for a row.

There is column A, column B and a column C. Column C was calculated previously using a script library "ABC" with the two values on Column A and Column B, which create the background Notes document and then displayed on the datagrid.

As an example,
column A = 12
,
column B = 24
, column C was calculated coming up with 397. Column A has to change and recalculate using the script library ABC. In the
Save Changes
button, give me example code showing how to select the changed row, set two variables with Column A and Column B, call the script library "ABC" and either update the background Notes document and redisplay the datagrid or update the datagrid and have it update the background Notes document. Column A is the only editable column.

Here is the code

var rsStore = restServiceObj;
var items = gridObj.selection.getSelected();

dojo.forEach(items, function(selectedItem) {
if(selectedItem != null) {
viewScope.ColA = rsEntry.getColumnValue("A");
viewScope.ColB = rsEntry.getColumnValue("B");
var ans = ABC();
}
});

Answer

Use a dataTable to list all documents.

Calculate in property value all NotesDocuments you want to list.

Add column A as editable field and B and C as read only fields to the dataTable.

Add an onchange event to column A's editable field:

  • calculate C based on A and B with function ABC(A, B)
  • save the document
  • refresh the table

This way C gets calculated automatically whenever user changes value A.

<xp:panel id="panelTable">
    <xp:dataTable id="dataTable1"
        rows="100"
        var="doc">
        <xp:this.value><![CDATA[#{javascript:
            var documents = [];
            var col = view1.getAllEntriesByKey("yourKey", true);
            var entry = col.getFirstEntry();
            while (entry != null) {
                documents.push(entry.getDocument());
                entry = col.getNextEntry(entry);
            }
            return documents;
        }]]></xp:this.value>
        <xp:column id="column1">
            <xp:this.facets>
                <xp:span xp:key="header">A</xp:span>
            </xp:this.facets>
            <xp:inputText id="inputText1" value="#{doc.A}">
                <xp:eventHandler
                    event="onchange"
                    submit="true"
                    refreshMode="partial"
                    refreshId="panelTable">
                    <xp:this.action><![CDATA[#{javascript:
                        var A = doc.getItemValue("A").get(0);
                        var B = doc.getItemValue("B").get(0);
                        doc.replaceItemValue("C", ABC(A, B));
                        doc.save();
                        view1.refresh();
                    }]]></xp:this.action>
                </xp:eventHandler>
            </xp:inputText>
        </xp:column>
        <xp:column id="column2">
            <xp:this.facets>
                <xp:span xp:key="header">B</xp:span>
            </xp:this.facets>
            <xp:text id="computedField3" value="#{doc.B}" />
        </xp:column>
        <xp:column id="column3">
            <xp:this.facets>
                <xp:span xp:key="header">C</xp:span>
            </xp:this.facets>
            <xp:text id="computedField2" value="#{doc.C}" />
        </xp:column>
    </xp:dataTable>
</xp:panel>