CanvasItem as ListGrid

[paulf]

I am trying to get a ListGrid as an embedded CanvasItem with another ListGrid.

The top-level ListGrid looks like this:

        this.list = isc.ListGrid.create({
				   		 width: "100%",
				   		 canEdit: true,
				   		 canSort: false,
				   		 cellHeight: 150,
				   		 dataSource: "annotationEditorDS",
				   		 fields: [{name: "collectionId"}, 
			                      {name: "note", width: "*", editorProperties: {cellHeight: 150}},
			                      {name: "annotationObjects", width: 250, 
			                    	  canvasConstructor: "ListGrid",
			                    	  canvasProperties: {
			                    	  		height: 150,
			                    	  		showHeader: false,
			                    	  		canAcceptDroppedRecords: true,
			                    	  		dataSource: "collectionMemberDS",
			                    	  		recordDropped: function(droppedRecords) {
			                    	  			return false;
					          	    		},
			                    	  		fields: [{name: "metatype", width: 100},
			                    	  		         {name: "name"}]
			                      		}
			                      },
			                      {name: "created", canEdit: false, width: 80},
			                      {name: "modified", canEdit: false, width: 80}
			                      ]
				   	 });

When I call startEditingNew() on the top level ListGrid I expected the 'annotationObjects' canvasItem seems to be created automatically. At least I get this message in the Developer's Console.

21:04:55.484:WARN:CanvasItem:isc_CanvasItem_122:CanvasItem: annotationObjects defined with no canvas property - creating a default canvas for this item.

However, the child ListGrid does not appear in the 'annotationObjects' field as expected. Is there something else necessary?

Is this the proper methodology to embed a ListGrid as a field in another ListGrid?


Thanks,
-pf

[paulf]

Just to be complete, the 'annotationEditorDS' DataSource defines the 'annotationObjects' field type as "canvas".

[Isomorphic]

The canvasProperties and canvasConstructor properties should be underneath an editorProperties object since they are properties destined for the editor.

The type of the field shouldn't be "canvas", instead, it should reflect the data type of the field. For example, if this field has an array of related records, you can set the type field to the ID of the related DataSource and set multiple="true".

Note that setting type to "canvas" is what's causing auto-construction of a Canvas, but it's just a basic Canvas, not a ListGrid, because your properties aren't making it to the editor as written.

[paulf]

Thanks that seems to work. There is one glitch. Using a ListGrid defined as follows:

        this.list = isc.ListGrid.create({
				   		 width: "100%",
				   		 canEdit: true,
				   		 canSort: false,
				   		 cellHeight: 150,
				   		 dataSource: "annotationEditorDS",
				   		 fields: [{name: "collectionId"}, 
			                      {name: "note", width: "*", editorProperties: {cellHeight: 150}},
			                      {name: "annotationObjects", width: 250,
			                    	  type: "canvas",
			                    	  editorProperties: {
			                    	  	  cellHeight: 150,
				                    	  canvasConstructor: "ListGrid",
				                    	  canvasProperties: {
				                    	  		showHeader: false,
				                    	  		canAcceptDroppedRecords: true,
				                    	  		dataSource: "associationMemberDS",
				                    	  		fields: [{name: "metatype", width: 100},
				                    	  		         {name: "name"}]
				                      		}
			                      		}
			                      },
			                      {name: "created", canEdit: false, width: 80},
			                      {name: "modified", canEdit: false, width: 80}
			                      ]
				   	 });

The embedded ListGrid for the 'annotationObjects' field is offset from the top of the parent cell by the width of the header even thought its header is not showing (showHeader: false). Is there any way to correct for this offset?

-pf

[Isomorphic]

That's not an effect we've seen before and doesn't happen in some other ListGrid-based cell editors we've built. Are you sure that's not just a side-effect of the extremely large cellHeight in the embedded grid? Or perhaps of not setting a size for the embedded grid?

[paulf]

I was able to fix the offset problem by adjusting the cellHeight of the parent listgrid.

One more question. For an embedded listgrid, how can you find out what record number it is associated with in the parent grid?

Thanks
-paul

[Isomorphic]

Yes, use formItem.grid and formItem.rowNum - these are automatically set up for you by the grid.

