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;
}
}
Related
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.
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 have a jqGrid custom function as editrules: { custom: true, custom_func: checkforduplicates, required:true }
However, I want this function to be run only in add mode, not in edit mode. Is this possible ?
EDIT:- After answer below from Oleg, I changed code to below. However, the alert does not print. Not sure where I am going wrong.
colModel: [
{ key: true, name: 'id', editable: false, formatter: 'integer', viewable: false, hidden: true },
{
key: false,
name: 'name',
editable: true,
editrules: {
required: true,
custom: function (options) {
// options have the following properties
// cmName
// cm
// iCol
// iRow
// rowid
// mode - "editForm", "addForm", "edit", "add", "cell" and so on
// newValue - the value which need be validated
// oldValue - the old value
// some additional properties depends on the editing mode
alert("mode is " + options.mode);
if (options.mode === "add") { // "add" for inline editing
var grid = $("#grid");
var textsLength = grid.jqGrid("getRowData");
var textsLength2 = JSON.stringify(textsLength);
alert("i am here");
var myAttrib = $.map(textsLength,
function (item) { return item.name });
var count = 0;
for (var k in textsLength) {
if (textsLength.hasOwnProperty(k)) {
++count;
}
}
var text, i;
for (i = 0; i < count; i++) {
text = myAttrib[i];
if (value === text) {
return [false, " - Duplicate category name."];
}
}
return [true, ""];
}
return true;
}
}
},
Free jqGrid supports old style custom_func with the options value, name and iCol and the new style validation. To use new style validation one don't need to specify any custom_func callback, but to define custom as the calback function with one parameter:
editrules: {
required: true,
custom: function (options) {
// options have the following properties
// cmName
// cm
// iCol
// iRow
// rowid
// mode - "editForm", "addForm", "edit", "add", "cell" and so on
// newValue - the value which need be validated
// oldValue - the old value
// some additional properties depends on the editing mode
if (options.mode === "addForm") { // "add" for inline editing
// do the validation
}
return true;
}
}
In case of validation of Add form the mode property is equal to "addForm", options.iRow === -1, options.oldValue === null, options.rowid === "_empty". It's recommended to use options.mode to detect the editing (or searching mode) in free jqGrid because the values of other properties (iRow, oldValue and rowid) depends on the editing mode.
For version 4.7 I use this method. Form for adding data class for the table. After that, special actions verified by the user are performed.
{
name : "LOGIN",
index : "LOGIN", editrules: {
required:true,
custom:true,
custom_func: dublicateUser
}
...
{
closeAfterAdd : true,
width : 500,
recreateForm : true,
afterShowForm : function () {
jQuery("#TblGrid_list_users").addClass('addMode');
}
...
function dublicateUser() {
var a;
var login = jQuery('#LOGIN').val();
var checkMode = jQuery('#TblGrid_list_users').hasClass('addMode');
jQuery.ajax({
type: 'POST',
data: {login:login, mode:checkMode},
url: 'code/validate_user.php',
async: false,
success: function(data) {
if (data == 'err') {
a = 1;
}
else {
a=0;
}
}
});
if (a==1) {
return[false,"error"];
}
else {
return[true];
}
}
The below code works but for DOB, it displays the error message after the first text box (DayOfBirth) instead of the third one (YearOfBirth).
$("form").validate({
rules: {
DayOfBirth: { required: true },
MonthOfBirth: { required: true },
YearOfBirth: { required: true },
SSN1: { required: true },
SSN2: { required: true },
SSN3: { required: true }
},
groups: {
DateofBirth: "DayOfBirth MonthOfBirth YearOfBirth",
SSN: "SSN1 SSN2 SSN3"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "DayOfBirth" || element.attr("name") == "MonthOfBirth" || element.attr("name") == "YearOfBirth")
error.insertAfter("#YearOfBirth");
else
error.insertAfter(element);
if (element.attr("name") == "SSN1" || element.attr("name") == "SSN2" || element.attr("name") == "SSN3")
error.insertAfter("#SSN3Text");
else
error.insertAfter(element);
}
});
Change...
error.insertAfter("#YearOfBirth");
to...
form.find(".error").append(error);
and the error will display after the YearOfBirth.
Next time, perhaps the whole code with the HTML or a jsFiddle demostration of your problem would help explain your question more clearly.
I want to prevent my user from typing letters inside a numeric field.
I saw that there is an option of: editrules:{number:true}, but this option will let the user click any key the user wants and only when row saved it will alert for illegal input. This is not good option for me. I want to prevent from the start the typing of keys that are not numbers (for example in a regular input I can use jQuery's .numeric()).
How can this be done?
{name:'actualNo',index:'actualNo',editable:true, edittype:"text", width:150,editoptions:{
size: 15, maxlengh: 10,
dataInit: function(element) {
$(element).keyup(function(){
var val1 = element.value;
var num = new Number(val1);
if(isNaN(num))
{alert("Please enter a valid number");}
})
}
}},
I don't use jQuery.numeric plugin myself, but I suppose you should use dataInit property of editoptions for the corresponding grid column:
editoptions: { dataInit: function (elem) {
$(elem).numeric(/*some optional parameters*/);
}
}
or in case of some trouble in the form
editoptions: { dataInit: function (elem) {
setTimeout(function(){
$(elem).numeric();
}, 100);
}
}
I hope it will work.
{name:'rate',index:'rate', align:"left", width:'150',editable:true,
edittype:"text", editoptions:{
size: 25, maxlengh: 30,
dataInit: function(element) {
$(element).keypress(function(e){
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
}
}
},