What I am trying to accomplish is a listview where each item is horizontally scrollable to another template item specifically an input field and a button. Is there any way to accomplish this? I have tried creating a listview with a template that contains a touch element and using the swipe event to update the template for that individual item but there appears to be no way on a mobile device to update an individual list items template. Another way I tried to do accomplish this was by making each listview item a scrollview but the problem there is the template for the scrollview has to be uniform and can not vary between pages. Any help would be much appreciated.
Thanks.
Ryan
Thanks.
Ryan
2 Answers, 1 is accepted
0
Ryan
Top achievements
Rank 1
Rank 1
answered on 26 Jul 2013, 04:27 PM
I have refined my question some:
<body>
<ul id="listView"></ul>
<script type="text/x-kendo-template" id="sitesListViewTemplate">
<div data-role="scrollview" data-template="scrollview-binding-template" data-source="?"></div>
</script>
<script type="text/x-kendo-template" id="scrollview-binding-template">
<div data-bind="visible: shouldShowSite">
<img src="styles/icons/#=sharepointType#.ico" alt="#=sharepoint#"/>
<h3>${title}</h3>
</div>
<div data-bind="invisible: shouldShowSite">
<input />
<div data-role="button">Search</div>
</div>
</script>
</body>
var testData = ?;
var dataView = new kendo.data.DataSource.create({data: testData});
$("#listView").kendoMobileListView({
dataSource: dataView,
template: $("#sitesListViewTemplate").html(),
click : listViewItemClick
});
}
What should I use as my data-source in my sitesListViewTemplate and how should my data (testData) be formatted in my javascript file to get this behavior.
<body>
<ul id="listView"></ul>
<script type="text/x-kendo-template" id="sitesListViewTemplate">
<div data-role="scrollview" data-template="scrollview-binding-template" data-source="?"></div>
</script>
<script type="text/x-kendo-template" id="scrollview-binding-template">
<div data-bind="visible: shouldShowSite">
<img src="styles/icons/#=sharepointType#.ico" alt="#=sharepoint#"/>
<h3>${title}</h3>
</div>
<div data-bind="invisible: shouldShowSite">
<input />
<div data-role="button">Search</div>
</div>
</script>
</body>
var testData = ?;
var dataView = new kendo.data.DataSource.create({data: testData});
$("#listView").kendoMobileListView({
dataSource: dataView,
template: $("#sitesListViewTemplate").html(),
click : listViewItemClick
});
}
What should I use as my data-source in my sitesListViewTemplate and how should my data (testData) be formatted in my javascript file to get this behavior.
0
Accepted
Hi,
Petyo
Telerik
I think that this demo (swipe right on an item) should be of help.
Regards,Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!