Using canvasItem to include a listGrid of related data in a dynamicForm

StackOverflow https://stackoverflow.com/questions/9207072

  •  27-04-2021
  •  | 
  •  

Question

I need a form that inludes a list of related available options that can be selected via Checkbox. The number of options could be very large each form record will have its own set of options. Options selected may be changed at each submit.
I am using JSON dataSources with a php server, so I'm using SmartClient client side only.
I have used the examples available to create my canvasItem, but I have two problems:
1. When I fetchData on the form dataSource, the canvasItem dataSource does not do a fetch.
2. Changes in the canvasItem are not included in the form submit.
Here is my test code:
dataSource Code.
isc.DataSource.create({ ID:"PointDetlData",dataFormat:"json",idField: "NodeId", fields:[{name:"NodeId",primaryKey:true,type:"integer",title:"Node Id"}, {name:"RowId",title:"Row",canEdit:"false"}, {name:"Code",title:"Product",canEdit:"false"}, {name:"Name",title:"Details",canEdit:"false"}, {name:"Sel",type:"boolean",title:"Assign"}], operationBindings:[{operationType:"fetch", dataURL:"dsdet.json"}, {operationType:"update",dataURL:"updateTestDetail.php"}] }); isc.DataSource.create({ ID:"PointData",dataFormat:"json",idField: "NodeId", fields:[{name:"NodeId",primaryKey:true,type:"integer",title:"Node Id"}, {name:"PointId",type:"integer",title:"PointId"}, {name:"CompanyNodeID",title:"Company"}, {name:"Level",title:"Node Type"}, {name:"Name",title:"Name"}, {name:"items[]",title:"Order Items",multiple:"true",type:"PointDetlData"}], operationBindings:[{operationType:"fetch", dataURL:"ds.json"}, {operationType:"update",dataURL:"updateTest.php"}] });
canvasItem definition
isc.ClassFactory.defineClass("GridEditorItem", "CanvasItem"); isc.GridEditorItem.addProperties({ height:"*", width:"*", rowSpan:"*", endRow:true, startRow:true, shouldSaveValue:true, createCanvas : function () { return isc.ListGrid.create({ autoDraw:false, ID:"exampleFormGrid", width:this.width, height:this.height, leaveScrollbarGaps:false, dataSource:this.gridDataSource, fields:this.gridFields,canEdit:true,modalEditing:true, saveLocally:true,autoSaveEdits:false, cellChanged : function () { this.canvasItem.saveValue(this.data); if (this.canvasItem.gridSortField != null) {this.sort(this.canvasItem.gridSortField);} }, dataArrived : function () {this.canvasItem.showValue(null, this.canvasItem.getValue());}, selectionUpdated : function (record) { var item = this.canvasItem; if (record == null) item.storeValue(null); else item.storeValue(record[item.name]); }, refreshData : function (filter) {if (typeOf(filter) != null) this.fetchData(filter);} }); }, showValue : function (displayValue, dataValue) { if (this.canvas == null) return; var record = this.canvas.data.find(this.name, dataValue); if (record) this.canvas.selection.selectSingle(record) else this.canvas.selection.deselectAll(); } });
dynamicForm Code.
isc.DynamicForm.create({ ID: "exampleForm", autoDraw:true, width: 700, height: 350, position:"relative", dataSource:"PointData", fields: [{name:"NodeId" }, {name:"PointId" }, {name:"items[]", width:350, colSpan:2,showTitle:false, editorType:"GridEditorItem", gridDataSource:"PointDetlData", gridFields:[{name:"RowId"},{name:"Code"},{name:"Name"},{name:"Sel"}], gridSortField:"RowId"}, {name:"Level"},{name:"Name"}, {editorType:"SubmitItem", title:"Save"}] }); exampleForm.fetchData({NodeId:4});
I'm using SmartClient 8.1/LGPL Deployment (built 2011-08-02), and Firefox 8.0 browser.

Was it helpful?

Solution

Q1.When I fetchData on the form dataSource, the canvasItem dataSource does not do a fetch.

If you use server side SmartClient you join the two datasources so refreshing one will refresh both, otherwise you have to perform a manual fetch.

Q2. Changes in the canvasItem are not included in the form submit.

Replace the functions currently in isc.GridEditorItem.addProperties with the following:

selectionUpdateTest : function (iRowId,sStoreArray) {
    var outArray = new Array();
    var bFound = false;
    if (sStoreArray ==undefined) { bFound = false;}
    else {
        for (var i = 0;i <sStoreArray.length;i++) {
            if (sStoreArray[i] == iRowId) 
                bFound = true;
            else 
                outArray[outArray.length] = sStoreArray[i];
        }
    }
    if (!bFound)
        outArray[outArray.length] = iRowId;
    return outArray;
},
selectionUpdated : function (record) {
    var item = this.canvasItem;
    if (record == null) 
        item.storeValue(null);
    else 
        item.storeValue(this.selectionUpdateTest(record.RowId,item.getValue()));
},
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top