Add Tab Dynamically After Initialization?

5 posts, 0 answers
  1. Portia
    Portia avatar
    9 posts
    Member since:
    Jan 2015

    Posted 29 Oct 2019 Link to this post

    Is there a way to add a tab to the tabstrip dynamically after the initial rendering, without reloading/disrupting the rest of the tabstrip? 

    I can't seem to figure it out.  The only thing I can get to work is putting in a placeholder tab, then dropping the content in later, but I would like to be able to control the position, title, etc...

    ==============================

     <TabStripTab Title="X1">
       @DynamicX1
    </TabStripTab>

    ...

    @code {

        Telerik.Blazor.Components.TelerikTabStrip personTabStrip;
        public int ActiveTabIndex { get; set; } = 0;
        private RenderFragment DynamicX1;
        protected override void OnInitialized()
        {
            app.NewTabRequested += OpenNewTab;
        }
        private void OpenNewTab(RenderFragment fragment)
        {
            DynamicX1 = fragment;
            ActiveTabIndex = 1;
            StateHasChanged();
        }


    }

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5072 posts

    Posted 30 Oct 2019 Link to this post

    Hello Portia,

    The last example in this article shows how you can create tabs based on view model data: https://docs.telerik.com/blazor-ui/components/tabstrip/overview. The key thing is that the tab definitions need to be in the markup, and that includes the content - this is the Blazor way. That content can come in conditionally or not at all, that's up to the app.

    It is important to note that a change in the rendered tabs collection requires that the tabstrip component is re-rendered with new data, and this inevitably means that the tabs content will also re-initialize.

    If this approach does not suit your needs, I can suggest you look into these options:

    • Implement some form of state persistence in the app so that data retrieval, for example, happens only once and not every time the components re-render.
    • Handle the ActiveTabIndexChanged event of the tab strip (see the article above) to know when a tab is activated, so you can render data or entire components in it (e.g., with a conditional if-block in the markup of the respective tab).

    Regards,
    Marin Bratanov
    Progress Telerik

     UI for Blazor
  3. Portia
    Portia avatar
    9 posts
    Member since:
    Jan 2015

    Posted 30 Oct 2019 in reply to Marin Bratanov Link to this post

    Thank you, I will try to implement some type of workaround to emulate a new tab appearing without disrupting the entire strip.

    Do you know if there is any trick to hide a tab by targeting with CSS?  Once attribute splatting is available I could use that but looking for something in the meantime.  

  4. Portia
    Portia avatar
    9 posts
    Member since:
    Jan 2015

    Posted 30 Oct 2019 Link to this post

    I don't happen to need the disabled tab state for this tabstrip, so I am going to hijack the "Disabled" property and use it as hidden for my purposes.

    .k-tabstrip-items .k-state-disabled
    {
        display: none;
    }

    A "Hidden" property would really be helpful.

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5072 posts

    Posted 31 Oct 2019 Link to this post

    Hi Portia,

    I am not sure if this is relevant for you, but there is a feature request to toggle the tabs visibility through CSS so content inside does not re-initialize (and all of it initializes on first load and you would easily be able to use the index changed event to alter it): https://feedback.telerik.com/blazor/1431932-tabs-can-hide-with-css-only-to-avoid-re-initializing.

    Would the Hidden feature do something different than this? Generally, in Blazor, when you don't want something to render you need to change the view model so it does not render, as opposed to hiding with CSS.

     

    Regards,
    Marin Bratanov
    Progress Telerik

     UI for Blazor
Back to Top