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:

this

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

Any suggestions?

Let me see if I get your right: You want to add a new tab dynamically when "Append" is pressed under the name of the text input value. This new tab must have the contents of a partial view(always the same?). Right? — DontVoteMeDown
yes. I want the 'Index' to appear as default (for now, anyway) — jbutler483
Well, you can load a view async using contentURl parameter, but a request will open the get the view everytime, but its quite simple. Check this out. — DontVoteMeDown
I've already seen that. Doesn't seem to work too well. (1) Cause i'm using Local host to test, it doesn't like that and (2) it doesn't seem tp support tilde's inorder to show a relative path :L — jbutler483
What you can do is to create the tab and in the content you set just a div. Then in that div you use jquery's load() function to get your partial. We have some code working like that. — DontVoteMeDown

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2014-11-12T11:37:10

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:

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;
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;
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.

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

1 Answers