Announcement

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

    ListGrid editorType fields not validated

    I've got a CanvasItem built on a ListGrid, which in turn uses custom editors for its fields. My custom item (MultipleItem) represents an array, and the validation should restrict it to be length 3. Field A is not validated, while field B is validated as I expect.

    Why is the validator inside of MultipleItem not being executed when the row is being validated?

    I'm using "v9.1p_2015-07-08/Pro Deployment".

    Code:
    isc.ClassFactory.defineClass("MultipleItem","TextItem");
    isc.MultipleItem.addProperties({
       multiple:true,
       detail:false,
       transformInput: function(form,item,value,oldValue){
          if(value == null){
             return null;
          }
          return value.replace(/ /g,'').split(',');
       },
       validators: [
          {
             type:"custom",
              condition:function(item,validator,value,record){
                 console.log("validating length1:",value.length);
                 return value.length == item.arrayLength;
              }
          }
       ],
    });
    
    var CustomFields = [
       {hidden: true,name: "id",primaryKey: true},
       {name:"salign",title:"A",editorType:"MultipleItem",arrayLength:3},
       {name:"talign",title:"B",editorType:"MultipleItem",arrayLength:3,
        validators: [
           {
              type:"custom",
              condition:function(item,validator,value,record){
                 console.log("validating length2:",value.length);
                 return value.length == item.arrayLength;
              }
           }
        ]
       },
    ];
    
    isc.ClassFactory.defineClass("CustomItem", "CanvasItem");
    isc.CustomItem.addProperties({
       shouldSaveValue:true,
       createCanvas: function() {
          var initial = this.getValue();
          var lg = isc.ListGrid.create({
             dataSource: isc.DataSource.create({
                clientOnly:true,
                fields:CustomFields
             }),
             saveLocally:true,
             data:initial,
             canEdit: true,
             editByCell: true,
             fields:CustomFields,
          });
          return lg;
       },
       showValue : function (displayValue, dataValue) {
          if (this.canvas == null) return;
          var lg = this.canvas.members[0];
          lg.setData(dataValue);
          this.canvas.show();
       },
       getValue: function(){
          try {
             var lg = this.canvas.members[0];
             this.storeValue(lg.getOriginalData());
          } catch(err){}
          var orig = this.Super("getValue",arguments);
          if(orig == null){
             return orig;
          }
          var data = Array();
          for(var i=0; i<orig.length; i++){
             var obj = Object();
             for(var f=0; f<CustomFields.length; f++){
                var name = CustomFields[f]["name"];
                if(name in orig[i]){
                   obj[name] = orig[i][name];
                }
             }
             data.push(obj);
          }
          return data;
       }
    });
    
    var testData = [
       {id:1,salign:['a1','a2','a3'],talign:['b1','b2','b3']},
    ]
    
    var df = isc.DynamicForm.create({
       width:300,
       height:200,
       autoDraw:true,
       numCols:1,
       colWidths:["*"],
       fields:[{name:"tpi",showTitle:false,
                editorType:"CustomItem",
                height:200,
                defaultValue:testData}]
    });

    #2
    getValue() is not designed as an override point and attempting to override it could create a lot of different consequences like this one.

    Take a look at the CanvasItem docs and samples to see how to correctly implement a CanvasItem that provides a custom value.

    Comment


      #3
      Thanks for your suggestion. I've conformed my example to look more similar to your examples.

      Unfortunately, the problem persists:

      Code:
      isc.ClassFactory.defineClass("MultipleItem","TextItem");
      isc.MultipleItem.addProperties({
         multiple:true,
         detail:false,
         transformInput: function(form,item,value,oldValue){
            if(value == null){
               return null;
            }
            return value.replace(/ /g,'').split(',');
         },
         validators: [
            {
               type:"custom",
                condition:function(item,validator,value,record){
                   console.log("validating length1:",value.length);
                   return value.length == item.arrayLength;
                }
            }
         ],
      });
      
      var CustomFields = [
         {hidden: true,name: "id",primaryKey: true},
         {name:"salign",title:"A",editorType:"MultipleItem",arrayLength:3},
         {name:"talign",title:"B",editorType:"MultipleItem",arrayLength:3,
          validators: [
             {
                type:"custom",
                condition:function(item,validator,value,record){
                   console.log("validating length2:",value.length);
                   return value.length == item.arrayLength;
                }
             }
          ]
         },
      ];
      
      isc.ClassFactory.defineClass("CustomItem", "CanvasItem");
      isc.CustomItem.addProperties({
         shouldSaveValue:true,
         createCanvas: function() {
            var lg = isc.ListGrid.create({
               dataSource: isc.DataSource.create({
                  clientOnly:true,
                  fields:CustomFields
               }),
               saveLocally:true,
               data:this.getValue(),
               canEdit: true,
               editByCell: true,
               fields:CustomFields,
               // update form when data changes
               cellChanged : function () {
                  this.canvasItem.saveValue(this.data);
                  if (this.canvasItem.gridSortField != null) {
                     this.sort(this.canvasItem.gridSortField);
                  }
               }
            });
            return lg;
         },
         showValue : function (displayValue, dataValue) {
            if (this.canvas == null) return;
            this.canvas.setData(dataValue);
         },
      });
      
      var testData = [
         {id:1,salign:['a1','a2','a3'],talign:['b1','b2','b3']},
      ]
      
      var df = isc.DynamicForm.create({
         width:300,
         height:200,
         autoDraw:true,
         numCols:1,
         colWidths:["*"],
         fields:[{name:"tpi",showTitle:false,
                  editorType:"CustomItem",
                  height:200,
                  defaultValue:testData}]
      });

      Comment


        #4
        Again there's a really straightforward overview of how to use CanvasItem APIs right in the CanvasItem class doc. You're still calling the wrong APIs (saveValue() instead of storeValue()).

        Comment


          #5
          I copied my cellChanged function (which calls saveValue) directly from this example:
          http://www.smartclient.com/docs/9.1/...l#nestedEditor
          so you might consider updating your example if it's using your API incorrectly.

          I changed my code from saveValue to storeValue and the problem persists.

          Comment


            #6
            We've made an enhancement that should address this issue - a ListGridField will now assume the validators from it's editor's FormItem type, or through field.editorProperties, as well as those defined on a DataSource field, or on the ListGridField itself.

            Please retest with a build dated July 18 or later.

            Note that your usage of the same instance of your fields array (CustomFields) in both your DS and your grid is invalid. And you don't need to specify fields in the grid at all, if it's databound.

            Comment

            Working...
            X