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!