Home/ Questions/Q 9207927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T00:29:54+00:00

I am struggling with using the JSP wrapper in Kendo UI. I checked their

  • 0

I am struggling with using the JSP wrapper in Kendo UI.
I checked their forum and found nothing. I checked stackoverflow and found nothing. I read through the APIs but could not find an answer to my issue.

The call to
url: “CustomerAjaxServlet?str=The R”,

returns the following json object:

[
    {"id":0,"customerId":"RO113","name":"The Robe Gallery Inc."},
    {"id":1,"customerId":"TH204","name":"The Robe Collection"}
]

The grid is being rendered with the correct column headers and the paging is coming back
1 of 10 121 Items. But there is no data.
121 is the character count of the json object.
If I change the call the ajax servlet, the number of items changes too along with the 1 of …

<%@ page language="java" %>

<%@ taglib uri="/WEB-INF/tlds/esc.tld" prefix="esc" %>
<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic" %>


<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>



<%@ page import="org.apache.struts.taglib.TagUtils" %>

<% SessionContext context = SessionContext.getSessionContext(request); %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Detail template</title>
    <meta http-equiv="Content-Type" content='text/html; charset=us-ascii'>
      <meta name='author' content=Test'>

    <link href="common/js/kendo/examples/content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="common/js/kendo/styles/kendo.common.min.css" rel="stylesheet">
    <link href="common/js/kendo/styles/kendo.default.min.css" rel="stylesheet">

    <script src="common/js/kendo/js/jquery.min.js"></script>
    <script src="common/js/kendo/js/kendo.web.min.js"></script>
    <script src="common/js/kendo/content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>

        <div id="example" class="k-content">
            <div id="grid"></div>

            <script type="text/x-kendo-template" id="template">
                <div class="tabstrip">
                    <div>
                        <div class='customer-details'>
                            <ul>                            
                                <li><label>id:</label>#= id #</li>
                                <li><label>name:</label>#= name #</li>
                                <li><label>customerId:</label>#= customerId #</li>
                            </ul>
                       </div>
                    </div>
                </div>

            </script>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: function(options) {                                                            
                                          $.ajax( {
                                                url:  "CustomerAjaxServlet?str=The R",
                                                data: options.data,                                                                                                success: function(result) {
                                                options.success(result);
                                                //alert(result);
                                          }
                                          });
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 450,
                        sortable: true,
                        pageable: true,
                        dataBound: function() {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
                            {
                                field: "id",
                                title: "Id"
                            },
                            {
                                field: "name",
                                title: "Name"
                            },
                            {
                                field: "customerId",
                                title: "Customer Id"
                            }                          
                        ]
                    });
                });


            </script>
            <style scoped="scoped">
                .customer-details ul
                {
                    list-style:none;
                    font-style:italic;
                    margin-bottom: 20px;
                }

                .customer-details label
                {
                    display:inline-block;
                    width:90px;
                    font-style:normal;
                    font-weight:bold;
                }
            </style>
        </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code runs fine. Did you check the contentType of the json object returned? It should be “application/json”.

    I run your code with the following CustomerAjaxServlet

    <%@ page contentType="application/json;charset=UTF-8" language="java" %>
<%
    out.println("[" +
            "{\"id\":0,\"customerId\":\"RO113\",\"name\":\"The Robe Gallery Inc.\"}," +
            "{\"id\":1,\"customerId\":\"TH204\",\"name\":\"The Robe Collection\"}" +
            "]");
%>
    • 0