This is a migrated thread and some comments may be shown as answers.

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

7 Answers 91 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Prakash Kumar Nambi
Top achievements
Rank 1
Prakash Kumar Nambi asked on 09 Jul 2020, 11:50 AM
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











7 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 13 Jul 2020, 05:35 AM

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

0
Prakash Kumar Nambi
Top achievements
Rank 1
answered on 13 Jul 2020, 05:19 PM

Thank a lot!

it works.

0
Prakash Kumar Nambi
Top achievements
Rank 1
answered on 17 Aug 2020, 10:58 AM

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?.

0
Dimitar
Telerik team
answered on 18 Aug 2020, 05:00 AM

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

0
Prakash Kumar Nambi
Top achievements
Rank 1
answered on 18 Aug 2020, 12:32 PM

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?.

0
Dimitar
Telerik team
answered on 20 Aug 2020, 06:11 AM

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

0
Prakash Kumar Nambi
Top achievements
Rank 1
answered on 21 Aug 2020, 07:42 PM

Thanks a lot,

it works. :)

 

 

Tags
TabStrip
Asked by
Prakash Kumar Nambi
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Prakash Kumar Nambi
Top achievements
Rank 1
Share this question
or