This is a migrated thread and some comments may be shown as answers.

Issues with dynamic tabstrip

0 Answers 107 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 31 Oct 2012, 09:52 PM
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,

No answers yet. Maybe you can help?

Tags
TabStrip
Asked by
Jeremy
Top achievements
Rank 1
Share this question
or