Tab content showing in other tabs when dynamically added

[Andrew]

Good Afternoon,

Not sure why this is happening but hope somebody can help.

I need to add tabs dynamically which works ok but once they are added I can see it's content in the tabs that already existed. It's definitely the new tab's content as when I change the options in one tab, the changes are reflected in the other tabs. My code is below and I have attached some screenshots also. I would be really grateful for any assistance.

<button type="button" class="btn btn-success" id="myButton">Add New Job</button>

 <p></p>     
@(Html.Kendo().TabStrip()
              .Name("tabstrip")              
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("1: BAIC13 ")
                      .Selected(true)
                      .LoadContentFrom(Url.Action("Job1", "Test"));
                  tabstrip.Add().Text("OPERATORS")
                      .LoadContentFrom(Url.Action("Operators", "Test"));
              })             
)
    </div>

<script>
 
    $(document).ready(function () {
        $("#myButton").click(function () {
            var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
            var lastIndex = tabStrip.tabGroup.children("li:last").index();
            tabStrip.insertBefore(
                    {
                        text: "New Tab",
                        contentUrl: '@Url.Action("AddJob", "Test")'          
                    },
                    tabStrip.tabGroup.children("li:last")
            );
            tabStrip.select(lastIndex);
        });
    });    
</script>

 

 

 

[Dimitar]

Hello,

I would suggest you to take a look at the TabStrip API demo, which shows how you could add tabs at different locations. On examining the code provided and the screenshots, my suggestion is that you might pass a wrong index when adding the content and thus your new tab has index 1, but the content is given the index of the next tab and that is why it appears in it.

Regards,
Dimitar
Telerik by Progress