Issues with dynamic tabstrip

1 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    2 posts
    Member since:
    Jul 2012

    Posted 31 Oct 2012 Link to this post

    I'm working on creating a fully dynamic tabstrip for use with a chat program I"m developing. So for example, I have a single button that every time it is pressed it creates a new tab in the tabstrip and sets the tab content to a partial view that will contain the chat list between me and tab1, tab2, tab3...

    My main issue at the moment is that the content of the tab is outside the borders of the tab that contains the partial view.  Here is everything I have up to this point.
    <div id="chatTabStrip"></div>
    <button onclick="buttonClick()">Create Tab</button>
     
    <script type="text/javascript">
        $(document).ready(function () {
            $("#chatTabStrip").kendoTabStrip({
                animation: {
                    open: {
                        effects: false
                    }
                }
            }).data("kendoTabStrip");
     
            function buttonClick() {
                var tabStrip = $("#chatTabStrip").data("kendoTabStrip");
     
                if (tabStrip == null) {
                    tabStrip = $("#chatTabStrip").kendoTabStrip({
                        animation: {
                            open: { effects: false }
                        }
                    }).data("kendoTabStrip");
                }
     
                $.ajax({
                    url: '@Url.Action("GetTabPartialView", "Chat", new { area = "Chat" })',
                    type: 'GET',
                    success: function (result) {
                        tabStrip.append({ text: node.Text, content: result });
                        tabStrip.select(tabStrip.tabGroup.children("li:last"));
                    }
                });
            }
        });
    </script>

    If the animation isn't included and kendoTabStrip() are used the tabstrip isn't generate. Causing the following line to be null:
    var tabStrip = $("#chatTabStrip").data("kendoTabStrip");

    My first attempt was to not have the ajax call but to just use the following. The following lines would never render the content.
    tabStrip.append({ text: Text, contentUrl: "TabPartialView.cshtml" });
    tabStrip.select(tabStrip.tabGroup.children("li:last"));

    I still haven't addressed how I will get the content of each specific chat thread into the correct tab's list.

    Thanks,
Back to Top