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