How to Render a Partial View within a Telerik TabStrip control?

Question

Beyond confused with Telerik's documentation here.

I have a TabStrip Control, taken and slightly adapted from Telerik's example:

<button id="actuallyClose" class="removeItem k-button" style="visibility:hidden">X</button>
<div id="tabstrip">
    <ul>
        <li id="open" class="k-button">Add +</li>
    </ul>

    <div>
        Please Complete The following:
        <br />
        Tab name: <input id="newTabName" type="text" />
        <button class="appendItem k-button">Append</button>
    </div>

</div>

With the Javascript being:

        $(document).ready(function () {
            var getItem = function (target) {
                var itemIndex = target[0].value;

                return tabStrip.tabGroup.children("li").eq(itemIndex);
            },
            select = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                    tabStrip.select(getItem($("#tabIndex")));
            },
            append = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                    tabStrip.append({
                        encoded:false,
                        text: $("#newTabName").val() + '<button onclick="; actuallyClose.click();">X</button>',
                        encoded:false,
                        content: "<div><br/></div>", /*would like to render a view here!!!*/
                        spriteCssClass: "tabCloseBtn",
                    }

                    );
            },

          ...

            $(".removeItem").click(function (e) {
                var tab = tabStrip.select(),
                otherTab = tab.next();
                otherTab = otherTab.length ? otherTab : tab.prev();

                tabStrip.remove(tab);
                tabStrip.select(otherTab);
            });

         ...

            $(".appendItem").click(append);
            $("#appendText").keypress(append);

          ...
        });

        var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");



        $("#tabstrip").kendoTabStrip({
            animation: {
                // fade-out current tab over 1000 milliseconds
                close: {
                    duration: 1000,
                    effects: "fadeOut"
                },
                // fade-in new tab over 500 milliseconds
                open: {
                    duration: 500,
                    height: "100%",
                    width: "96%",
                    effects: "fadeIn"
                }
            }
        });

    </script>

I am completely confused about how to add/render a partial view within this 'added' tab.

I wish to render the View '(Index, Home)' for example.

However, I can't seem to find the answer ANYWHERE :(

The closest I've found was:

LoadContentFrom(@Html.Action("Index", "MyController")),

as described here - but I still get the OP's problem.

I think i need to declare something in this script:

         append = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                    tabStrip.append({
                        encoded:false,
                        text: $("#newTabName").val() + '<button onclick="; actuallyClose.click();">X</button>',
                        encoded:false,
                        content: "<div><br/></div>", /*would like to render a view here!!!*/
                        spriteCssClass: "tabCloseBtn",
                    }
                    );
            },

My current design is:

I would like to have a default 'index' view appear under the 'New Tab Name' tab (once append button is pressed)

Any suggestions?

Answer 1

Try using jQuery's load() to render your partial:

var tabCounter = 1; // A global variable or anything like it

append = function (e) {
    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
    {
        tabStrip.append({
            encoded:false,
            text: $("#newTabName").val() + '<button onclick="; actuallyClose.click();">X</button>',
            encoded:false,
            content: "<div id='tab" + tabCounter + "'></div>", 
            spriteCssClass: "tabCloseBtn",
        });

        $("#tab" + tabCounter).load("url/goes/here", function()
        {
            // Load Complete
            tabCounter++;
        }
    }
},

Negative points:

1. It is not the ideal solution but I already had problems with that content properties to load asyn content too. But I'm afraid that kendo may use the jQuery load() function behind the scenes since it uses jQuery's ajax api as well;

2. The view content will be load everytime. I don't know if the content can be load only once and then, reused, must search for it;

3. If the view load take much time than expected, user can try to see the tab and face a blank content. A loading image could be helpful.