ListGrid gridComponent orientation

[mabboud]

I am trying to change the gridComponent to have the my ToolStrip bar to be on the Right side of the grid within a DynamicForm
so basically i have taken the example for Embedding a ListGrid inside of Dynamic form. but i having a probelm with the this.canvasItem.storeValue(this.data);
the canvasItem is null in this instance and i am not sure why it is null

can you please check what i am missing or if there is better way to do what i am trying to accomplish within a DynamicForm attached a print screen of what the list grid would look like

isc.ClassFactory.defineClass("GridEditorItem", "CanvasItem");

isc.GridEditorItem.addProperties({
   //height:"*", width:"*",
   //rowSpan:"*", colSpan:"*",
   endRow:false, startRow:false,
   autoDraw:false,
   // this is going to be an editable data item
   shouldSaveValue:true,

   // Override createCanvas to create the ListGrid with the user can use to set the value.
   createCanvas : function () {

       var gridDS = isc.DS.get(this.gridDataSource);

       var grid = isc.ListGrid.create({
           autoDraw:false,
           canSort:false,
           startRow:false,
           endRow:false,
           // fill the space the form allocates to the item
           leaveScrollbarGaps:false,
           headerHeight:20,
           layoutAlign:"center",
           // dataSource and fields to use, provided to a listGridItem as
           // listGridItem.gridDataSource and optional gridFields
           dataSource:gridDS,
           fields:this.gridFields,
           sortField:this.gridSortField,
           gridComponents:["header", "body"],
           canRemoveRecords: true,  
           showHeader:this.gridShowHeader,
           // the record being edited is assumed to have a set of subrecords
           data:this.getValue(),
           canEdit:true,
           saveLocally:true,
           modalEditing:true,
           selectionType: "single",
           // update form when data changes
           cellChanged : function () {
               this.canvasItem.storeValue(this.data);
               if (this.canvasItem.gridSortField != null) {
                    this.sort(this.canvasItem.gridSortField);
               }
           },
           getGrid:function(){return this;}
       });

       return isc.HLayout.create({
            autoDraw: false,
            padding: 5,
            overflow:"auto",
            members:[grid,this.gridEditControlField],
            setData:function(data){
                grid.setData(data);
            },
            getGrid:function(){return grid;}
       });
   },

   // implement showValue to update the ListGrid data
   // Note that in this case we care about the underlying data value - an array of records
   showValue : function (displayValue, dataValue) {
       if (this.canvas == null) return;
       this.canvas.setData(dataValue);
   }
});

[Isomorphic]

If you mean you want to right align a ToolStrip that is above a grid, place the grid and ToolStrip in a VLayout and set layoutAlign:"right" on the Toolbar. Ensure it is sized smaller than the grid or right-aligning it won't do anything.

[mabboud]

That did not work what you suggested ... not sure how a vertical layout would put the grid and ToolStrip next to each other attached a URL of what it looks like after the change to the GridEditorItem to return a VLayout here is sample code of what i have done

isc.ClassFactory.defineClass("GridEditorItem", "CanvasItem");

isc.GridEditorItem.addProperties({
   //height:"*", width:"*",
   //rowSpan:"*", colSpan:"*",
   endRow:false, startRow:false,
   autoDraw:false,
   // this is going to be an editable data item
   shouldSaveValue:true,

   // Override createCanvas to create the ListGrid with the user can use to set the value.
   createCanvas : function () {

       var gridDS = isc.DS.get(this.gridDataSource);

       var grid = isc.ListGrid.create({
           autoDraw:false,
           canSort:false,
           startRow:false,
           endRow:false,
           // fill the space the form allocates to the item
           leaveScrollbarGaps:false, 
           headerHeight:20,
           layoutAlign:"center",
           // dataSource and fields to use, provided to a listGridItem as
           // listGridItem.gridDataSource and optional gridFields
           dataSource:gridDS,
           fields:this.gridFields,
           sortField:this.gridSortField,
           gridComponents:["header", "body"],
           canRemoveRecords: true,  
           showHeader:this.gridShowHeader,
           // the record being edited is assumed to have a set of subrecords
           data:this.getValue(),
           canEdit:true,
           saveLocally:true,
           modalEditing:true,
           selectionType: "single",
           // update form when data changes
           cellChanged : function () {
               this.canvasItem.storeValue(this.data);
               if (this.canvasItem.gridSortField != null) {
                    this.sort(this.canvasItem.gridSortField);
               }
           },
           getGrid:function(){return this;}
       });

       /* return grid;*/
      return isc.VLayout.create({
            autoDraw: false, 
            padding: 5,
            overflow:"auto",
            members:[grid,this.gridEditControlField],
            setData:function(data){
                grid.setData(data);
            },
            getGrid:function(){return grid;}
       });
   },

   // implement showValue to update the ListGrid data
   // Note that in this case we care about the underlying data value - an array of records
   showValue : function (displayValue, dataValue) {
       if (this.canvas == null) return;
       this.canvas.setData(dataValue);
   }
});


