Kendo UI Tabstrip: Tab должен отображать сетку после нажатия на кнопку внутри этой вкладки - PullRequest
Новая
       14

Kendo UI Tabstrip: Tab должен отображать сетку после нажатия на кнопку внутри этой вкладки

1 голос
/ 07 января 2020

У меня есть вкладка с двумя вкладками. На первой вкладке у меня есть кнопка с именем «Показать сетку». После нажатия этой кнопки будет отображаться сетка вместе с кнопкой возврата на go, чтобы вернуться к предыдущему виду, который содержал только кнопку «показать сетку». Проблема в том, как я могу go вернуться с помощью этой кнопки назад? 

<body>

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

<script>


  function grid() {
    $("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ]
  }
});
  }

  var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

   $(".k-button").one("click", function() {
     $("#button1").append('<button>Click</button>');
     grid();
     });

</script>
</body>

1 Ответ

0 голосов
/ 08 января 2020

Попробуйте это , в этом примере я использовал ту же кнопку, однако, следуя той же логике c, вы можете создать новую, сохраняя обе 

var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
  var flag = true;
 

 
    $("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ]
  }
}).hide();
  

  
$(".k-button").click(function () {
   if(flag === true){
    $("#grid").show();
    $(".k-button").text("Remove grid");
     flag = false;
  } else {
    $("#grid").hide();
    $(".k-button").text("Show grid");
    flag = true;
  }
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
 
  <style>
    .k-edit-form-container { width: 500px;}
    .k-popup-edit-form .k-edit-label { width: 20%; text-align: left; }
    .k-popup-edit-form .k-edit-field { width: 70%; }
    .k-popup-edit-form .k-edit-field > .k-textbox, 
    .k-popup-edit-form .k-edit-field > .k-widget:not(.k-tooltip)
    { width: 98%; }
  </style>
</head>
<body>

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


</body>
</html>
...