[paulf]

Thanks.

I'm having a problem with the display of values collected in the embedded ListGrid for the annotatedObjects field. Everything works fine except that the embedded listgrid and values disappear when the context switches to a new row in the parent grid (since the field grid just an editor for the field). How can I keep a listgrid as the standard display canvas for 'annotatedObjects' field even when the focus switches to a new record?

thanks

[paulf]

Also, how woudl I reset the values for the editor when focus changes back to the field. (Essentially where can I invoke fieldGrid.setData(fieldRecords)) ?

[Isomorphic]

On a row transition, expect your item to be initiliazed with a setValue() call and call setData() on your grid from there.

Note, you should be using defaultFields rather than fields to avoid shared field definitions between grid instances (in some cases editors need to be created and destroyed more than once).

[paulf]

Sorry, I can't find any documentation on defaultFields. Is this meant to be a substitute for the fields array on ListGrid? Could you provide an example of how I would use them within the following gird?

Just as a reminder, the 'annotationObjects' field is the embedded ListGrid.

Also, note the placement of the setValue() function on the annotationObjects field. Is this correct?

Thanks.

isc.ListGrid.create({
				   		 width: "100%",
				   		 canEdit: true,
				   		 canSort: false,
				   		 wrapCells: true,
				   		 cellHeight: 100,
				   		// autoSaveEdits: false,
				   		 editEvent: "click",
				   		 dataSource: "annotationEditorDS",
				   		 fields: [{name: "collectionId"},
				   		          {name: "dayportId"},
				   		          {name: "note", width: "*"},
			                      {name: "annotationObjects", width: 250,
			                    	  type: "canvas",
			                    	  setValue: function(value) {
				   		        	  		this.setData(value);
				   		          		},
			                    	  editorProperties: {
				                    	  canvasConstructor: "ListGrid",
				                    	  canvasProperties: {
				   			 					height: 100,
				   			 					alternateRecordStyles: true,
				                    	  		showHeader: false,
				                    	  		dataSource: "associationMemberDS",
				                    	  		canAcceptDroppedRecords: true,
				                    	  		// this is the MultiAnnotationEditor
				                    	  		parentEditor: this,
				                    	  		recordDrop: function(droppedRecords) {
				   			 						var topgrid = this.parentEditor.list;
				                    	    		if (droppedRecords != null) {
				                    	    			for (var i = 0; i < droppedRecords.length; i++) {
				                    	    				var obj = droppedRecords[i];
				                    		    			if (DY.hasSupertype(obj, "SemanticObject")) {
				                    		    				var record = topgrid.getRecord(topgrid.getEventRow());
				                    		    				var annotid = topgrid.getRecord(topgrid.getEventRow()).dayportId;
				                    		    				this.addData({annotationId: annotid, objectId: obj.dayportId},
				                    		    						this.getID() + ".addAssociation(data)");
				                    		    			}
				                    	    			}
				                    	    		}
				                    	    		return false;
				                    	    	},
				                    	    	addAssociation: function(data) {
				                    	    		this.data.add(data);
				                    	    		var last = this.data.getLength() - 1;
				                    	    		this.refreshRow(last);
				                    	    	},
				                    	  		fields: [{name: "metatype", width: 100},
				                    	  		         {name: "name"}]
				                      		}
			                      		}
			                      },
			                      {name: "created", canEdit: false, width: 80},
			                      {name: "modified", canEdit: false, width: 80}
			                      ]
				   	 });

[Isomorphic_Paul]

The setValue implementation should be specified within the editorProperties block - setValue will be called on the generated form item (the editor) rather than the field itself.

ListGrid.defaultFields is a substitute for the fields array on a ListGrid.
The difference between defaultFields and fields is that when a ListGrid is instantiated it will duplicate it's defaultFields object and apply that to itself as this.fields.
This is a simple way to provide a default 'fields' configuration to apply to multiple listGrids (for example a ListGrid subclass or a 'properties' block that can be applied to multiple listGrids). If you just specified fields on the config block, each generated listGrid would end up referencing the same live javascript array which can lead to some unexpected side effects.
defaultFields is documented in the most recent 8.0 nightly builds, but it does post date the 7.0rc2 release.