Tabstrip Kendo UI中的可过滤Listview

Question

I have a 3 tabbed tabstrip with Kendo UI, each tab having it's own filterable-listview. 我有一个带有Kendo UI的3个选项卡式选项卡，每个选项卡都有其自己的filterable-listview。 How can i populate a listview when its own tab is selected? 选择自己的标签后，如何填充列表视图？ I have a method called mobilelistviewfiltering which is supposed to populate the first listview, so i want it to execute when the first tab is selected. 我有一个称为mobilelistviewfiltering的方法，该方法应该填充第一个列表视图，因此我希望在选择第一个选项卡时执行它。 Any idea how? 任何想法如何？

I'd be glad. 我会很高兴。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://demos.telerik.com/kendo-ui/application/index"> <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script> </head> <body> <div id="videos" style="height:100%;" data-role="view" data-show="videoShow"> <header data-role="header"> <div data-role="navbar"> <a data-role="backbutton" data-align="left">Geri</a> <span data-role="view-title"></span> </div> </header> <div class="test" style="width:100%;"> <div class="demo-section k-header"> <div id="tabstrip" class="whatever"> <ul> <li class="k-state-active" style="width:18%;"> Hepsi </li> <li style="width:38%;"> En Beğenilenler </li> <li style="width:43%;"> En Çok İzlenenler </li> </ul> <div class="realContent" data-init="mobileListViewFiltering"> <ul id="filterable-listview" data-bind="mobileListViewFiltering" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template"> </ul> </div> <div class="realContent" data-init="mobileListViewFiltering"> <ul id="filterable-listview" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template"> </ul> </div> <div class="realContent" data-init="mobileListViewFiltering"> <ul id="filterable-listview" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template"> </ul> </div> </div> </div> <style scoped> #tabstrip { font-weight: lighter; font-size: 0.9em; line-height: 1; padding: 0; margin: 0; } </style> </div> <script> $(document).ready(function() { $("#tabstrip").kendoTabStrip({ animation: { open: { effects: "fadeIn" } } }); $(".realContent").height($(document).height()); }); </script> <script> function videoShow(e) { var dynoTitle = e.view.params.tit; var navbar = app.view() .header .find(".km-navbar") .data("kendoMobileNavBar"); navbar.title(dynoTitle); } </script> <script type="text/x-kendo-template" id="foo-template"> <img src="content/#=ProductID#.jpg" alt="#=ProductName# image" class="pullImage"/> <h3> #:ProductName# </h3> #:UnitsInStock# adet mevcut </script> <script> var i = 0; // datasource below is customized for demo purposes. function mobileListViewFiltering() { var foo = new kendo.data.DataSource({ transport: { read: { url: "http://demos.telerik.com/kendo-ui/service/Products", dataType: "jsonp" } }, requestStart: function() { kendo.ui.progress($("#products"), true); }, requestEnd: function() { kendo.ui.progress($("#products"), false); }, sort: { field:"ProductName", dir: "asc" }, pageSize: 100 }); $("#filterable-listview").kendoMobileListView({ dataSource: foo, template: $("#mobile-listview-filtering-template").text(), filterable: { field: "ProductName", operator: "startswith" }, endlessScroll: true }); } </script> </div> </body> </html>

Answer 1

Try putting your listView create script inside a tabStrip's show or activate (choose which one better fit in your case) event: 尝试将您的listView create脚本放入tabStrip的show或activate （选择哪种情况更适合您的情况）内：

$("#tabstrip").kendoTabStrip({
    animation:  {
        open: {
            effects: "fadeIn"
        }
    },
    activate: function(e) {
        mobileListViewFiltering(e.item);
    }
});

This will create your listView only when a tab is activated. 仅当选项卡被激活时，才会创建listView。

Tabstrip Kendo UI中的可过滤Listview

问题描述

1 个解决方案

解决方案1
0 2015-03-12 12:44:44

Tabstrip Kendo UI中的可过滤Listview

问题描述

1 个解决方案

解决方案1 0 2015-03-12 12:44:44

解决方案1
0 2015-03-12 12:44:44