Duplication of content in TabStrip (When i load content in TabStrip and create dynamic tabs )

[Prakash Kumar Nambi]

1. loading the existing Tabs

@helper RenderPCGTab(List<PCGTabModel> PCGs)
{
    <a id="add-button">Add new PCG</a>
    <div style="width:100%; height:auto;">
        @(Html.Kendo().TabStrip()
        .Name("PCGTabStrip").HtmlAttributes(new { style = "width:100%;" })
        .Items(items =>
        {
            var index = 0;
            foreach (PCGTabModel PCG in PCGs)
            {
                items.Add()
                .Text("PCG <button id='btn'" + index + " data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
                .Encoded(false)
                .Content(@<text>@(Html.Partial("_PCGForm", PCG, new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "PCG" } }))</text>);
                index++;
            }
        }))
    </div>
}

2.     </table>
<tr>
<td colspan="4">
@RenderPCGTab(Model.PCGTab)
</td>
</tr>
</table>

3. Script - to add dynamicic tabs

         $('#add-button').kendoButton({
            click: function () {
                var tabstrip = $('#PCGTabStrip').kendoTabStrip();
                validateCount = tabstrip.length;
                var index = validateCount;
                tabstrip.append([{
                    text: '<a>PCG <button id="btn' + index + '" data-type="remove" class="k-button k-button-icon deleteAll" onclick="deleteMe(this)"><span class="k-icon k-i-close"></span></button></a>',
                    encoded: false,
                    contentUrl: "@Url.Content("~/Home/_PCGTab?tabId=")" + index + ""
                }]);
            }
        });

4. Partial view action method

public ActionResult _PCGTab(int tabId)
        {
            PCGTabModel model = model = new PCGTabModel() { PCGTabId = tabId, IsWhollyEntity = null };          
            return PartialView("_PCGForm", model);
        }

5. Problem am facing

1.When i add a new tab and click on the existing tab , in the existing tab the content is getting duplicated i,e the whole content is getting duplicaated
2.If am not adding any new tab, if i click on any existing tab i dont have issue

[Dimitar]

Hello Prakash Kumar Nambi,

From the provided code snippet I can see that the RenderPCGTab helper method is initializing the TabStrip with the Tabstrip HtmlHelper as follows:

@(Html.Kendo().TabStrip()
  ...
)

What the above does is insert the HTML markup on the page and and also add the initialization script for the component. However, I noticed that the code in step 3. actually re-initializes the widget with the following code:

 var tabstrip = $('#PCGTabStrip').kendoTabStrip();

Instead, what you should do in order to dynamically add a new tab is to just retrieve the already initialized component reference and utilize the append() method as you would:

 click: function () {
  var tabstrip = $('#PCGTabStrip').getKendoTabStrip();
  ...
  tabstrip.append([{ ... }]);
}

I hope this helps.

Regards,
Dimitar
Progress Telerik

[Prakash Kumar Nambi]

Thank a lot!

it works.

[Prakash Kumar Nambi]

Hi Dimitar,

When i press enter key in the dynamically generated tab am losing all the content of the tabs.

what i should do now?.

[Dimitar]

Hello Prakash Kumar Nambi,

From the provided screenshot I can see that there is a close button added to each tab. Could you verify that when pressing the 'Enter' key, the logic for removing the tab is executed ? If that is the case, I would suggest preventing this behavior in the respective deleteMe() handler.

Regards,
Dimitar
Progress Telerik

[Prakash Kumar Nambi]

function deleteMe(param) {
    var tabstrip = $("#PCGTabStrip").getKendoTabStrip();
    var item = $(param).closest(".k-item")
    tabstrip.remove(item.index());
    validateCount--;
}

Yes , this method is getting called when i press the "enter" key

can you please help me , how to avoid the calling this method when i press the "enter" key?.

[Dimitar]

Hello Prakash Kumar Nambi,

In general, the TabStrip does not have a built-in 'Enter' handler. Taking this into consideration, if there is custom logic for handling 'Enter' keydown on the page, it should be modified accordingly to not being activated when the delete button is pressed.

Another alternatives that you can try:

1) Add tabindex="-1" to prevent the detele button from being focusable.

2) Change the delete button element to <span>

Regards,
Dimitar
Progress Telerik

[Prakash Kumar Nambi]

Thanks a lot,

it works. :)