Initialization of a ListView

[André]

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?

[Alexander Valchev]

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