Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Fill ListView in ASPX using JSON webservice

9 Answers 338 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Roman
Top achievements
Rank 1
Roman asked on 20 Jun 2012, 07:36 AM
mobile-sample-1.jpg
Hi,

I have a mobile project, where I need fill ListView with JSON data. All data is on one row.


I try to change data, model, ... and another settings, but nothing is help me.

This is my source code.
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ecommerce.m.Default" %>
<!DOCTYPE html>
<html>
    <head>
        <title>Ecommerce</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <meta charset="utf-8">
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
    </head>
    <body>
      
         <div data-role="view" id="tabstrip-flat" data-title="Result - view" data-init="mobileListViewDataBindInitFlat" data-layout="mobile-tabstrip"> 
            <ul id="flat-listview"></ul>
        </div>
 
        <div data-role="layout" data-id="mobile-tabstrip">
            <header data-role="header">
                <div data-role="navbar">
                    <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                    <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
                </div>
            </header>
            <footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#tabstrip-flat" data-icon="stop">Flat</a>
            </div>
        </footer>
        </div>
 
    <script type="text/javascript">
        var searchDataSource;
        searchDataSource = new kendo.data.DataSource(
        {
            schema: {
                data: function (data) {
                    alert(data.d);   /*Data Return Successfully*/
                    return data.d;
                },
                //model: {}
                model: {
                    fields: {
                        Name: { type: "string" },
                        Company: { type: "string" },
                        Address: { type: "string" },
                        Phone: { type: "string" },
                        Country: { type: "string" }
                    }
                }
            },
            transport: {
                read: {
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    url: "WebServiceData.asmx/TestJSON"
                }
            }
        });
       
        function mobileListViewDataBindInitFlat() {
            $("#flat-listview").kendoMobileListView({
                dataSource: searchDataSource
                //group: "Country"
            });
        }
 
        </script>
 
    <script type="text/javascript">
        //new kendo.mobile.Application($(document.body), { layout: "foo" });
        var app = new kendo.mobile.Application();
    </script>
         
    </body>
</html>

Webservice:
[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class WebServiceProduct : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string TestJSON()
        {
            Employee[] e = new Employee[2];
            e[0] = new Employee();
            e[0].Name = "Name1";
            e[0].Company = "Birlasoft Ltd.";
            e[0].Address = "LosAngeles California";
            e[0].Phone = "1204675";
            e[0].Country = "US";
            e[1] = new Employee();
            e[1].Name = "Name2";
            e[1].Company = "Birlasoft Ltd.";
            e[1].Address = "D-195 Sector Noida";
            e[1].Phone = "1204675";
            e[1].Country = "India";
 
            string sReturn = new JavaScriptSerializer().Serialize(e);
            return new JavaScriptSerializer().Serialize(e);
        }
        public class Employee
        {
            public string Name { get; set; }
            public string Company { get; set; }
            public string Address { get; set; }
            public string Phone { get; set; }
            public string Country { get; set; }
        }
 
    }

I need get list view with rows, I get only one row with all data.
I don't know, where I do mistake. Can you help me.
Thanks.

Roman

9 Answers, 1 is accepted

Sort by
0
Roman
Top achievements
Rank 1
answered on 20 Jun 2012, 08:31 AM
SOLVED !!! :)

I solved it more than a day, when I change webservice method from string to object and remove serialization was running.
I'm sorry for duplicity record in forum.

public object TestJSON()
{
    Employee[] e = new Employee[2];
    e[0] = new Employee();
    e[0].Name = "Name1";
    e[0].Company = "Birlasoft Ltd.";
    e[0].Address = "LosAngeles California";
    e[0].Phone = "1204675";
    e[0].Country = "US";
    e[1] = new Employee();
    e[1].Name = "Name2";
    e[1].Company = "Birlasoft Ltd.";
    e[1].Address = "D-195 Sector Noida";
    e[1].Phone = "1204675";
    e[1].Country = "India";
  
    return e;
    //string sReturn = new JavaScriptSerializer().Serialize(e);
    //return new JavaScriptSerializer().Serialize(e);
}

Roman
0
Bavya
Top achievements
Rank 1
answered on 01 Nov 2012, 07:57 AM
android.PNG
service-error.PNG
service-result.PNG
newAndroidResult.PNG

