Hi Scott,
Basically the DataBinding event is available and you can modify the "Handling server side validation errors" example to work with KendoUI Web Grid:
<div id="Grid"></div>
<script type="text/javascript">
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Home/_Read",
dataType: "json"
},
update: {
url: "/Home/_Update",
dataType: "json"
},
create: {
url: "/Home/_Create",
dataType: "json"
}
},
//Error event
error: error,
batch: false,
schema: {
//Define the field which contains the error
errors: "Errors",
model: {
id: "Id",
fields: {
Id: { type: "number", editable: true, nullable: false },
Name: { validation: { required: "true"} }
}
}
}
});
$("#Grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 400,
toolbar: ["create"],
columns: [
{ field: "Id", title: "Id" },
{ field: "Name", title: "Name", width: "150px" },
{ command: ["edit"], title: " ", width: "210px"}],
editable: "popup"
});
});
</script>
<script type="text/javascript">
var validationMessageTmpl = kendo.template($("#message").html());
function error(args) {
if (args.errors) {
var grid = $("#Grid").data("kendoGrid");
grid.one("dataBinding", function (e) {
e.preventDefault(); // cancel grid rebind if error occurs
for (var error in args.errors) {
showMessage(grid.editable.element, error, args.errors[error].errors);
}
});
}
}
function showMessage(container, name, errors) {
//add the validation message to the form
container.find("[data-val-msg-for=" + name + "]")
.replaceWith($(validationMessageTmpl({ field: name, message: errors[0]})))
}
</script>
<script type="text/kendo-template" id="message">
<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
<span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>
</script>
Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework -
download Kendo UI now!