This is a migrated thread and some comments may be shown as answers.

JSON File Not Reading into grid

1 Answer 207 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Timothy
Top achievements
Rank 1
Timothy asked on 26 Oct 2020, 06:33 PM

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

Sort by
0
Viktor Tachev
Telerik team
answered on 28 Oct 2020, 12:08 PM

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/.

Tags
Data Source
Asked by
Timothy
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or