Files
2022-11-04 13:24:24 +02:00

40 lines
2.1 KiB
HTML
Executable File

<div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView" data-use-native-scrolling="true">
<ul id="custom-listview"></ul>
</div>
<script type="text/x-kendo-template" id="customListViewTemplate">
<a data-role="button" class="km-primary km-button-right km-icon-button"><span class="km-icon km-edit"></span></a>
<img class="km-thumbnail" src="${url}" />
<h4 class="km-bold">${name}</h4>
<p class="job-title">${description}</p>
</script>
<script>
var groupedData = [
{ name: "Andrew Fuller", description: "VICE PRESIDENT, SALES", url: "content/shared/images/employees/1.png", letter: "A" },
{ name: "Janet Leverling", description: "SALES REPRESENTATIVE", url: "content/shared/images/employees/2.png", letter: "J" },
{ name: "Laura Callahan", description: "INSIDE SALES COORDINATOR", url: "content/shared/images/employees/3.png", letter: "L" },
{ name: "Steven Buchanan", description: "SALES MANAGER", url: "content/shared/images/employees/4.png", letter: "S" },
{ name: "Michael Suyama", description: "SALES REPRESENTATIVE", url: "content/shared/images/employees/5.png", letter: "M" },
{ name: "Anne Dodsworth", description: "SALES REPRESENTATIVE", url: "content/shared/images/employees/6.png", letter: "A" },
{ name: "Margaret Peacock", description: "SALES REPRESENTATIVE", url: "content/shared/images/employees/7.png", letter: "M" },
{ name: "Nancy Davolio", description: "SALES REPRESENTATIVE", url: "content/shared/images/employees/8.png", letter: "N" },
{ name: "Robert King", description: "SALES REPRESENTATIVE", url: "content/shared/images/employees/9.png", letter: "R" }
];
function mobileListViewTemplatesInit() {
$("#custom-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter" }),
template: $("#customListViewTemplate").html(),
headerTemplate: "<h2>Letter ${value}</h2>"
});
}
</script>
<style>
#custom-listview .job-title {
font-size: .7em;
}
</style>