Hello Roman/Telerik team,

 I am new to mobile application and KendoUi and I found it’s very interesting. But I have issue with connecting KendoUi mobile application to database.

 I was creating an Andriod mobile application using phoneGap and KendoUi. And I tried your same code. I also got the same issue like you mentioned. (See image android.png)

 But when I tried your approach (change webservice method from string to object and remove serialization), I got the following error as result of webservice (see image service_error.png)

 So I have made bit modification (added [XmlInclude(typeof(Employee[]))]) in webservice and got this (see image service_result.png ) as xml result.


index.html (android)

<!DOCTYPE html>
<html>
<head>
 <title>Ecommerce</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.mobile.min.js"></script>
    <script src="js/console.js"></script>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
   <div data-role="view" id="tabstrip-flat" data-title="Result - view" data-init="mobileListViewDataBindInitFlat" data-layout="mobile-tabstrip">
            <ul id="flat-listview"></ul>
        </div>
  
        <div data-role="layout" data-id="mobile-tabstrip">
            <header data-role="header">
                <div data-role="navbar">
                    <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                    <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
                </div>
            </header>
            <footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#tabstrip-flat" data-icon="stop">Flat</a>
            </div>
        </footer>
        </div>
  
<script type="text/javascript">
        var searchDataSource;
        searchDataSource = new kendo.data.DataSource(
        {
            schema: {
                data: function (data) {
                    alert(data.d);   /*Data Return Successfully*/
                    return data.d;
                },
                //model: {}
                model: {
                    fields: {
                        Name: { type: "string" },
                        Company: { type: "string" },
                        Address: { type: "string" },
                        Phone: { type: "string" },
                        Country: { type: "string" }
                    }
                }
            },
            transport: {
                read: {
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    url: "http://192.168.5.109:85/TestService.asmx/TestJSON"
                }
            }
        });
        
        function mobileListViewDataBindInitFlat() {
            $("#flat-listview").kendoMobileListView({
                dataSource: searchDataSource
                //group: "Country"
            });
        }
  
        </script>
  
    <script type="text/javascript">
        //new kendo.mobile.Application($(document.body), { layout: "foo" });
        var app = new kendo.mobile.Application();
    </script>
          
    </body>
</html>

TestService.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using Northwind_newModel;
using System.Web.Script.Serialization;
using System.Xml.Serialization;
 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class TestService : System.Web.Services.WebService
{
    [XmlInclude(typeof(Employee[]))]
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public object TestJSON()
   //  public string TestJSON()
    {
        Employee[] e = new Employee[2];
        e[0] = new Employee();
        e[0].Name = "Name1";
        e[0].Company = "Birlasoft Ltd.";
        e[0].Address = "LosAngeles California";
        e[0].Phone = "1204675";
        e[0].Country = "US";
        e[1] = new Employee();
        e[1].Name = "Name2";
        e[1].Company = "Birlasoft Ltd.";
        e[1].Address = "D-195 Sector Noida";
        e[1].Phone = "1204675";
        e[1].Country = "India";
       return e;
      //  string sReturn = new JavaScriptSerializer().Serialize(e);
      //return new JavaScriptSerializer().Serialize(e);
    }
    public class Employee
    {
        public string Name { get; set; }
        public string Company { get; set; }
        public string Address { get; set; }
        public string Phone { get; set; }
        public string Country { get; set; }
    }
 
}


But now the result getting in mobile is like this ( see image newAndroidResult.png).

Please help me..

Thanks
Bavya.


0
Ali
Top achievements
Rank 1
answered on 03 Nov 2012, 02:59 PM
You need to add a template to the list view: e.g.:
$("#flat-listview").kendoMobileListView({
                dataSource: searchDataSource,
                template: "#:data.name#"
            });
0
Ashutosh
Top achievements
Rank 1
answered on 05 Nov 2012, 02:06 PM
Hi Bavya,

You can define the template inside the <body> using script like this:

<script type="text/x-kendo-template" id="ListViewTemplate">
  <div class="box">${Name}</div>
  <div class="box">${Company}</div>
  <div class="box">${Address}</div>


  <div class="box">${Phone}</div>


  <div class="box">${Country}</div>

</script>

and just add the template inside your mobileListViewDataBindInitFlat function like this:

function mobileListViewDataBindInitFlat() {
  $("#flat-listview").kendoMobileListView({
dataSource: searchDataSource
     //group: "Country"
 
 template: $("#ListViewTemplate").text() // new code to be added
            });
        }
Note: "box" is a CSS class. You can define your own to format the layout.

I hope this help.
0
Bavya
Top achievements
Rank 1
answered on 07 Nov 2012, 06:16 AM

Hi Ashutosh and Ali,


Thanks a lot for your reply. But its not working for me. It is not showing any result. Here is my new code. Can you guys please have a try with the code and let me know where I am wrong.

index.html

<!DOCTYPE html>
<html>
<head>
 <title>Ecommerce</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.mobile.min.js"></script>
    <script src="js/console.js"></script>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
   <div data-role="view" id="tabstrip-flat" data-title="Result - view" data-init="mobileListViewDataBindInitFlat" data-layout="mobile-tabstrip">
            <ul id="flat-listview"></ul>
   </div>
         
<script type="text/x-kendo-template" id="ListViewTemplate">
    <div>${Name}</div>
    <div>${Company}</div>
    <div>${Address}</div>
    <div>${Phone}</div>
    <div>${Country}</div>
</script>
  
   <div data-role="layout" data-id="mobile-tabstrip">
     <header data-role="header">
       <div data-role="navbar">
           <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
           <span data-role="view-title"></span>
           <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
       </div>
     </header>
     <footer data-role="footer">
       <div data-role="tabstrip">
          <a href="#tabstrip-flat" data-icon="stop">Flat</a>
       </div>
     </footer>
  </div>
  
<script type="text/javascript">
        var searchDataSource;
        searchDataSource = new kendo.data.DataSource(
        {
            schema: {
                data: function (data) {
                    alert(data.d);   /*Data Return Successfully*/
                    return data.d;
                },
                //model: {}
                model: {
                    fields: {
                        Name: { type: "string" },
                        Company: { type: "string" },
                        Address: { type: "string" },
                        Phone: { type: "string" },
                        Country: { type: "string" }
                    }
                }
            },
            transport: {
                read: {
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    url: "http://192.168.5.109:85/TestService.asmx/TestJSON"
                }
            }
        });
        
   function mobileListViewDataBindInitFlat() {
      $("#flat-listview").kendoMobileListView({
          dataSource: searchDataSource,
          //group: "Country"
          template: $("#ListViewTemplate").text() // new code to be added
         });
      }
 </script>
  
 <script type="text/javascript">
    //new kendo.mobile.Application($(document.body), { layout: "foo" });
    var app = new kendo.mobile.Application();
 </script>
          
 </body>
</html>

Thanks,
Bavya.
0
Ashutosh
Top achievements
Rank 1
answered on 07 Nov 2012, 07:54 PM
Hi Bavya,

Your code is working properly on my development environment. Have you tried this code using Safari browser also?
This may be a browser related issue, as it appears to me on the first look.
0
Bavya
Top achievements
Rank 1
answered on 08 Nov 2012, 06:23 AM

Hi Ashutosh,

 Again thanks for your quick reply. Mine is an android application and I tested it in its simulator. But it was not working. Then I tried it in Visual Studio and tested in safari browser. But still no luck :(
I have a doubt that it is not working because the service in a remote server. Because I have read somewhere like "For consuming from an external server you would need to change to JSONP ". Can you please check my service? Is this the same way you tried? Do we need to serialize the result? Because as I mentioned in my first forum when I tried that code (Roman's code) I got result, but issue in formatting the result.

 One more thing is there any interoprability issue between asmx webservice and android application?

Thanks

Bavya

0
Bavya
Top achievements
Rank 1
answered on 14 Nov 2012, 04:20 AM
Hi Team,


Any help?


Thanks
Bavya
0
Bavya
Top achievements
Rank 1
answered on 28 Nov 2012, 04:26 AM
Hi Telerik team,

Any thoughts?

Thanks
Bavya
Tags
ListView (Mobile)
Asked by
Roman
Top achievements
Rank 1
Answers by
Roman
Top achievements
Rank 1
Bavya
Top achievements
Rank 1
Ali
Top achievements
Rank 1
Ashutosh
Top achievements
Rank 1
Share this question
or