XPages Dojo Grid editable cell does not save value

Question

I have a REST Service working with a Dojo Grid that has editable columns. I can double-click in the cell and change the value, however, when I attempt to save the changes -- using the REST Service save() method in a button -- the changes do not save.

The only way I can get this value to save is to call the revert() method on the REST service first -- clicking the REST Service revert() method in a button -- then make changes to whatever editable cell I need to and click the Save button.

Here is the code:

<xe:restService id="rsVictims" pathInfo="gridDataVictims">
        <xe:this.service>
            <xe:viewItemFileService defaultColumns="true"
                viewName="InvoiceMPRVictims" contentType="application/json">
                <xe:this.keys><![CDATA[#{javascript:viewScope.get("mprKeysValue");}]]></xe:this.keys>
                <xe:this.databaseName><![CDATA[#{javascript:applicationScope.get("appConfig").keywords.appDataStore.join("!!")}]]></xe:this.databaseName>
            </xe:viewItemFileService>
        </xe:this.service>
    </xe:restService>

<xp:button value="Save Changes" id="button1">
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[// Save the changes...
rsVictims.save();]]></xp:this.script>
                </xp:eventHandler>
            </xp:button>
            <xp:button value="Cancel Changes" id="button2">
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[rsVictims.revert();]]></xp:this.script>
                </xp:eventHandler>
            </xp:button>
<xe:djxDataGrid id="djxDataGrid1" storeComponentId="rsVictims"
            autoHeight="90">

            <xe:djxDataGridColumn id="djxDataGridColumn1"
                label="Target" width="35px" field="victimTarget">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn2" label="Oct"
                width="35px" field="month_10" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn3"
                label="Nov" width="35px" field="month_11" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn4"
                label="Dec" width="35px" field="month_12" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn5"
                label="Jan" width="35px" field="month_1" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn6"
                label="Feb" width="35px" field="month_2" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn7"
                label="Mar" width="35px" field="month_3" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn8"
                label="Apr" width="35px" field="month_4" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn9"
                label="May" width="35px" field="month_5" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn10"
                label="June" width="35px" field="month_6" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn11"
                label="July" width="35px" field="month_7" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn12"
                label="Aug" width="35px" field="month_8" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn15"
                label="Sept" width="35px" field="month_9" editable="true">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn13"
                label="Total" width="45px" field="victimTotal">
            </xe:djxDataGridColumn>
            <xe:djxDataGridColumn id="djxDataGridColumn14"
                width="200px" label="Description" field="$Desc">
            </xe:djxDataGridColumn>
        </xe:djxDataGrid>

I went through Brad Balassastis' excellent tutorial: http://xcellerant.net/2013/04/25/dojo-data-grid-11-editiable-columns/

Any help would be great -- thanks!

EDIT/ADDITIONAL INFO:

We have a REST Service and Dojo DataGrid that does not save the changes to editable columns on the initial load -- meaning the XPage loads and changes are made. The only way the changes are saved is after the close() or revert() method for the REST service is called, then the save() method is called. The REST Service is pointing to another database on the same server, and uses the keys property:

<xe:restService id="rsVictims" pathInfo="rsVictimsData">
<xe:this.service>
    <xe:viewItemFileService defaultColumns="true"
        viewName="InvoiceGridVictims" contentType="application/json"
        databaseName="voca\vocadatastore.nsf" keys="k28ts71zrjsw">
    </xe:viewItemFileService>
</xe:this.service>
</xe:restService>

Here is the DataGrid:

<xe:djxDataGrid id="djxDataGrid1" storeComponentId="rsVictims"
    autoHeight="90">
    <xe:djxDataGridColumn id="djxDataGridColumn1"
        label="Target" width="35px" field="victimTarget">
    </xe:djxDataGridColumn>
    <xe:djxDataGridColumn id="djxDataGridColumn2"
        label="Oct" width="35px" field="month_10" editable="true">
    </xe:djxDataGridColumn>
</xe:djxDataGrid>

It flows like this:

Open the XPage with the REST service and DataGrid

Make changes to the editable columns

Click the Save button which calls this code (code is copied from Brad Balassaitis' demo, 06 Custom Control):

 <xp:button value="Save Changes" id="victimsSaveButton">
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[// Save the changes...
editedRows = [-1];
var args = {onError: function() {alert('error!');}};
rsVictims.save(args);

//Refresh the grid
rsVictims.close();
dijit.byId('#{id:djxDataGrid1}')._refresh();]]></xp:this.script>
                </xp:eventHandler>
            </xp:button>

DataGrid is closed, refreshed, but changes are NOT saved

Make changes again and click the Save button

DataGrid is closed, refreshed, and changes are now saved

What I have noticed is that the DataGrid is loaded twice when the XPage is opened -- I see this is Firebug in the Net tab. On the first GET, it retrieves the grid correctly -- the Response is correct, the JSON is formatted correctly, and the start=0 with a count=25.

On the second GET, it seems to lose the grid -- the Response is empty, the JSON items is empty, and the start=25 with the count=25. I have tried setting the start property in the REST Service to 0, but that does not do anything. I have tried setting the count property to 500 as well, but that does not fix it either.

The interesting fact about this is, when the view is moved inside the current database -- so the databaseName property on the REST Service is not used -- the Save button works perfectly. Also, there is only one GET when loading the DataGrid, not two GETs when pointing to a view in another database on the same server. I know there are some issues when looking to another server, but these databases are on the same server.

Thanks in advance!

Answer 1

Dan,

I have nearly an identical situation in my current project. I have mine working perfect so I think I can help. I assume that you already took Per Lausten's suggestion above. You wouldn't be able to save at all if you didn't.

The difference between your code and mine is that I am using a xe:viewJSONService instead of a xe:viewFileItemService. The extention library book says that you have to use the viewFileItem if you want it updatable, but this is NOT true.

I had nothing but trouble with the viewItemFileService, see this blog post for the issues I had (http://notesspeak.blogspot.com/2013/07/going-with-extjs-grid-and-giving-up-on.html) I nearly gave up entirely on the dojo grid, but came back to it because it works on mobile.

Using the viewJSONService just works. Instead of a keys property, use the category filter. For you category have code similar to this:

var category:String = lineItemBean.getThisUNID();
if(category == null){
    return "show nothing"
} else {
    return lineItemBean.getThisUNID();
}
//prevents all records from being returned

You need to be careful, because if the category is null, all records are returned, which could be a big problem or security hole. In my example, I pull from a bean, but you could put a document reference there as well.