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

Accessing Kendo UI elements from within tabstrip

6 Answers 149 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 03 Nov 2011, 07:49 AM
I am loading html in a tab as per the example.
eg. $(document).ready(function () {
                $("#tabstrip").kendoTabStrip({
                    contentUrls: [
                        'ajax/ajaxContent1.html',
etc.

In the ajaxContent1.html I would like to create a new Kendo UI widget say a treeview. Can this be done.  Also is it possible to execute javascript that is also contained in the  ajaxContent1.html file?

Thanks In Advance

Paul.

6 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 03 Nov 2011, 09:04 AM
Hi Paul,

If you have a script tag in the ajax loaded html, it will be executed on load (first tab selection). There is also a contentLoad event, which you can use to execute a handler when new content is loaded:
$("#tabStrip").kendoTabStrip({ contentLoad: function () {
    // Add your functionality here.
} });


Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Paul
Top achievements
Rank 1
answered on 03 Nov 2011, 10:25 AM
Hi Kamen,
Thanks for the quick reply.  The html I am loading is attached and it includes the relevant javascript but it is not being executed as I would expect.  ie.  The treeview is not being created.  All I see is the list of items can you see why?
TIA.

$(document).ready(function () {
                $("#tabstrip").kendoTabStrip({
                    contentUrls: [
                        'test.html'
                    ],
                    animation: false,
                    error: onError
                });
            });

-- TEST.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<link href="/Scripts/kendo/styles/kendo.common.css" rel="stylesheet" />
    <link href="/Scripts/kendo/styles/kendo.kendo.css" rel="stylesheet" />
    <!-- css -->
    <!-- script -->
    <script type="text/javascript" src="/Scripts/kendo/js/jquery.js"></script>
    <script type="text/javascript" src="/Scripts/kendo/js/kendo.core.js"></script>
    <script type="text/javascript" src="/Scripts/kendo/js/kendo.fx.js"></script>
    <script type="text/javascript" src="/Scripts/kendo/js/kendo.popup.js"></script>
    <script type="text/javascript" src="/Scripts/kendo/js/kendo.menu.js"></script>
    <script type="text/javascript" src="/Scripts/kendo/js/kendo.tabstrip.js"></script>
    <script type="text/javascript" src="/Scripts/kendo/js/kendo.treeview.js"></script>
</head>
<body>
<div>
    <h1>Test Page!!!</h1>
    <ul id="treeview">
            <li data-expanded="true">Item 1
                <ul>
                    <li>Item 1.1</li>
                    <li>Item 1.2</li>
                    <li>Item 1.3</li>
                </ul>
            </li>
            <li>Item 2
                <ul>
                    <li>Item 2.1</li>
                    <li>Item 2.2</li>
                    <li>Item 2.3</li>
                </ul>
            </li>
            <li>Item 3</li>
        </ul>
         <script type="text/javascript">
             $(document).ready(function () {
                 $("#treeview").kendoTreeView();
             });
        </script>
    </div>
</body>
</html>

0
Kamen Bundev
Telerik team
answered on 04 Nov 2011, 01:31 PM
Hello Paul,

Just tested your code and it seems to be working for me. Please make sure that the TreeView javascript is at the specified location and its javascript gets loaded at all.

Best wishes,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Paul
Top achievements
Rank 1
answered on 07 Nov 2011, 08:06 AM
Hi Kamen,

I have attached a sample web project which demostrates my problem.  It is a VS2010 web site and I am using IE 9. I would appreciate it if you could tell me what I am doing wrong.

Paul.
0
Kamen Bundev
Telerik team
answered on 08 Nov 2011, 09:25 AM
Hi Paul,

The problem is that you have a .k-content class set on the containers in your files and this class is used for the TabStrip content element and has display: none by default. We modified our styles to only affect direct descendants of the TabStrip, so it will be working in the next version. Meanwhile you can change these two rows in kendo.common.css from:
.k-tabstrip .k-content,
.k-panelbar .k-tabstrip .k-content

to
.k-tabstrip > .k-content,
.k-panelbar .k-tabstrip > .k-content


Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Paul
Top achievements
Rank 1
answered on 08 Nov 2011, 12:41 PM
Thanks Kamen that seems to have done the trick.  Looking forward to the released product.
Tags
TabStrip
Asked by
Paul
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Paul
Top achievements
Rank 1
Share this question
or