Not able to read data from remote server

7 posts, 0 answers
  1. Parag
    Parag avatar
    6 posts
    Member since:
    Aug 2013

    Posted 08 Oct 2013 Link to this post

    var dataSource = new kendo.data.DataSource({
            transport: {
              read: {
                url: "http://localhost/apartment/data.php?api=profile",
                dataType: "json",
                type: "GET"
              }
            }

        });

        var viewModel = kendo.observable({
          datasource: dataSource
        });

       var listView = new kendo.View("profile-template", {
        model: viewModel
       });

        var listHtml = listView.render();
        $("#profile-view table").html(listHtml);

      My TEMPLATE: 
      
       <script id="profile-template" type="text/x-kendo-template">
       <tr>
         <td>Name</td><td> <span>#= datasource.name #</span></td>
       </tr>
       <tr>
         <td>Email</td><td>#= name #</td>
       </tr>
       <tr>
         <td>Mobile Number</td><td>9629014027</td>
       </tr>
       <tr>
         <td>Apartment</td><td>Green Age</td>
       </tr>
     </script>

  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 08 Oct 2013 Link to this post

    There are many ways to do this.
    here is a sample that resembles what you want to do
    Read from a remote server and bind to a List.


  3. Kendo UI is VS 2017 Ready
  4. Parag
    Parag avatar
    6 posts
    Member since:
    Aug 2013

    Posted 09 Oct 2013 Link to this post

    Hi,

     I am getting this error: 
      Uncaught TypeError: Object #<Object> has no method 'slice'

     I am working on mobile app. I followed your instructions and modified according to mobile events like this..

     var dataSource = new kendo.data.DataSource({
           transport: {
               read: {
                   url: "http://localhost/apartment/data.php?api=profile",
                   dataType: "json"
               }
           }
       });

       $("#profileList").kendoMobileListView({
           dataSource: dataSource,
           template: $("#profile-template").text()
       });




  5. Parag
    Parag avatar
    6 posts
    Member since:
    Aug 2013

    Posted 09 Oct 2013 Link to this post

    Hi,

       I fixed this issue by changing  the response format . Initially i was getting JSON object  in reponse. Now i changed into JSON ARRAY.  Its working fine.  

     But i would like to know how to append JSON OBJECT into HTML? 
  6. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 09 Oct 2013 Link to this post

    So the way this works is that you assign a datasource to your html ListView.
    And you assign a template to your ListView.
    This template repeats itself for every element on the datasource.
    So, to append elements to your html you just need to add those elements to your datasource.
    Here is an example
  7. Parag
    Parag avatar
    6 posts
    Member since:
    Aug 2013

    Posted 09 Oct 2013 Link to this post

    I believe list views works with a response of Collection type, but what if my response is not a collection. For example, I just want to append profile information which comes as a json object, and not a json array. What kind of view should be used in that case?
  8. Parag
    Parag avatar
    6 posts
    Member since:
    Aug 2013

    Posted 09 Oct 2013 Link to this post

    OK. I finally figured it out. What you need is to specify the schema, and the model, and at least of field in your model

    <div id="profile"></div>
        
    <script type="text/x-kendo-template" id="template">
        <div>Name : #:name#</div>
        <div>Phone : #:phone#</div>
        <div>Landmark : #:landmark#</div>
        <div>City : #:city#</div>
    </script>

    <script>
    var template = kendo.template($("#template").html());
    var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://54.254.164.98:8888/profile",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                user_id: { type: "string" },
                                name: { type: "string" },
                                phone: { type: "string" },
                                landmark: { type: "string" },
                                city: { type: "string" }
                            }
                        }
                    }
    ,
                    change: function() {
                        $("#profile").html(kendo.render(template, this.view()));
                    }
                });

                dataSource.read();

    </script>
Back to Top
Kendo UI is VS 2017 Ready