渲染部分视图正在TabStrip上书写

Question

为什么这会覆盖TabStrip并将部分视图放在TabStrip的顶部，而不是将其放在其中一个选项卡中？ 我正在尝试从树视图中获取选定的项目，并能够在选项卡中查看局部视图，并使其随着树视图上的选择更改而更新。 它可以正确呈现listview并正确过滤，但是现在整个选项卡控件都被listview覆盖！！！！

<script>
    var treeview;
    $(document).ready(function () {
        treeview = $("#treeview").data("kendoTreeView");
    });
    function select(e) {

        var selectedbook = $(e.node).data("bookid");

        var tabstrip =
        $.get('@Url.Action("Index", "ListView")',
            { id: selectedbook }, function (data) {
                $("#ContactsTabStrip").html(data);
            });
    }
</script>

我不得不打一个ajax电话！

Answer 1

尽管您没有从结果中说出#ContactsTabStrip是什么，但我猜它是Tab的标识符，而不是主体的标识符。

无论如何，您无需为其命名，只需从select处理程序中接收到的事件参数中获取它即可。 像这样：

function select(e) {
    var selectedbook = $(e.node).data("bookid");

    // Get a reference to the content from the event
    var content = e.contentElement;

    $.get('@Url.Action("Index", "ListView")', { id: selectedbook }, function (data) {
        // Set data
        item.html(data);
    });
}

编辑：如果要更改选项卡的内容与所选内容不同，那么首先要找到该选项卡的索引，然后使用contentElement来访问元素。

function select(e) {
    var selectedbook = $(e.node).data("bookid");

    $.get('@Url.Action("Index", "ListView")', { id: selectedbook }, function (data) {
        // Get a reference to the tabStrip
        var tabStrip = $("#tabStrip").data("kendoTabStrip");
        // Find the index of the element to be changed
        var idx = tabStrip.tabGroup.find("#ContactsTabStrip").index();
        // Use contentElement function for changing the content
        $(tabStrip.contentElement(idx)).html(data);
    });
}