function getAddControl(clickAction){

    return isc.ToolStrip.create({
        vertical:true,
        padding:0,
        height:"100%",
        width: 20,
        autoDraw:false,
        layoutAlign:"right",
        members: [
            isc.ToolStripButton.create({
                autoDraw:false,
                iconSize:15,
                padding:0,
                icon: "[SKIN]/actions/add.png",
                showDown:false,
                prompt: t("addRecord"), 
                click: clickAction
            })
        ]
    });
}

isc.DynamicForm.create({
    ID: "approvalForm", 
    dataSource:"Request",
    autoDraw:false,
    layoutAlign:"center",
    overflow:"auto", 
    height:"*",
    width:"100%",
    minHeight:125,
    numCols:7,
    items:[
            {                    
                name:"ApprovalSignature", 
                align:"center",
                width:"*",
                height:120,
                colSpan:3,
                gridShowHeader:true,
                title:t("signatures",'Signatures'),
                editorType:"GridEditorItem",
                gridDataSource:"Signature",
                gridFields:[
                        {name:"RequestKey",hidden:true},
                        {name:"SignatureTypeKey",hidden:true},
                        {
                            name:"UserGroupKey",
                            title: t('department','Department'),
                            type:"select",
                            optionDataSource:"UserGroup",
                            displayField:"GroupName",
                            valueField:"UserGroupKey",
                            required:true,
                            emptyDisplayValue:t('pleaseSelect'),
                            changed:"this.grid.setEditValue(this.rowNum, 'UserKey', null);", // empty it out if they select a different department 
                            editorProperties:{
                                optionOperationId:"getGroupsForRightName",
                                getPickListFilterCriteria : function () {
                                    return {rightName:'crm.reasonApproval'};
                                }
                            }
                        },
                        {
                            name:"UserKey",
                            title: t('user'),
                            type:"select",
                            optionDataSource:"User",
                            displayField:"FullName",
                            valueField:"UserKey",
                            required:true,
                            emptyDisplayValue:t('pleaseSelect'),
                            editorProperties:{
                                optionOperationId:"getUsersForRightsNameAndGroup",
                                getPickListFilterCriteria : function () {
                                    var groupKey = this.grid.getEditedCell(this.rowNum, "UserGroupKey");
                                    return {rightName:'crm.reasonApproval', UserGroupKey:groupKey};
                                }
                            }

                        },
                        {
                            name:"SigTime",
                            title: t('date'),
                            type:"date",
                            required:true,
                            emptyDisplayValue:t('pleaseSelect')
                        }
                ],
                gridEditControlField:getAddControl( function () {
                    approvalForm.getItem("ApprovalSignature").canvas.getGrid().startEditingNew({RequestKey:currentRequestKey,SignatureTypeKey:getSignatureType('APP').SignatureTypeKey});
                }),
                saveLocally: true,
                canEdit:true,
                autoFetchData:false
                , startRow:false
                , endRow:false
            }
    ]
});

[Isomorphic]

Our approach, as we said, was intended to right-align a toolbar above the grid. Reading your original post again, it seems that maybe you already have the layout you want, but you just don't know why "this.canvasItem" is null in your cellChanged() handler. Well in that handler, "this" is your ListGrid, and you have not passed the canvasItem to your ListGrid, so it doesn't have it. Pass it in the create() block, like:

     canvasItem : this,

.. and then you will be able to refer to it as this.canvasItem in methods or handlers on the ListGrid instance.

[mabboud]

excellent that did the trick

thank you