Question

我有网格。在该网格中，我有3列，如名称， qty1和qty2。

qty1 和 qty2 都是 NumericText 框。

这里我的问题是，如果我将qty1值更改为qty2。

示例：

qty1 的最大值 10 。基于此值 qty2 将不超过 10 。
qty1的最大值为20.基于此值，qty2不会超过20.

我如何在这里进行验证。

Answer 1

您应该在kendo验证器小部件中定义自定义规则/消息，以检查输入到第二个文本框中的值与第一个：

e.g。

HTML：

<div id="form-stuff">
   <input id="Value1" name="Value1" type="number" />
   <div style="clear"></div><br />
   <input id="Value2" name="Value2" type="number" />
   <div style="clear"></div><br />
   <div class="validation-tooltip-wrapper"><span class="k-invalid-msg" data-for="Value2" style="position:relative;"></span></div>
   <div style="clear"></div><br />
   <button id="btn-submit" type="button" class="k-button k-button-icontext"><span class="k-icon k-update"></span>Submit</button>
   <span id="results"></span>
</div>

JS：

$('#Value1').kendoNumericTextBox({
    min: 0,
    max: 10,
    value: 0,
    format: '#'
});

$('#Value2').kendoNumericTextBox({
    value: 0,
    min: 0,
    format: '#'
});

$('#form-stuff').kendoValidator({
   rules: {
      qty2: function(input) {
        if(input.is('[name=Value2]')) {
            var input1 = $('#Value1').data('kendoNumericTextBox'), maxAmount = input1.max();
            return (Number(input.val()) <= maxAmount);
        }
        return true;
      }
   },
   messages: {
      qty2: 'amount exceeded'
   }
});

$('#btn-submit').on('click', function() {
    var validator = $('#form-stuff').data('kendoValidator');
    if(validator.validate()) {
        $('#results').text('Valid!');
    } else {
        $('#results').text('Invalid!');
    }
});

这里可以看到jsFiddle：

http://jsfiddle.net/d6R4X/7/

我希望这会有所帮助......

Answer 2

最后，我解决了自己。我在JSFiddle中给出了以下示例。

HTML：

JS：

var data = [
 { Name: "Ranga Reddy", MaxMarks: 10, MinMarks:6 },
 { Name: "Vinod Reddy", MaxMarks: 9, MinMarks:7 }
]

var dataSource = new kendo.data.DataSource({
     pageSize: 20,
     data: data,
     autoSync: true,
     schema: {
     model: {            
        fields: {                
            Name: { validation: { required: true } },                
            MaxMarks: { type: "number", validation: { required: true, min: 0, max: 10} },
            MinMarks: { type: "number", validation: { required: true} }
          }
        } // fields 
     } // model
});

$("#grid").kendoGrid({
   dataSource: dataSource,
   pageable: true,
   height: 430,
   toolbar: ["create"],
   columns: [
     { field:"Name",title:"Name", width:"40%" },    
     { field: "MaxMarks", title:"Max Marks", width: "20%" },
     { field: "MinMarks", title:"Min Marks", width: "20%",
       editor: function (container, options) {
       // create an input element
       var input = $("<input name='" + options.field + "'/>");
       // append it to the container
       input.appendTo(container);
       // initialize a Kendo UI numeric text box and set max value
       input.kendoNumericTextBox({
         max: options.model.MaxMarks,
         min:0
       });
     }
    },
   { command: "destroy", title: " ", width: "20%" }],
   editable: true
});

请参阅jsfiddle http://jsfiddle.net/rangareddy/SJ85S/28/

中的示例

Kendo UI Grid One列将其效果更改为另一列

2 个答案: