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

Filling a ListView

3 Answers 198 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Yamil
Top achievements
Rank 1
Yamil asked on 19 Jun 2012, 09:37 PM
Hi. I am new with KendoUI and developing a mobile test app. I connect to a website whene i have a PHP page and gets the categories data from Nothwind database. I got an json as thi s:
{"Result":"OK",
"Rows":[
{"CategoryID":1,"CategoryName":"Beverages","NumProducts":12},
{"CategoryID":2,"CategoryName":"Condiments","NumProducts":12},
....
]
}

And html code is :
        <script type="text/javascript">
        document.addEventListener("deviceready", onDeviceReady, false);


        function onDeviceReady() {
          $.mobile.allowCrossDomainPages = true;
          refreshCategoryList();
       }
       
 // ----------------------------------------------------------
     // Fill Categories List 
     // ----------------------------------------------------------
  function refreshCategoryList() {
var url = 'http://MyServer';
$.getJSON(url, function(res) {
  var result = res.Result;
  if (result == 'OK') {
    var categoryArray = res.Rows;
    $("#categoryList").kendoMobileListView({
    template : '<li><a href="#proPage" oncclik="sessionStorage.cat=${Rows.CategoryID}">${Rows.categoryName}' +
      '<span class="ui-li-count">${Rows..NumProducts}</span></a></li>',
           dataSource: kendo.data.DataSource.create( categoryaArray)
       });     
  }
});
 }
 
        </script> 
        
    </head>
    <body>
    <ul id="categoryList"></ul>
    
<script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>  

But i got this message in teh web console :

E/Web Console(693): TypeError: Result of expression 'd' [undefined] is not an object. at file:///android_asset/www/js/kendo.mobile.min.js:8

Any hint, please...

3 Answers, 1 is accepted

Sort by
0
Rajinder
Top achievements
Rank 1
answered on 20 Jun 2012, 12:07 PM
 <div data-role="view" id="login" >
    <!--<div data-role="header"><h2 style="text-align: center">Log In</h2> </div>
     <div data-role="footer"><h2 style="text-align: center">Log In</h2> </div>-->
      <ul data-role="listview" id="lst" data-style="inset" data-show="showDetailsView"  style="border:2px solid gray" >
       <li>
       <div class="head">&nbsp;</div>
         </li>
           <li>
                <input type="text" style="width: 60%" id="usernameinput" placeholder="User Name" required />
               <label for="usernameinput">User Name</label>  </li>
            <li>
                <input type="password" style="width: 60%" id="passwordinput" placeholder="Password" required />
               <label for="passwordinput">Password</label>  </li>
            <li>
            <a id="btnlogin"  data-role="button"  onclick="checkAuthentication();">Log In</a>
            </li>
        </ul>
        
    </div> 
<script type="text/x-kendo-template" id="customCategoriesTemplate">
      <a data-role="button"  id=${GroupCode} data-icon="select"   onclick="javaScript:GetProduct(this);" style="font-size:10px" >${GroupName}</a>
      </script>
------------------------------------------------------------------------------------------------------------------------------------------------------------



function checkAuthentication() {
              var uName = $("#usernameinput").val()
              var pass = $("#passwordinput").val()
              if (uName == "" && pass == "") {
                  return false;
              }
              localStorage.setItem("username", uName)
              localStorage.setItem("password", pass)
              $.ajax({
                  type: "Post",
                  url: "http://localhost:2223/Services/b2bService.asmx/checkAuthentication",
                  contentType: "application/json; charset=utf-8",
                  dataType: "Json",
                  data: '{ userName:"' + uName + '", password:"' + pass + '" }',
                  async: false,
                  success: function (data) {
                      if (data.d) {
                          window.location = "subcategories.htm"


                      }
                      else {
                          alert("Info:Invalid Authentication");
                      }
                  },
                  complete: function (data) {
                  },
                  error: function (result) {
                      alert(result.status + ' ' + result.statusText);
                  }
              });
          }
------------------------------------------------------------------------------------------------------------------------------------------------------------ 

 <WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
    Public Function checkAuthentication(ByVal userName As String, ByVal password As String) As Boolean
        If userName.Equals("1") AndAlso password.Equals("1") Then
            Return True
        Else
            Return False
        End If
    End Function
-------------------------------------------------

Try like this
0
Yamil
Top achievements
Rank 1
answered on 20 Jun 2012, 04:12 PM
Thanks Rajinder but I don't understand your code. It looks like I can not use $.getJSON ?
I shrink-ed the code to only call the json and got the same error message :

 <script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);


function onDeviceReady() {
  $.mobile.allowCrossDomainPages = true;
  refreshCategoryList();
}

   function refreshCategoryList() {
var url = 'http://MyServer/ns/ns.php?cat=0';
$.getJSON(url, function(res) {
  var result = res.Result;
  alert(result);
});
  }
  
</script> 
And I got 
E/Web Console(718): TypeError: Result of expression 'd' [undefined] is not an object. at file:///android_asset/www/js/kendo.mobile.min.js:8


0
Yamil
Top achievements
Rank 1
answered on 20 Jun 2012, 09:04 PM
I changed my code to 
...
<script>
function initListView() {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "http://MyServer/ns/ns.php?cat=0",
dataType: "json"
}
}//,
//change: function() {
//    debugger;
//}
});
$("#categoryList").kendoMobileListView({
dataSource: ds,
template: "<li>#:CategoryName#</li>"
});
}
   </script> 


</head>
<body>
   <div data-role="view" data-init="initListView">
<ul id="categoryList"></ul>
   </div> 
   ...

No error message but the listView is not shown...!!!
Tags
ListView (Mobile)
Asked by
Yamil
Top achievements
Rank 1
Answers by
Rajinder
Top achievements
Rank 1
Yamil
Top achievements
Rank 1
Share this question
or