I am trying to show some date in my Kendo UI grid. Data cames from a java servlet. I set status code to 500 when error occuured. I can see the error on console but cannot handle in js. I want to show some message to user like 'Update fail because of xxx' or something else. Here is my read code:(Always returns status 500 for testing.)
private void read(HttpServletRequest request, HttpServletResponse response) {
try {
DBOperations db = new DBOperations();
Gson _gson = new Gson();
Calendar cal = Calendar.getInstance();
SimpleDateFormat sdf = new SimpleDateFormat("dd-MM-yyyy hh:mm:ss");
System.out.println("Read called @" + sdf.format(cal.getTime())
+ " | p_callback: " + request.getParameter("callback"));
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.setStatus(500);// For testing. Always return error!!!
response.getWriter().println(
(request.getParameter("callback") == null ? "callback"
: request.getParameter("callback"))
+ "("
+ _gson.toJson(db.getTrucksInPort()) + ")");
} catch (Exception e) {
e.printStackTrace();
}
}
And here is my js. part in html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Kendo UI - Grid Example</title>
<link href="styles/examples-offline.css" rel="stylesheet">
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.rtl.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/console.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:8080/ws/api",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/ask",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/ask/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/ask/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/ask/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "rowid",
fields: {
hn: { editable: true, nullable: false },
tn: { validation: { required: true } },
gid: { type: "date", validation: { required: true, min: 1} },
gign: { type: "number" },
sgid: { type: "date" },
dgii: { type: "number"}
}
}
,errors:"Errors"
},
error:function(e){
alert("Failed!.");
this.cancelChanges();
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
sortable: {
mode: "single",
allowUnsort: false
},
columns: [
{ field:"hn", title: "Haulier No" },
{ field: "tn", title:"Trailer No", format: "{0:c}" },
{ field: "gid", title:"Gate In Date",format:"{0:MM-dd-yyyy HH:mm:ss}",editor: dateTimeEditor },
{ field: "gign", title:"Gate In Gate No" },
{ field: "sgid", title:"Second Gate In Date" ,format:"{0:MM-dd-yyyy HH:mm:ss}"},
{ field: "dgii", title:"Dummy Gate In" },
{ command: ["edit", "destroy"], title: " " }],
editable: "popup"
});
});
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({});
}
</script>
</div>
</body>
</html>In this code block i try to write some message to screen but nothing occurs.
,errors:"Errors"
},
error:function(e){
alert("Failed!.");
this.cancelChanges();
}
Where am i wrong? Thank you.