How to save changes in DataGrid

Here's a simple example that'll run in the Samples namespace. It demonstrates saving all the data at the same time and saving it one row at a time after each cell is edited.

Class App.Sample.DataGridPage Extends %ZEN.Component.page
{

/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
#dataGrid {
    width: 100%;
    height: 500px;
}
</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="dataGrid save sample">
<jsonSQLProvider id="json" OnSubmitContent="SubmitContent"
  targetClass="%ZEN.proxyObject" sql="select ID,Name,DOB,SSN from sample.person order by name" />
 <dataGrid pageSize="20" id="dataGrid" pagingMode="client" controllerId="json" sortMode="client"
  selectMode="cells" onchangecell="return zenPage.fireChangeCell(value);" onchange="zenPage.gridChanged();">
 <columnDescriptor caption="ID" type="string" readOnly="false"/>
 <columnDescriptor caption="Name" type="string" readOnly="false"/>
 <columnDescriptor caption="DOB" type="string" readOnly="false"/>
 <columnDescriptor caption="SSN" type="string" readOnly="false"/>
 </dataGrid>
 <hgroup labelPosition="left" cellAlign="even">
 <radioSet id="modeRadio" valueList="edit,manual" displayList="After Each Edit,Manually"
  label="Save Data: " value="edit" />
 <button onclick="zen('json').submitContent()" caption="Save Everything" />
 </hgroup>
</page>
}

ClientMethod fireChangeCell(value) [ Language = javascript ]
{
    // Capture the number of the last row that was changed.
    zenPage._lastChangedRow = zen('dataGrid').getProperty('currRow');
    return value;
}

ClientMethod gridChanged() [ Language = javascript ]
{
    if (zen('modeRadio').getValue() == 'edit') {
        zen('json').submitContent('saveRow:'+zenPage._lastChangedRow);
    }
}

Method SubmitContent(pCommand As %String,
pProvider As %ZEN.Auxiliary.jsonProvider,
pSubmitObject As %ZEN.proxyObject,
ByRef pResponseObject As %RegisteredObject) As %Status
{
    Set tSC = $$$OK
    Try {
        TSTART
        If (pCommand = "") {
            //Save everything.
            For {
                Set tProxy = pSubmitObject.children.GetNext(.tKey)
                Quit:tKey=""
                $$$ThrowOnError(..SavePersonProxy(tProxy))
            }
        } Else {
            Set tCommandInfo = $ListFromString(pCommand,":")
            If ($lg(tCommandInfo,1) = "saveRow") {
                //Save only the specified row (faster)
                Set tData = pSubmitObject.children.GetAt($lg(tCommandInfo,2))
                If $IsObject(tData) {
                    Set tObj = ##class(Sample.Person).%OpenId(tData.ID,,.tSC)
                    $$$ThrowOnError(tSC)
                    Set tObj.Name = tData.Name
                    Set tObj.SSN = tData.SSN
                    Set tObj.DOB = $zdh(tData.DOB)
                    $$$ThrowOnError(tObj.%Save())
                } Else {
                    $$$ThrowStatus($$$ERROR($$$GeneralError,"An error occurred saving row "_$lg(tCommandInfo,2)))
                }
            }
        }
        TCOMMIT
    } Catch anyException {
        TROLLBACK
        Set tSC = anyException.AsStatus()
    }
    Quit tSC
}

Method SavePersonProxy(pProxy As %ZEN.proxyObject) As %Status
{
    Set tObj = ##class(Sample.Person).%OpenId(pProxy.ID,,.tSC)
    Quit:$$$ISERR(tSC) tSC
    
    Set tObj.Name = pProxy.Name
    Set tObj.SSN = pProxy.SSN
    Set tObj.DOB = $zdh(pProxy.DOB)
    Quit tObj.%Save()
}

}