Add new tabs to tabstrip with chat widget in them

[n/a]

Hello I would like to know if there is a way to add new tabs to a tab strip via a button that contain a kendo chat widget inside the tab?

I have seen examples of how to open new tabs with a button and I have also been able to have a chat widget inside of a tab but I cannot get them to work together.

Is this possible?

[Plamen]

Hi,

I have created a sample dojo where a new tab is added to Kendo Tabstrip and a Kenod Chat is initiated in it. Please review it and let me know if you have further questions.

Regards,
Plamen
Progress Telerik

[n/a]

Thank you for the example, unfortunately it does not seem to be working correctly. Here are a few screenshots with an explanation of what is happening. When creating the new chat it works fine on the first create, after the first one the next tabs are created empty and the chat that is supposed to be in the new tabs is put into the very first chat tab that was created. I believe this to be a problem with the div id that is created each time being the same. I will test with a different div id each time.

 

 

[n/a]

After having tested with new javascript, it is working with changing the div id each time. Here is the code I changed:

var x = 1;<br>$("#tabstrip").kendoTabStrip();<br>function AddTab() {<br>    var tabStrip = $("#tabstrip").data("kendoTabStrip");<br>    tabStrip.append({ text: "Chat", content: "<div id=" + x.toString() + "></div>" });<br>    tabStrip.select((tabStrip.tabGroup.children("li").length - 1));<br>    $("#" + x.toString()).kendoChat({<br>        toolbar: {<br>            toggleable: true,<br>            buttons: [<br>                { name: "sendimage", iconClass: "k-icon k-i-image" }<br>            ]<br>        }<br>    }).data("kendoChat");<br>    x = x+1;<br>}

[n/a]

Sorry that formatted horribly, try this.

 

var x = 1;
$("#tabstrip").kendoTabStrip();
function AddTab() {
    var tabStrip = $("#tabstrip").data("kendoTabStrip");
    tabStrip.append({ text: "Chat", content: "<div id=" + x.toString() + "></div>" });
    tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
    $("#" + x.toString()).kendoChat({
        toolbar: {
            toggleable: true,
            buttons: [
                { name: "sendimage", iconClass: "k-icon k-i-image" }
            ]
        }
    }).data("kendoChat");
    x = x+1;
}

[Plamen]

Hi,

In this case we can also use kendo.guid to set a new id as for example it is done in this dojo.

Regards,
Plamen
Progress Telerik