Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    ListGrid gridComponent orientation

    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

    Code:
    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);
       }
    });
    Attached Files
    Last edited by mabboud; 8 Feb 2018, 06:26.

    #2
    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.

    Comment


      #3
      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

      Code:
      
      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
                  }
          ]
      });
      Attached Files

      Comment


        #4
        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:

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

        Comment


          #5
          excellent that did the trick

          thank you

          Comment

          Working...
          X