Rendering a Partial View is writing over the TabStrip

Question

Why is this overwriting the TabStrip and placing the partial view on top of the TabStrip and not putting it inside one of the tabs? I am trying to grab the selected item from a treeview and be able to view a partial view in the tabstrip and have it update as the selection on the treeview changes. It renders the listview correctly and filters correctly, but now the whole tab control is overwritten by the 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>

I had to make a ajax call!

Answer 1

Despite that you do not say what is #ContactsTabStrip from the result I guess that it is the identifier of the Tab and not of the body.

Anyway, you don't need to give it a name, you just need to get it from the event argument received in you select handler. Something like this:

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);
    });
}

EDIT: If you want to change the content of a Tab different than the selected then first thing is find the index of this tab and then use contentElement for accessing the element.

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);
    });
}