任何人都可以给我一个关于listview点击并保持Kendo UI事件的示例,以弹出一些选项

时间:2015-04-23 10:13:59

标签: jquery kendo-ui kendo-grid kendo-mobile kendo-dataviz

Listview在Kendo UI中点击并按住事件,弹出一些选项,如删除,编辑和更新现有列表视图我做了一些事情,但没有工作无法弹出按钮。 http://jsbin.com/egasev/9/edit

                                                                 JS Bin                                                            

  <script type="text/x-kendo-template" id="customListViewTemplate">
    <a data-role="touch" data-tap="onTap" data-hold="onHold" data-touchstart="onTouchStart" data-custom-id="${data.uid}">
      <b>${name}</b>
    </a>
  </script>
  <script>
    var groupedData = [
        { name: "Sashimi Salad", description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.", letter: "S" },
        { name: "Seaweed Salad", description: "A nice seaweed salad.", letter: "S" },
        { name: "Edamame", description: "Boiled soy beans with salt.", letter: "E" },
        { name: "Maguro", description: "Tuna pieces.", letter: "M" },
        { name: "Tekka Maki", description: "Tuna roll with wasabi.", letter: "T" },
        { name: "California Rolls", description: "Crab sticks, avocado and cucumber.", letter: "C" }
    ];

    function mobileListViewTemplatesInit() {
      $("#custom-listview").kendoMobileListView({
          dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter" }),
            template: $("#customListViewTemplate").html(),
            headerTemplate: "<h2>Letter ${value}</h2>"
      });
    }
  </script>
  <script>
    var hold;
    function onTouchStart(e) {
      hold = false; 
    }

    function onTap(e) {
      if (!hold) {
        alert('tap');
      }
    }

    function onHold(e) {
      hold = true; 
      alert('hold');
      $("#companyActionsList").data("kendoMobileActionSheet").open();
    }
    window.kendoMobileApplication = new kendo.mobile.Application(document.body);
  </script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

如何为您的剑道ActionSheet添加选项的示例:

<ul data-role="actionsheet" id="companyActionsList" data-cancel="Annuleren">
  <li><a>Option 1</a></li>
  <li><a>Option 2</a></li>
</ul>