Initialization of a ListView

2 posts, 0 answers
  1. André
    André avatar
    7 posts
    Member since:
    Feb 2013

    Posted 20 Mar 2013 Link to this post

    I was trying to initialize a listview with data received from the server in two ways:

    Initialization with "data-init" attribute
    01....
    02. 
    03.<div data-role="view" data-layout="root" data-id="student" data-init="viewInit">
    04.    <ul data-role="listview" data-style="inset">
    05.    </ul>
    06.</div>
    07. 
    08. 
    09.<section data-role="layout" data-id="root">
    10.    <header data-role="header">
    11.        <div data-role="navbar">myapp</div>
    12.    </header>
    13. 
    14.    <footer data-role="footer">
    15.    </footer>
    16.</section>
    17. 
    18.<script>
    19.    var dataSource = new kendo.data.DataSource({
    20.        transport: {
    21.            read: {
    22.                url: "@Url.Action("IndexJson", "Student")",
    23.                contentType: "application/json; charset=utf-8",
    24.                dataType: "json",
    25.                type: "GET"
    26.            }
    27.        }
    28.       });
    29.    dataSource.read();
    30.    function viewInit() {
    31.        $("#listview").kendoMobileListView({
    32.            dataSource: dataSource,
    33.            template: $("#datatemplate").text()
    34.        });
    35.    }
    36. 
    37.</script>
    38. 
    39.<script type="text/x-kendo-tmpl" id="datatemplate">
    40.    <div><a data-role="detailbutton" data-style="detaildisclose"></a><h3>${Name}</h3></div>
    41.</script>
    42. 
    43. 
    44.    <script>
    45.        //alert("kendo.mobile.Application");
    46.        var app = new kendo.mobile.Application(document.body,
    47.        {
    48.            transition: 'slide'
    49.        });
    50.    </script>
    Initialization with "data-source" and "data-template"
    01....
    02. 
    03.<div data-role="view" data-layout="root" data-id="student">
    04.    <ul data-role="listview" data-style="inset" data-source="dataSource" data-template="datatemplate">
    05.    </ul>
    06.</div>
    07. 
    08.<section data-role="layout" data-id="root">
    09.    <header data-role="header">
    10.        <div data-role="navbar">myapp</div>
    11.    </header>
    12. 
    13.    <footer data-role="footer">
    14.    </footer>
    15.</section>
    16. 
    17.<script>
    18.    var dataSource = new kendo.data.DataSource({
    19.        transport: {
    20.            read: {
    21.                url: "@Url.Action("IndexJson", "Student")",
    22.                contentType: "application/json; charset=utf-8",
    23.                dataType: "json",
    24.                type: "GET"
    25.            }
    26.        }
    27.       });
    28.</script>
    29. 
    30.<script type="text/x-kendo-tmpl" id="datatemplate">
    31.    <div><a data-role="detailbutton" data-style="detaildisclose"></a><h3>${Name}</h3></div>
    32.</script>
    33. 
    34.    <script>
    35.        //alert("kendo.mobile.Application");
    36.        var app = new kendo.mobile.Application(document.body,
    37.        {
    38.            transition: 'slide'
    39.        });
    40.    </script>
    The first way, the listview is not being populated, but the second is filling the listview... Why this happen?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Mar 2013 Link to this post

    Hello André,

    Thank you for getting in touch with us.

    The main problem with first approach is the wrong selector.
    <ul data-role="listview" data-style="inset"></ul>
     
    //there is no element with id="listview"
    $("#listview").kendoMobileListView({
        //...
    });

    Apart from that ListView is initialized twice, which is not supported. Widgets should be initialized either with data-role in the mark-up or .kendoMobile<Widget name> at the init event. Multiple initialization is not supported.

    I hope this will help.

    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