Hiearchy details template - Load external html file

5 posts, 0 answers
  1. Jonathan Hylton
    Jonathan Hylton avatar
    20 posts
    Member since:
    Sep 2009

    Posted 10 Sep 2015 Link to this post

    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 

     

      

     

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 14 Sep 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Jonathan Hylton
    Jonathan Hylton avatar
    20 posts
    Member since:
    Sep 2009

    Posted 14 Sep 2015 Link to this post

    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>

  5. Jonathan Hylton
    Jonathan Hylton avatar
    20 posts
    Member since:
    Sep 2009

    Posted 14 Sep 2015 in reply to Nikolay Rusev Link to this post

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

  6. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 16 Sep 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready