Home/ Questions/Q 9117183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:50:49+00:00

I am attempting to create a set of partial html documents that will be

  • 0

I am attempting to create a set of partial html documents that will be inserted on a html page using the Kendo UI tabstrip. Each partial html document will contain the controls that will appear in each tab. In these partial html documents, I am attempting to bind the controls to a view model object using Knockout JS.

When I load the page, it does not appear that controls are binding to the view model. When I copy the tags in the partial html documents into the main page, the binding works.

Is it possible to load these controls using the dynamic loading functionality of kendo ui tab strip?

Here is some sample code I am using:

Main Page:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <script src="../Scripts/jquery-1.8.3.min.js"></script>
    <script src="../Scripts/knockout-2.2.0.js"></script>
    <script src="../Scripts/KendoUI/kendo.all.min.js"></script>
    <script src="../Scripts/ViewModels/EndorsementViewModel.js" defer="defer"></script>

    <link href="../Stylesheets/KendoUI/kendo.common.min.css" rel="stylesheet" />
    <link href="../Stylesheets/KendoUI/kendo.metro.min.css" rel="stylesheet" />
</head>
<body>

        <div>
            <div id="tabStrip">

            </div>
        </div>

</body>
</html>
<script>
    $(document).ready(function () {
        InitialKendoControls();

    });

    function InitialKendoControls() {
        InitialKendoTabStrip();
    }

    function InitialKendoTabStrip() {

        var tabstrip = $("#tabStrip").kendoTabStrip(
            {
                dataTextField: "text",
                dataContentField: "content",
                dataUrlField: "url",
                dataContentUrlField: "contentUrl",
                dataSource:
                [

                    {
                        text: "TestTab",
                        contentUrl: "../TestEndorsement/TestTab.html"
                    }
                ]
            }
            ).data("kendoTabStrip");

    }
</script>

Partial HTML:

<div>
    <span>Enter something</span><input data-bind="value: testValue" /><br />
    <button data-bind="click: testClick">Click Me</button>
</div>

View Model:

function EndorsementViewModel()
{
    this.testValue = ko.observable("Test Value");

    this.testClick = function () { alert(this.testValue()); };
}
ko.applyBindings(new EndorsementViewModel());
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use this contentLoad event to execute the logic which apply your bindings (currently you use the document read event). If that Html part is still not loaded the binding wont work for sure.

    • 0