如何使用剑道标签附加事件？

Question

I have a kendo tabstrip and a div element (a kendo grid is attached to this grid).我有一个剑道选项卡和一个 div 元素（剑道网格附加到这个网格）。 I want to hide the grid whenever any of the tabs are active.每当任何选项卡处于活动状态时，我都想隐藏网格。 When the tabs are collapsed I want to show the grid again.当标签折叠时，我想再次显示网格。 Here's what I have done:这是我所做的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>
<body>

<div id="tabstrip">
  <ul>
    <li id="tab1">Tab 1</li>
    <li id="tab2">Tab 2</li>
  </ul>
  <div>
    <button class='k-button'>Select second tab</button>
  </div>
  <div>Content 2</div>
</div>
  <div id=grid></div>

<script>

   var grid = $("#grid").kendoGrid({
     dataSource: {
       data: [
         {name: "John", age: "20"}
       ]
     }
}).data("kendoGrid");

    var onActivate = function(e) {
    console.log(e.item.id);
    if(e.item.id === "tab1" || e.item.id === "tab2"){
        $("#grid").hide();
    }
  }

  var tabStrip = $("#tabstrip").kendoTabStrip({
    activate: onActivate,
     collapsible: true,
                animation: {
                    open:{
                        effects: "fade"
                    }
                }
  }).data("kendoTabStrip");

</script>
</body>
</html>

I am able to hide the grid on tab click, but how can I show the grid back whenever the tabs are collapsed?我可以在单击选项卡时隐藏网格，但是如何在选项卡折叠时显示网格？

Answer 1

The first thing that crosses my mind is to use select and check if there is active tabs, it there is no active tabs show grid, otherwise hide it, something like this:我想到的第一件事是使用select并检查是否有活动标签，没有活动标签显示网格，否则将其隐藏，如下所示：

var tabStrip = $("#tabstrip").kendoTabStrip({
  select: function(e) {
    setTimeout(function(){
      var active = $(".k-state-active").length;
      if(active) {
        $("#grid").hide();
      } else {
        $("#grid").show();
      }
    }, 0);

  }, 
  collapsible: true...

Working example: Show grid on tab collapse工作示例：在选项卡折叠时显示网格

如何使用剑道标签附加事件？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-24 11:11:24

如何使用剑道标签附加事件？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-24 11:11:24

解决方案1
1 已采纳 2020-03-24 11:11:24