How to attach event with a kendo tabstrip?
Question
I have a kendo tabstrip and a div element (a kendo grid is attached to this grid). 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?
1 answers
solution1
1 ACCPTED 2020-03-24 11:11:24
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:
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.