tabstrip onclick
HTML
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
<ul>
<li class="k-state-active">
Orders
</li>
<li>
Contact Information
</li>
</ul>
<div>
<div class="orders"></div>
</div>
<div>
<div class='employee-details'>
<ul>
<li><label>Country:</label>#= Country #</li>
<li><label>City:</label>#= City #</li>
<li><label>Address:</label>#= Address #</li>
<li><label>Home Phone:</label>#= HomePhone #</li>
</ul>
</div>
</div>
</div>
</script>
CSS
.employee-details ul
{
list-style:none;
font-style:italic;
margin-bottom: 20px;
}
.employee-details label
{
display:inline-block;
width:90px;
font-style:normal;
font-weight:bold;
}
JavaScript
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
pageSize: 9,
serverPaging: true,
serverSorting: true
},
height: 1000,
sortable: true,
pageable: true,
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name"},
{
field: "LastName",
title: "Last Name"},
{
field: "Country"},
{
field: "City"},
{
field: "Title"}
]
});
});
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
//hook up to the click event of the tabs
detailRow.find(".k-item").click(function() {
alert("click");
});
detailRow.find(".orders").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 6,
filter: {
field: "EmployeeID",
operator: "eq",
value: e.data.EmployeeID
}
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{
field: "OrderID",
width: 70},
{
field: "ShipCountry",
title:...