Bind Json Object to LisiView

2 posts, 0 answers
  1. Hitesh
    Hitesh avatar
    1 posts
    Member since:
    May 2013

    Posted 14 May 2013 Link to this post

    Hi,
    I am retrieving  data from database into JSON object using $.ajax method. I want to bind that data to listview. I am using following example. but in following example json has read from the file but I don't .json file I've an object which I need to bind. Can anyone tell me how to bind json object.
    <script type="text/javascript">
        var clientData = null;
        // Urls to access the WCF Rest service methods
        var GetClientUrl = "http://localhost:1000/Service/GetClients/agentId=AG9898";


        function initListView() {
            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                dataType: "json",
                url: GetClientUrl,
                success: function (clients) {
                    if (clients != null && clients != "undefined") {
                        clientData = clients.Clients;
                    }
                },
                error: function (xhr) {
                    clientData = null;
                    alert(xhr.responseText);
                }
            });

            var ds = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "team.json", //Here instead reading a data from file it should read from json object i.e. clientData
                        dataType: "json"
                    }
                },
                change: function () {
                    //debugger;
                }
            });
            $("#fixed-listview").kendoMobileListView({
                dataSource: ds,
                template: "#:SortName#"
            });
        }
    </script>

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 15 May 2013 Link to this post

    Hello Hitesh,

    To bind the ListView to local data array please use data option.
    $("#fixed-listview").kendoMobileListView({
        dataSource: { data: clientData },
        template: "#:SortName#"
    });

    I would like to remind you that the Ajax request is asynchronous. Please make sure that at the time when ListView is initialized, the clientData is already retrieved.

    To avoid potential problems you can use a custom read transport.
    Please check the 3rd code snippet called "Example - set read as a function".

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top