Rank 1
Hi there,
i am looking to load an external html page into the tab of a details template. this seems pretty strait forward to do if it is a just a regular tabstrip however when the tabstrip is a template, i cant seem to get this to work:
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
<ul>
<li class="k-state-active">
Details
</li>
</ul>
<div>
<div class="statuspage">
<div class="content"></content>
</div>
</div>
</div>
</script>
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
dataTextField: "text",
dataContentField: "content",
dataUrlField: "url",
dataContentUrlField: "contentUrl",
dataSource: [{
text: "Build Output",
content: "This displays content IF i press the tab",
contentUrl: "http://doesnt work."
}]
});
}
i will need to app the url as demonstrated in the demo. e.data.poperty
thanks!
Jonathan
4 Answers, 1 is accepted
Hello Jonathan Hylton,
Seems to be working here - http://dojo.telerik.com/@rusev/eKEbu
Regards,
Nikolay Rusev
Telerik
Rank 1
Interesting, copying for the most part exactly what you have there it still doesnt work for me:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../styles/kendo.default.min.css" rel="stylesheet" />
<link href="../styles/GridData.css" rel="stylesheet" />
<script>
function AccessParentLabel(txt) { var par = window.parent; par.updateLabel(txt); }
</script>
</head>
<body onload="AccessParentLabel('Build status')">
<script src="../Scripts/jquery-2.1.4.min.js"></script>
<script src="../Scripts/Kendo/kendo.web.min.js"></script>
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
</div>
</script>
<script>
$(document).ready(function () {
var element = $("#grid").kendoGrid({
columns: [
{ field: "Product", title: "Product" },
{ field: "Project", title: "Project" },
{ field: "ProjectBranch", title: "Branch" },
{ field: "BuildId", title: "Build" },
{ field: "ChangeList", title: "ChangeList" },
{ field: "Machine", title: "Machine" },
{ field: "Type", title: "Type" },
{ field: "Diffs", title: "Dfs" },
{ field: "Errors", title: "Err" },
{ field: "Warnings", title: "Wrn" },
{ field: "Started", title: "Started" },
{ field: "Ended", title: "Ended" },
{ field: "Status", title: "Status" }
],
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function () {
this.tbody.find("tr.k-master-row").first();
},
dataSource: {
transport: {
read: "../api/build",
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
schema: {
data: "Data",
total: "Count"
}
}
});
});
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
},
dataTextField: "Name",
dataContentUrlField: "ContentUrl",
dataSource: [
{ Name: "Tab1", ContentUrl: "http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html" },
{ Name: "Tab2", ContentUrl: "http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent2.html" }
]
});
detailRow.find(".tabstrip").data("kendoTabStrip").select(0);
}
</script>
</body>
</html>
​
Rank 1
interesting,
i still cant get this to work. I have even gone as far as copying this out of the dojo letter for letter (except the references) and it still isnt working:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../styles/kendo.default.min.css" rel="stylesheet" />
<%-- <link href="../styles/GridData.css" rel="stylesheet" />--%>
</head>
<body>
<script src="../Scripts/jquery-2.1.4.min.js"></script>
<script src="../Scripts/Kendo/kendo.all.min.js"></script>
<script src="../Scripts/Kendo/jszip.min.js"></script>
<script src="../Scripts/Kendo/angular.min.js"></script>
<div id="example">
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
</div>
</script>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 20,
serverPaging: true,
serverSorting: true
},
height: 550,
sortable: true,
pageable: false,
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",
width: "120px"
},
{
field: "LastName",
title: "Last Name",
width: "120px"
},
{
field: "Country",
width: "120px"
},
{
field: "City",
width: "120px"
},
{
field: "Title"
}
]
});
});
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
},
dataTextField: "Name",
dataContentUrlField: "ContentUrl",
dataSource: [
{ Name: "Tab1", ContentUrl: "http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html" },
{ Name: "Tab2", ContentUrl: "http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent2.html" }
]
});
detailRow.find(".tabstrip").data("kendoTabStrip").select(1);
}
</script>
<style>
.k-detail-cell .k-tabstrip .k-content {
padding: 0.2em;
}
.employee-details ul
{
list-style:none;
font-style:italic;
margin: 15px;
padding: 0;
}
.employee-details ul li
{
margin: 0;
line-height: 1.7em;
}
.employee-details label
{
display:inline-block;
width:90px;
padding-right: 10px;
text-align: right;
font-style:normal;
font-weight:bold;
}
</style>
</div>
</body>
</html>​
Hello Jonathan Hylton,
Have in mind that the TabStrip will execute AJAX request to download the content of the tab and that request might fail or be rejected due to CORS. Maybe that is the reason for not seeing the content of the selected tab.
Regards,
Nikolay Rusev
Telerik