This is a migrated thread and some comments may be shown as answers.
Add new tabs to tabstrip with chat widget in them
5 Answers 22 Views
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 28 Dec 2018, 08:56 PM

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?

5 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 01 Jan 2019, 12:47 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
n/a
Top achievements
Rank 1
answered on 02 Jan 2019, 01:17 PM

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.

 

 

0
n/a
Top achievements
Rank 1
answered on 02 Jan 2019, 02:11 PM
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>}
0
n/a
Top achievements
Rank 1
answered on 02 Jan 2019, 02:12 PM

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

0
Plamen
Telerik team
answered on 03 Jan 2019, 07:18 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
n/a
Top achievements
Rank 1
Answers by
Plamen
Telerik team
n/a
Top achievements
Rank 1
Share this question
or