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

Handling duplicate ids in different tabs

4 Answers 264 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Musashi
Top achievements
Rank 1
Musashi asked on 10 Dec 2016, 12:07 AM

My use case calls for forms that may be duplicated across multiple TabStrip tabs as editors for different entities of the same type.

So tab 1 calls for Entity1 editor, tab 2 calls for Entity1 editor also.

This introduces possibility of duplicate IDs on the same page.

At the moment I have a super clunky prefix system utilizing ViewData.TemplateInfo.HtmlFieldPrefix. This is hardly intuitive nor easy to use.

One idea i had about managing this issue is to "unload" tabs as they get placed in the background. Essentially bundling up the html/data and storing it until the tab is selected again, where it'll unbundle and load into the tab.
I got as far as grabbing the contents of the tab via jQuery's .html() function, but reinserting the html doesn't do anything script-wise, i.e. no widgets are widgetizing.
Running into that, I'm not sure if there's any way to proceed with this idea.

Another idea I had is dumping the contents of a tab into an iframe. I haven't implemented anything like this yet, nor do I know if its a good idea.

 

Anyone else having to deal with this type of issue?
Any suggestions/comments on the ideas above?
What are your solutions?

4 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 13 Dec 2016, 02:44 PM
Hello Musashi,

One other option could be destroying the tab's content when navigating away and reinitializing it when navigating to it. To achieve that, the tab's content could be passed as a parameter to the kendo.destroy() method.

If that does not help, a very simplified sample project implementing your case would help us better understand your scenario and would enable us to suggest more specific suggestions. 

Regards,
Peter Milchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Musashi
Top achievements
Rank 1
answered on 13 Dec 2016, 07:44 PM

I'm not opposed to destroying the contents of the tab in general. But I do want to handle the case where the user makes some changes to a form in a tab, then selects a new tab with the same form (different entity). In this case, destroying the tab would destroy the user made changes, which I don't want.

I'll try making a small sample project

0
Peter Milchev
Telerik team
answered on 15 Dec 2016, 09:54 AM
Hello Musashi,

Take your time on preparing the sample project and send it to us when you are ready. It would really help us completely understand your case and suggest more suitable approaches for achieving the desired behavior if such are available.

One option to send us the project would be opening an official support ticket with the attached project. When we have a closure on the support thread, we can summarize the conclusion here for the community.

Regards,
Peter Milchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kiran
Top achievements
Rank 1
Veteran
Iron
answered on 09 Dec 2017, 02:53 AM

Hi Peter,

I am also facing same issue, any solution on this or any other way to do it?

Tags
TabStrip
Asked by
Musashi
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Musashi
Top achievements
Rank 1
Kiran
Top achievements
Rank 1
Veteran
Iron
Share this question
or