Filling a ListView

4 posts, 0 answers
  1. Yamil
    Yamil avatar
    57 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    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...
  2. Rajinder
    Rajinder avatar
    4 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

     <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
  3. Kendo UI is VS 2017 Ready
  4. Yamil
    Yamil avatar
    57 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    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


  5. Yamil
    Yamil avatar
    57 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    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...!!!
Back to Top
Kendo UI is VS 2017 Ready