Files
jube-fork/Jube.App/wwwroot/kendo/examples/mobile-listview/databinding.html
2022-11-04 13:24:24 +02:00

70 lines
2.9 KiB
HTML
Executable File

<div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding" data-use-native-scrolling="true">
<header data-role="header">
<div data-role="navbar">
<a id="back-button" class="nav-button" data-align="left" href="#/" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
</div>
</header>
<ul id="flat-listview"></ul>
</div>
<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding" data-use-native-scrolling="true">
<header data-role="header">
<div data-role="navbar">
<a id="back-button" class="nav-button" data-align="left" href="#/" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<ul id="grouped-listview"></ul>
</div>
<div data-role="layout" data-id="databinding">
<div data-role="footer">
<div data-role="tabstrip">
<a href="#flat" data-icon="stop">Flat
</a><a href="#grouped" data-icon="organize">Grouped</a>
</div>
</div>
</div>
<script>
var groupedData = [
{name: "Sashimi salad", letter: "S" },
{name: "Chirashi sushi", letter: "C" },
{name: "Seaweed salad", letter: "S" },
{name: "Edamame", letter: "E" },
{name: "Miso soup", letter: "M" },
{name: "Maguro", letter: "M" },
{name: "Shake", letter: "S" },
{name: "Shiromi", letter: "S" },
{name: "Tekka maki", letter: "T" },
{name: "Hosomaki Mix", letter: "H" },
{name: "California rolls", letter: "C" },
{name: "Seattle rolls", letter: "S" },
{name: "Spicy Tuna rolls", letter: "S" },
{name: "Ebi rolls", letter: "E" },
{name: "Chicken Teriyaki", letter: "C" },
{name: "Salmon Teriyaki", letter: "S" },
{name: "Gohan", letter: "G" },
{name: "Tori Katsu", letter: "T" },
{name: "Yaki Udon", letter: "Y" }
];
var flatData = [ "Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon" ];
function mobileListViewDataBindInitFlat() {
$("#flat-listview").kendoMobileListView({ dataSource: flatData });
}
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter"}),
template: "${name}",
fixedHeaders: true
});
}
</script>