This is a migrated thread and some comments may be shown as answers.

Hiearchy details template - Load external html file

4 Answers 149 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jonathan Hylton
Top achievements
Rank 1
Jonathan Hylton asked on 10 Sep 2015, 02:00 PM

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

Sort by
0
Nikolay Rusev
Telerik team
answered on 14 Sep 2015, 06:38 AM

Hello Jonathan Hylton,

 

Seems to be working here - http://dojo.telerik.com/@rusev/eKEbu

 

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jonathan Hylton
Top achievements
Rank 1
answered on 14 Sep 2015, 10:23 AM

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>

0
Jonathan Hylton
Top achievements
Rank 1
answered on 14 Sep 2015, 10:46 AM

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

0
Nikolay Rusev
Telerik team
answered on 16 Sep 2015, 07:13 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Jonathan Hylton
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Jonathan Hylton
Top achievements
Rank 1
Share this question
or