I have cod as following
var loadGridEmployee = function(listEmployee) {
var grid = $("#grdemployees").data("kendoGrid");
if (!grid) {
grid = $("#grdemployees").kendoGrid({
height: 600,
columns: [
{ field: "ID", title:"ID", width: "100px" },
{ field: "Name", title:"Name", width: "150px"},
{ field: "Phone", title: "Phone", width: "150px"}
],
sortable: true,
resizable: true,
selectable: true,
pageable: {
pageSize: 20,
messages: {
display: "{0}-{1} \/ {2}"
}
},
noRecords: {
template:"xx" + ": List is empty"
}
}).data("kendoGrid");
}
grid.dataSource.data(listEmployee);
return grid;
}
$(document).ready(function () {
var grid = loadGridEmployee(listEmployee);
})<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script type="text/javascript">
var listEmployee = = [{"id":1,"name":"Dang Quang Hai","phone":"34563653434"}, {"id":2,"name":"Dang Gia Huy","phone":"78568534r234"}, {"id":3,"name":"Dang Hoang Linh Chi","phone":"56745745"}, {"id":4,"name":"tran binh trong","phone":"23234234r"}, {"id":5,"name":"Quang Tèo","phone":"123"}, {"id":6,"name":"hihihihih","phone":"31241"}];
</script>
<title>Insert title here</title>
</head>
<body>
<div id="grdemployees"></div>
<h1>Test list</h1>
</body>
</html>I don't know why the data did not appear on the grid. The result I received just some titles of columns of the grid, it like the picture as follow. enter image description here Please help me I add full what i need why STACKOVER does not agree to post this question?
