Handling duplicate ids in different tabs

4 posts, 0 answers
  1. Musashi
    Musashi avatar
    22 posts
    Member since:
    Jan 2014

    Posted 09 Dec 2016 Link to this post

    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?

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    218 posts

    Posted 13 Dec 2016 Link to this post

    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.
  3. Musashi
    Musashi avatar
    22 posts
    Member since:
    Jan 2014

    Posted 13 Dec 2016 Link to this post

    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

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    218 posts

    Posted 15 Dec 2016 Link to this post

    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.
Back to Top