Кендо TabStrip и шаблоны кендо

Мне нужно динамически загружать разные шаблоны KENDO при каждом нажатии на вкладку Tabstrip. Источник данных для всех вкладок одинаковый. Я пытаюсь сделать это, как показано ниже, но это не работает. Посоветуйте пожалуйста.(Kendo TabStrip и Kendo Templates)

<div class="tabs-details-wrapper" id="Tab1">
    <ul>
        <li class="k-state-active" >Identification</li>
        <li>Planning</li>
        <li>Implementation</li>
        <li>Review</li>
        <li>Management Response</li>
    </ul>

    <div>
        <div class="row">
            <div class="col-xs-12 col-md-5">
                <div class="">
                    <div class="form-horizontal" ></div>
                </div>
            </div>
        </div>
    </div>

</div>

<script id="details-templateTab1" type="text/x-kendo-template">
    <div class="form-group">
        <label class="col-xs-12 col-md-4 control-label">Year of Completion</label>
        <div class="col-xs-12 col-md-8">
            <span class="control-readonly"></span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-12 col-md-4 control-label">Title</label>
            <div class="col-xs-12 col-md-8">
                <span class="control-readonly"></span>
            </div>
        </div>
    </script>
    <script id="details-templateTab2" type="text/x-kendo-template">

         <div class="form-group">
                <label class="col-xs-12 col-md-4 control-label">Hello1</label>
                <div class="col-xs-12 col-md-8">
                    <span class="control-readonly">
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-12 col-md-4 control-label">Title1</label>
                <div class="col-xs-12 col-md-8">
                    <span class="control-readonly">
                    </span>
                </div>
        </div>
    </script>


$(".tabs-details-wrapper").kendoTabStrip({
    select: function (e) {
        //var data = this.dataSource.at($(e.item).index());
        var templateSelector = ""
        // alert(e);
        if (e.item.innerText == "Identification") templateSelector = kendo.template($("#details-templateTab1").html())
        else templateSelector = kendo.template($("#details-templateTab2").html()) ;
        // alert(e.contentElement);

        //templateSelector = kendo.template($("#details-templateTab1").html());
        $(e.contentElement).html(templateSelector);
        // kendo.bind(e.contentElement, data);
        // $(e.contentElement).html(template(this.dataSource.at($(e.item.innerText).index())))
    },
                   // template: $("#details-templateTab1"),
                    animation: false
                    //dataSource: ds
                   // dataSource: ds,
});

kendo-tabstrip
person Neetu Patel    schedule 07.03.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я запустил jsBin, чтобы помочь с вашей проблемой. Когда я нажимаю на каждую вкладку, загружается контент, как вы описываете. У вас есть объект javascript источника данных для добавления в код?

Нужно больше информации, пожалуйста.

$(".tabs-details-wrapper").kendoTabStrip({
    select: function (e) {
        //var data = this.dataSource.at($(e.item).index());
        var templateSelector = ""
        // alert(e);
        if (e.item.innerText == "Identification") templateSelector = kendo.template($("#details-templateTab1").html())
        else templateSelector = kendo.template($("#details-templateTab2").html()) ;
        // alert(e.contentElement);

        //templateSelector = kendo.template($("#details-templateTab1").html());
        $(e.contentElement).html(templateSelector);
        // kendo.bind(e.contentElement, data);
        // $(e.contentElement).html(template(this.dataSource.at($(e.item.innerText).index())))
    },
                   // template: $("#details-templateTab1"),
                    animation: false
                    //dataSource: ds // what is your DS?
                   // dataSource: ds,
});
person Community    schedule 22.03.2017

arrow_upward
1
arrow_downward

Я думаю, проблема в том, что в вашем источнике данных вы не определяете «dataContentField». Как только я добавил это в сочетании с источником данных, я начал видеть динамические результаты от функции выбора.

Вот мой JavaScript

$(".tabs-details-wrapper").kendoTabStrip({
    select: function (e) {
            var templateSelector = ""
            if (e.item.innerText == "Identification") templateSelector = kendo.template($("#details-templateTab1").html())
            else templateSelector = kendo.template($("#details-templateTab2").html());
            $(e.contentElement).html(templateSelector(this.dataSource.at($(e.item).index())))
    },
    animation: false,
    dataTextField: "Name",
    dataContentField: "Content",
    dataSource: [
      { Name: "Identification", YearOfCompletion: "1998", Title: "This is first title", Content: "", customMessage: "This is custom message 1" },
      { Name: "Planning", YearOfCompletion: "1999", Title: "This is second title", Content: "", customMessage: "This is custom message 2" },
      { Name: "Implementation", YearOfCompletion: "2000", Title: "This is third title", Content: "", customMessage: "This is custom message 3" },
      { Name: "Review", YearOfCompletion: "2001", Title: "This is fourth title", Content: "", customMessage: "This is custom message 4" },
      { Name: "Management Response", YearOfCompletion: "2002", Title: "This is fifth title", Content: "", customMessage: "This is custom message 5" }
    ]

});

На самом деле не имело значения, что я поместил в свойство содержимого источника данных, потому что оно заменяется при выборе.

Вот мой html

<div class="tabs-details-wrapper" id="Tab1"></div>
<script id="details-templateTab1" type="text/x-kendo-template">
<div class="form-group">
    <label class="col-xs-12 col-md-4 control-label">Year of Completion</label>
    <div class="col-xs-12 col-md-8">
        <span class="control-readonly">#=YearOfCompletion#</span>
    </div>
</div>
<div class="form-group">
    <label class="col-xs-12 col-md-4 control-label">Title</label>
    <div class="col-xs-12 col-md-8">
        <span class="control-readonly">#=Title#</span>
    </div>
</div>
</script>
<script id="details-templateTab2" type="text/x-kendo-template">
<div class="form-group">
    <label class="col-xs-12 col-md-4 control-label">Hello1</label>
    <div class="col-xs-12 col-md-8">
        <span class="control-readonly">#=customMessage#</span>
    </div>
</div>
<div class="form-group">
    <label class="col-xs-12 col-md-4 control-label">Title1</label>
    <div class="col-xs-12 col-md-8">
        <span class="control-readonly">#=Title#</span>
    </div>
</div>
</script>

Это то, что вы ищете?

person John Dover    schedule 19.12.2017