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

【问题标题】：Kendo UI Grid One column changes it effects to the another columnKendo UI Grid 一列将其效果更改为另一列
【发布时间】：2013-10-15 12:32:42
【问题描述】：

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

qty1 和 qty2 都将是 NumericText 框。

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

示例：

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

我如何在这里进行验证。

【问题讨论】：

标签： user-interface grid kendo-ui

【解决方案1】：

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

例如

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/

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

【讨论】：

【解决方案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/ 中的示例

【讨论】：