I have a kendo grid where i need the user to enter only whole numbers between 0 to 100 to Proposed Discount Column(only editable column in the grid). Even if the user enters the correct value,it shows the error message.
fields: {
ProposedDiscount: {
validation: {
required: true,
proposeddiscountvalidation: function (input) {
if ((input.val() >= 0 && input.val() < 101) && input.is("[name='ProposedDiscount']")) {
input.attr("data-proposeddiscountvalidation-msg", "Proposed Discount should be whole number");
return false;
} return true;
}
}
}
The error i am getting on the ui.
I am new to Kendo UI.
Related
I have a kendo grid with save button in the Tool bar panel. I have a proposed discount column which is editable and if the user enters whole numbers between 0 and 100(excluding decimals) , the save button should be visible or enabled otherwise invisible or disabled. I was able to achieve making the button invisible or disable but when they enter correct value, the button was not getting visible or enabled. Please help me. I just started working on Kendo UI recently.
function setEnabled(enabled) {
if (enabled) {
// $(".k-grid-nstToolbarBtn").removeClass("k-state-disabled");
$(".k-grid-nstToolbarBtn").show();
}
else {
// $(".k-grid-nstToolbarBtn").addClass("k-state-disabled");
$(".k-grid-nstToolbarBtn").removeAttr("href");
$(".k-grid-nstToolbarBtn").hide();
}
}
$('#NSTGrid').kendoGrid({
toolbar: [{ type: "button", text: "Save", name: "nstToolbarBtn", className: "k-grid-saveData" }],
dataSource: {
data: data.ReportData,
schema: {
model: {
fields: {
ProposedDiscount: {
validation: {
required: true,
proposeddiscountvalidationcvalidation: function (input) {
if (input.val() != "" && input.is("[name='ProposedDiscount']")) {
input.attr("data-proposeddiscountvalidationcvalidation-msg", "Proposed Discount should be whole number");
setEnabled(false);
return input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;
} else {
setEnabled(true);
return true;
}
}
}
},
ProductApprovedDiscount: { type: "decimal", editable: false },
BAN: { type: "string", editable: false },
I think the value passed to your setEnabled function needs to be the same as what you return as the validation result. Please try the following change:
proposeddiscountvalidationcvalidation: function (input) {
if (input.val() != "" && input.is("[name='ProposedDiscount']")) {
input.attr("data-proposeddiscountvalidationcvalidation-msg", "Proposed Discount should be whole number");
var valid = input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;
setEnabled(valid);
return valid;
} else {
return true;
}
}
I have a kendo grid that needs to display discounts.I have to implement the validation that it should accept numbers between 0.00 and 100. I have written code for accepting numbers between 0 and 100, now i need to implement the 2 decimal place validation as well. Please help.
$(gridname).kendoGrid({
dataSource: {
data: data.ReportData,
schema: {
model: {
fields: {
ProposedDiscountNST: {format: "{0:n2}",
validation: {
required: true,
proposeddiscountNSTvalidation: function (input) {
if (input.val() != "" && input.is("[name='ProposedDiscountNST']")) {
input.attr("data-proposeddiscountNSTvalidation-msg", "Should be between 0.00 & 100");
// return input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;
return input.val() >= 0 && input.val() < 101 ; // Accepts max 2 decimal digits
} else {
return true;
}
}
}
}
I need to display the validation message that this field accepts 2 decimal places only. Please help.
How to obtain the number of decimals is described in multiple places, e.g. Simplest way of getting the number of decimals in a number in JavaScript Get this number and check if is okay or not.
One remark: You are checking if input.val() < 101 This includes 100.7 and does not seem match your requirement "between 0.00 and 100".
You can get the number of decimals by comparing the number and the fixed number (number.toFixed(x) rounds the given number to x decimals):
$(gridname).kendoGrid({
dataSource: {
data: data.ReportData,
schema: {
model: {
fields: {
ProposedDiscountNST: {format: "{0:n2}",
validation: {
required: true,
proposeddiscountNSTvalidation: function (input) {
if (input.val() != "" && input.is("[name='ProposedDiscountNST']")) {
input.attr(
"data-proposeddiscountNSTvalidation-msg",
"Value should be between 0.00 & 100 and have a maximum of 2 decimals"
);
return
input.val() >= 0 &&
input.val() <= 100 &&
input.val() == input.val().toFixed(2)
;
} else {
return true;
}
}
}
}
}
}
}
}
});
Actually I tried the above solution by Stephan T. but unfortunately it did not work. so I tried this method and it worked. So posting it so that it will help some one.
$(gridname).kendoGrid({
dataSource: {
data: data.ReportData,
schema: {
model: {
fields: {
ProposedDiscountNST: {format: "{0:n2}",
validation: {
required: true,
proposeddiscountNSTvalidation: function (input) {
if (input.val() != "" && input.is("[name='ProposedDiscountNST']")) {
input.attr("data-proposeddiscountNSTvalidation-msg", "Should be between 0.00 & 100");
// return input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;
return input.val() >= 0 && input.val() <= 100 && ((parseFloat(input.val()) / (parseFloat(input.val()).toFixed(2))) == 1 ); // Accepts max 2 decimal digits
} else {
return true;
}
}
}
}
I am using custom multi-select code to filter a column. Currently I can get it to filter based on one selection, but am unable to filter based on multiple values. I need the logic to read, if any of the selected checkboxes are checked, then show the selections in the grid. The way I have it written right now, its filtering each one, but if one of the selections is false, it deletes it from the grid even if one of the other selections are true.
var filter = dataSource.filter() || { logic: "or", filters: [] };
var fieldFilters = $.map(element.find(":checkbox:checked"), function (input) {
return {
field: field,
operator: "eq",
value: input.value
};
});
if (fieldFilters.length) {
removeFiltersForField(filter, field);
filter.filters.push({
logic: "or",
filters: fieldFilters
});
var filterType = filter.filters[0].filters;
if (filter.filters[0].filters.length > 1) {
var filterLogic = { logic: "or", filters: filter.filters };
dataSource.filter(filterLogic.filters[0]);
} else {
dataSource.filter(filterType); // This works, but its only one selection
}
}
I need it to return if any selections are true and ignore the ones that are false. Currently, it goes in order, so if the first selection is true, it shows it in the grid, but if the next one is false, then it removes it from the grid.
OK I was able to make it work doing this. If someone has a more efficient way to do it, add it here. For now, this works:
var multipleFilters = [];
if (filterType.length > 1) {
$(filterType).each(function (i, value) {
var simpleFilter = { field: value.field, operator: value.operator, value: value.value };
multipleFilters.push(simpleFilter);
})
if (multipleFilters == 2) {
dataSource.filter(multipleFilters[0] || multipleFilters[1]);
} else if (multipleFilters == 3) {
dataSource.filter(multipleFilters[0] || multipleFilters[1] || multipleFilters[2]);
} else {
dataSource.filter(multipleFilters[1] || multipleFilters[2] || multipleFilters[3]);
}
} else {
dataSource.filter(filterType);
}
I have the following control:
#(Html.Kendo().DatePickerFor(model => model.Attributes.DueDate)
.HtmlAttributes(new {
ID = "idSurvey_DueDate",
#data_bind = "value: DueDate",
#Class = "report-label datepicker surveyAttributesData",
TabIndex = 3 })
.Min(DateTime.Now)
)
And the following jquery:
$("#idSurvey_DueDate").kendoValidator({
rules: {
dateValidation: function (e) {
var currentDate = kendo.parseDate($(e).val());
// Check if date parse was successful
if (!currentDate) {
return false;
}
return true;
}
},
messages: {
dateValidation: "Invalid Date!",
min: "Date must not be in the past!"
}
});
When I test this out and enter in an invalid date the message I get isn't what I expect. Instead it is "The field DueDate must be a date." Where is this mystery message coming from and why isn't it using the messages property I put in the validator? All I want is for non-valid date formats to not be allowed and for the date to not be in the past. So a minimum must be enforced.
This code seems to work fine:
$("form").kendoValidator({
rules: {
dateValidation: function(element) {
var value = $(element).val();
var date = kendo.parseDate(value);
if (!date) {
return false;
}
return true;
},
minDate: function(element) {
var value = $(element).val();
var date = kendo.parseDate(value);
var result = date >= new Date();
return result;
}
},
messages: {
dateValidation: "You must enter a date",
minDate: "The date must not be in the past"
}
});
Here is a live demo: http://jsbin.com/EvoroRe/1/edit
I suggest to add the mvcdate rule:
rules: {
mvcdate: function (input) {
var datarole = $(input).data('role');
if (datarole === 'datepicker') {
var value = $(input).val();
if (value) {
var date = kendo.parseDate(value, 'ddd, MMM d');
if (!date) {
return false;
}
}
}
return true;
}
},
messages: {
mvcdate: function (intput) {
return intput.attr('data-val-date');
}
}
Unfortunatelly dateValidation rule has a lower priority that date and mvcdate just because they are default and nor custom one. As I have understood the mvcdate rule has the highest priority because:
dateValidation rule has been skipped for the certain control and I got the 'must be a date' error
date rule has been passed with the TRUE result but I still got the 'must be a date' error
mvcdate rule has helped me alone.
You always can look to the kendoValidator in the console:
I'm not sure if the kendo validator changed since the accepted answer, but you'll want to filter out and only apply date validation to datepicker inputs. Otherwise a textbox or other input will generate an error message about an invalid date. The rules should look like
$("#modForm").kendoValidator({
rules: {
dateValidation: function (input) {
if (input.is('[data-role="datepicker"]')) {
var value = $(input).val();
var date = kendo.parseDate(value);
if (!date) {
return false;
}
}
return true;
}
},
messages: {
dateValidation: "You must enter a date",
}
});
I use jQuery Validation plugin to ensure what user entered positive cost_of_car in first text field and positive payment_amount in second text field such what *cost_of_car * 0.4 <= payment_amount <= cost_of_car*:
$.validator.addMethod("testMaxAmount", function()
{
return $("#cost_of_car").val() - 0 >= $("#payment_amount").val() - 0;
}, "Can't be more than cost_of_car");
$.validator.addMethod("testMinAmount", function()
{
return $("#cost_of_car").val() * 0.4 <= $("#payment_amount").val() - 0;
}, "Can't be less than cost_of_car * 0.4");
$("#calc_form").validate(
{
rules:
{
cost_of_car:
{
required: true,
number: true,
min: 1,
max: 10000000
},
payment_amount:
{
required: true,
number: true,
testMaxAmount: true,
testMinAmount: true
}
}
});
Now I want to skip testMaxAmount and testMinAmount checks until cost_of_car is valid. Testing
$("#calc_form").validate().element("#cost_of_car")
or even
$("#calc_form").validate({ignore: "#payment_amount"}).element("#cost_of_car")
inside these methods leads to the recursion and hangs browser.
Would you propose some other method to disable validation of payment_amount until cost_of_car is valid, please?
UPDATE: The change has to be in the validator.addMethod() calls:
$.validator.addMethod("testMaxAmount", function()
{
if($("#cost_of_car").valid())
return $("#cost_of_car").val() - 0 >= $("#payment_amount").val() - 0;
else
return true;
}, "Can't be more than cost_of_car");
$.validator.addMethod("testMinAmount", function()
{
if($("#cost_of_car").valid())
return $("#cost_of_car").val() * 0.4 <= $("#payment_amount").val() - 0;
else
return true;
}, "Can't be less than cost_of_car * 0.4");