How to access child components embeded in tab control pages

[Chris Gilliam]

Hi,

I have a parent component with child components . I was using bootstrap tab control with each child item in its own bootstrap page. The child components were direct children of the parent component so i was easily able to dynamically update the child components when a property on the parent changes. Now I see the child components become children of the tab item control instead of the parent control . The child components are now no longer accessible from the parent control as they are embedded in tab item content template component.  Is the tab control only meant for text /static content and should not be used to embed child controls on sperate pages ?

[Satheesh Kumar Balasubramanian]

Hi Chris, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "How to access child components embeded in tab control pages" and suspect that you need to render another razor page as tab content. For the same we have prepared a sample for your reference which can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/167266/ze/RazorPageRendering1852707525 

  

Index.razor:    

<SfTab> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Counter"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <Counter></Counter> 

            </ContentTemplate> 

        </TabItem> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="FetchData"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <FetchData></FetchData> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

  

Kindly try the above sample and let us know if this works at our end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible. 

 

• Can you please confirm whether you are using Syncfusion tab as child and parent?
• If so, please share all the tab related code snippets
• Share the above sample with modifying code to replicate the issue
• Share issue replicating sample if possible

 

Regards, 

Satheesh Kumar B 

[Chris Gilliam]

Hi , 

I am using Blazor .So in the example you have provided , I now have no way to update <MyControl> from the parent when something on the parent changes  because previously I had 

<Parent control>

<Child Component ref = "@ChildComponent/>

<Parent>

In the code behind I could access ChildComponent to update state when something changed on the parent , now it is not possible after initial rendering of parent component .

Now I have

<Parent control>

<SfTab> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Counter"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

               <MyControl />

            </ContentTemplate> 

        </TabItem> 

</SfTab> 

</Parent Control>

[Satheesh Kumar Balasubramanian]

Hi Chris, 

  

Thanks for your update. 

  

We have validated your reported query "In the code behind I could access ChildComponent to update state when something changed on the parent, now it is not possible after initial rendering of parent component." and suspect that you need to access the child component to update state from parent component. We have modified the counter value in child component from parent component using button click. For the same we have modified the sample for your reference which can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/167266/ze/RazorPageRendering-1978540761 

  

Index.razor:    

<button class="btn btn-primary" @onclick="IncrementCounter">Increment Count to 20</button> 

<br /> 

<br /> 

<SfTab> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Counter"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <Counter IncrementAmount="10" @ref="DetailsCounter" /> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

  

@code{ 

    Counter DetailsCounter; 

  

    private void IncrementCounter() 

    { 

        DetailsCounter.IncrementTwentyCount(); 

        DetailsCounter.IncrementCount(); 

        DetailsCounter.RefreshState(); 

    } 

} 

  

Counter.razor:    

<h1>Counter</h1> 

  

<p>Current count: @currentCount</p> 

  

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button> 

  

@code { 

    private int currentCount = 0; 

  

    [Parameter] 

    public int IncrementAmount { get; set; } = 1; 

  

    public void IncrementCount() 

    { 

        currentCount += IncrementAmount; 

    } 

    public void IncrementTwentyCount() 

    { 

        IncrementAmount = 20; 

    } 

    public void RefreshState() 

    { 

        StateHasChanged(); 

    } 

} 

  

Kindly try the above sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible. 

• Share the above sample with modifying code to replicate the issue
• Share issue replicating sample if possible
• Share the component details used as tab content with code snippets

Regards, 

Satheesh Kumar B