Как прикрепить событие с вкладкой кендо? - PullRequest
Новая
       3

Как прикрепить событие с вкладкой кендо?

0 голосов
/ 23 марта 2020

У меня есть вкладка кендо и элемент div (сетка кендо прикреплена к этой сетке). Я хочу скрыть сетку всякий раз, когда какая-либо из вкладок активна. Когда вкладки свернуты, я хочу снова показать сетку. Вот что я сделал: 

<!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>

Я могу скрыть сетку при нажатии вкладки, но как я могу показать сетку обратно, когда вкладки свернуты?

1 Ответ

1 голос
/ 24 марта 2020

Первое, что приходит мне в голову, - это использовать 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...

Рабочий пример: Показать сетку на свертке вкладок

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...