CODEWITHSUNDEEP
user-interfacegridkendo-ui
user2235568
user2235568

Reputation: 33

Kendo UI Grid One column changes it effects to the another column

I have grid. In that grid, i have 3 columns like name, qty1 and qty2.

Both qty1 and qty2 will be NumericText Boxes.

here my question is if i change qty1 values this value effects to the qty2.

Example:

  1. qty1 has a max value will be 10. based on this value qty2 will not exceed 10.
  2. qty1 has a max value will be 20. based on this value qty2 will not exceed 20.

How i can give validation here.

Upvotes: 0

Views: 1503

Answers (2)

user2235568
user2235568

Reputation: 33

Finally, I solved my self. I am given the following example in 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
});

see the example in jsfiddle http://jsfiddle.net/rangareddy/SJ85S/28/

Upvotes: 1

Neil Hibbert
Neil Hibbert

Reputation: 862

You should define custom rules/messages in the kendo validator widget to check the values inputted into the second textbox against the first:

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!');
    }
});

The jsFiddle for this can be seen here:

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

I hope this helps...

Upvotes: 1

Related Questions