How to add TabStrip in Layout and create dynamic tabs

[Adil]

Hi All

I have an idea i want to create a web page with Tabstrip and Layout page will be tabstrip , when i select new page from menu it will create new Tab and show view inside that and if its created no need to destroy and create again?

 

Is it possible to do this with Kendo TabStrip ?

Thanks

[Nencho]

Hello, Adil,

Yes, the described scenario is feasible with the Kendo TabStrip and Menu. The implementation could be achieved using the rich ClientAPI of the components.

Having in mind the described scenario, the following steps should apply:

1. Handle the select even of the Menu, where you can get the currently selected item.
2. Get a reference to the TabStrip and loop the items collection, in order to check of certain item already exists:
   https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/items
3. If it doesn't, you can use the append method of the TabStrip, in order to add the new tab:
   https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/append

In addition, you may find the following forum resources helpful, where the dynamical adding and removing tabs in the TabStrip are discussed (regardless that you use Telerik UI for MVC the implementation requires client-side implementation):

https://www.telerik.com/forums/example-of-dynamically-adding-removing-tabs

https://stackoverflow.com/questions/56723400/dynamically-adding-html-files-as-tabs-to-kendo-tabstrip

Hope this information would help.

Regards,
Nencho
Progress Telerik

[Adil]

Dear Nencho,

Thank you for your support

I can create now new tabs dynamically but i have one problem too.... 

When i create new tab and select that one i saw that new tab content also in first tab....

Here how i add tabs

tabstrip.append({
            text: "new",
            encoded: false,
            contentUrl: myurl,
        });

 

Why i can get bug like this??

[Nencho]

Hello, Adil,

I am afraid that I can hardly guess the reason for the described behavior. That said, I would suggest submitting a support ticket, along with a runnable sample attached. This way, we could examine the entire implementation, revise the issue and pin down the reason for it.

Regards,
Nencho
Progress Telerik