Hi,
I am using the popup editing feature of the grid. Now I need to put some validation in. I was able to figure out how to validate the string field but can't figure out how to validate the date fields since I am usingt the DateTimePicker on the popup window (code at bottom).
I would like to validate that the days are greeater than today and that EndDate > StartDate for example.
Thanks in advance.
jennifer
var AuctionGrid = {};
/// class variables
AuctionGrid._id = null;
AuctionGrid._auctionDataSource = null;
/// <
summary
>Initialize the auctions grid</
summary
>
AuctionGrid.init = function () {
// Auction Datasource
AuctionGrid._auctionDataSource = new kendo.data.DataSource({
transport: {
read: {
url: _rootUrl + "Test/GetAuctions/"
},
update: {
url: _rootUrl + "Test/UpdateAuctions/",
type: "POST"
},
destroy: {
url: _rootUrl + "Test/DestroyAuction/",
type: "POST"
},
create: {
url: _rootUrl + "Test/CreateAuction/",
type: "POST"
},
parameterMap: function (data, type) {
// If update, create or destroy, then serialize the data
// as JSON so that it can be more easily read on the server.
if (type != "read") {
return { models: JSON.stringify(data.models) };
} else {
return data;
}
}
},
schema: {
model: {
id: "AuctionID",
fields: {
AuctionID: {
editable: false,
type: "number"
},
AuctionName: {
type: "string",
validation: {
required: { message: "An Auction Name is Required!" },
validateAuctionName: function (input) {
//alert(input.attr("data-bind"));
if (input.attr("data-bind") == "value:AuctionName") { // check if this is the element to validate
alert(input.val().length);
if (input.val().length > 10) {
input.attr("data-validateAuctionName-msg", "AuctionName can only have a maximum of 10 characters.");
return false;
}
else
return true;
}
return true;
}
}
},
ShortDescription: {
type: "string"
},
LongDescription: {
type: "string"
},
StartDate: {
type: "date"
},
EndDate: {
type: "date",
validation: {
required: { message: "End Date is Required!" },
validateEndDate: function (input) {
HOW DO I USE VALIDATION HERE - HOW DO I VALIDATE THAT END DATE > START DATE
}
}
},
Active: { type: "boolean" }
}
}
}
});
// Display the active auctions in a kendo grid.
$("#AuctionGrid").kendoGrid({
dataSource: AuctionGrid._auctionDataSource,
scrollable: true,
editable: "popup",
pageSize: 6,
edit: onEdit,
height: 300,
toolbar: ["create"],
columns: [{
field: "AuctionName",
title: "Auction Name",
width: "200px"
}, {
field: "ShortDescription",
title: "Description",
editor: textareaEditor
}, {
field: "StartDate",
title: "Start Date",
format: "{0:MM-dd-yyyy hh:mm tt}",
editor: dateTimeEditor,
width: "100px"
}, {
field: "EndDate",
title: "End Date",
format: "{0:MM-dd-yyyy hh:mm tt}",
editor: dateTimeEditor,
width: "100px"
}, {
field: "Active",
title: "Active",
template: "<
input
type=\"checkbox\" />",
width: "80px"
}, {
command: ["edit", "destroy"], title: " ", width: "110px"
}],
groupable: false
});
}
function onEdit(e) {
$(e.container).parent().css({
width: '600px',
height: '400px'
});
// set maxLengths
e.container.find("input[name=AuctionName]").attr("maxlength", 10);
}
function dateTimeEditor(container, options) {
$('<
input
data-text-field
=
"' + options.field + '"
data-value-field
=
"' + options.field + '"
data-bind
=
"value:' + options.field + '"
data-format
=
"' + options.format + '"
/>')
.appendTo(container)
.kendoDateTimePicker({});
}
function textareaEditor(container, options) {
$('<
textarea
data-bind
=
"value:' + options.field + '"
style
=
"width:400px;"
rows
=
"4"
></
textarea
>')
.appendTo(container);
}