I'm beginner, so be gentle. Working with the demos to get a basic grid working on my localhost, but the json file is not reading correctly into the grid. The grid is built, but nothing. Help!!
<%@ page contentType="text/html; charset=iso-8859-1"
language="java"
isThreadSafe="true"
session="true"
isELIgnored="false" %>
<!DOCTYPE HTML>
<html>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content=no-cache http-equiv="Pragma">
<meta content=no-store http-equiv="Pragma">
<meta content=-1 http-equiv="Expires">
<script src="<%= request.getContextPath()%>/kendojs/jquery.min.js"></script>
<link href="<%= request.getContextPath()%>/kendocss/kendo.common.min.css" rel="stylesheet" type="text/css">
<link href="<%= request.getContextPath()%>/kendocss/kendo.default.min.css" rel="stylesheet" type="text/css">
<script src="<%=request.getContextPath()%>/kendojs/kendo.all.min.js"></script>
<title>Kendo Grid</title>
</head>
<body>
<b>Kendo Grid</b>
<div>
<kendo:grid name="grid" groupable="true" sortable="true" style="height:550px;">
<kendo:grid-pageable refresh="true" pageSizes="true" buttonCount="20">
</kendo:grid-pageable>
<kendo:grid-columns>
<kendo:grid-column title="City" field="City" width="150"
template="<div class='customer-photo' style='background-image: url(../resources/web/Customers/#:data.customerId#.jpg);'></div><div class='customer-name'>#: contactName #</div>">
</kendo:grid-column>
<kendo:grid-column title="Country" field="Country" width="150" />
<kendo:grid-column title="Country ISO3" field="Country_ISO3" width="100" />
<kendo:grid-column title="Pop. 1950" field="Pop1950" width = "100" />
<kendo:grid-column title="Pop. 1955" field="Pop1955" width = "100" />
<kendo:grid-column title="Pop. 1960" field="Pop1960" width = "100" />
<kendo:grid-column title="Pop. 1965" field="Pop1965" width = "100" />
<kendo:grid-column title="Pop. 1970" field="Pop1970" width = "100" />
<kendo:grid-column title="Pop. 1975" field="Pop1975" width = "100" />
<kendo:grid-column title="Pop. 1980" field="Pop1980" width = "100" />
<kendo:grid-column title="Pop. 1985" field="Pop1985" width = "100" />
<kendo:grid-column title="Pop. 1990" field="Pop1990" width = "100" />
<kendo:grid-column title="Pop. 1995" field="Pop1995" width = "100" />
<kendo:grid-column title="Pop. 2000" field="Pop2000" width = "100" />
<kendo:grid-column title="Pop. 2005" field="Pop2005" width = "100" />
<kendo:grid-column title="Pop. 2010" field="Pop2010" width = "100" />
<kendo:grid-column title="Pop. 2015" field="Pop2015" width = "100" />
<kendo:grid-column title="Pop. 2020" field="Pop2020" width = "100" />
<kendo:grid-column title="Pop. 2025" field="Pop2025" width = "100" />
<kendo:grid-column title="Pop. 2050" field="Pop2050" width = "100" />
<kendo:grid-column title="Location" field="Location" width = "100" />
</kendo:grid-columns>
<kendo:dataSource pageSize="10">
<kendo:dataSource-transport>
<kendo:dataSource-transport-read url="http://localhost:8080/KendoGrid/urban-areas.json" dataType = "json"/>
</kendo:dataSource-transport>
<kendo:dataSource-schema>
<kendo:dataSource-schema-model>
<kendo:dataSource-schema-model-fields>
<kendo:dataSource-schema-model-field name="City" type="string" />
<kendo:dataSource-schema-model-field name="Country" type="string" />
<kendo:dataSource-schema-model-field name="Country_ISO3" type="string" />
<kendo:dataSource-schema-model-field name="Pop1950" type="number" />
<kendo:dataSource-schema-model-field name="Pop1955" type="number" />
<kendo:dataSource-schema-model-field name="Pop1960" type="number" />
<kendo:dataSource-schema-model-field name="Pop1965" type="number" />
<kendo:dataSource-schema-model-field name="Pop1970" type="number" />
<kendo:dataSource-schema-model-field name="Pop1975" type="number" />
<kendo:dataSource-schema-model-field name="Pop1980" type="number" />
<kendo:dataSource-schema-model-field name="Pop1985" type="number" />
<kendo:dataSource-schema-model-field name="Pop1990" type="number" />
<kendo:dataSource-schema-model-field name="Pop1995" type="number" />
<kendo:dataSource-schema-model-field name="Pop2000" type="number" />
<kendo:dataSource-schema-model-field name="Pop2005" type="number" />
<kendo:dataSource-schema-model-field name="Pop2010" type="number" />
<kendo:dataSource-schema-model-field name="Pop2015" type="number" />
<kendo:dataSource-schema-model-field name="Pop2020" type="number" />
<kendo:dataSource-schema-model-field name="Pop2025" type="number" />
<kendo:dataSource-schema-model-field name="Pop2050" type="number" />
<kendo:dataSource-schema-model-field name="Location" type="string" />
</kendo:dataSource-schema-model-fields>
</kendo:dataSource-schema-model>
</kendo:dataSource-schema>
</kendo:dataSource>
</kendo:grid>
</div>
</body>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</html>
1 Answer, 1 is accepted
Hi Timothy,
If you would like to use local binding in the Grid I suggest using the approach illustrated in the local binding example. Check it out below:
https://demos.telerik.com/jsp-ui/grid/local-data-binding
Give it a try and let me know how it works for you.
Regards,
Viktor Tachev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.