custom component wit tab do not work

[ebi torabi]

EjsTab @ref="@Tab" >

    <TabEvents ></TabEvents>

    <TabItems>

       @MyTabItems

    </TabItems>

    </EjsTab>

@code

{

    EjsTab Tab;

      [Parameter]

     public RenderFragment  MyTabItems{ get; set; }

}

********************************

<TabItem @ref="@TabItem">

    <ChildContent>

        <TabHeader Text="@HeaderText" ></TabHeader>

    </ChildContent>

    <ContentTemplate>

        @TabItemContent

    </ContentTemplate>

</TabItem>

@code

{

     [Parameter ]

    public TabItem TabItem { get; set; }

     

    [Parameter ]

    public string HeaderText { get; set; }

    [Parameter]

    public RenderFragment  TabItemContent { get; set; }

}

*****************

@page "/"

    <MyTabs>

        <MyTabItem HeaderText="1">

            <div>1</div>

        </MyTabItem>

        <MyTabItem HeaderText="2">

            <div>2</div>

        </MyTabItem>

        <MyTabItem HeaderText="3">

            <div>3</div>

        </MyTabItem>

    </MyTabs>

[Nevitha Ravi]

Hi Ebi, 

Greetings from Syncfusion Support. 

We have analyzed the shared code with Syncfusion Tab control. We could not custom tag helper (MyTabs and MyTabItems) as tab item or entire tab.  

Currently, we couldn’t conclude what is your requirement and what the issue you are facing with shared code block. Please share the following details to provide the prompt solution at earliest. 

• Your exact use-case and requirement.
• Complete code like definition for TabItems, TabItemContent.
• Whether you need to add the tab items using RenderFragment

Regards, 

Nevitha. 

[ebi torabi]

hi Nevitha. 

I'm going to design a wizard with a tab that will be a component so that we can use different parts of the app and be able to put other components into it as content.

[Nevitha Ravi]

Hi Ebi, 

Thanks for your update. 

We have prepared a simple tab wizard sample for your requirement which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/149600/ze/TabWizard1130714475  

In the sample, we have showcased the simple login form. In the following code we have initialised the tab with three tab items. 

@using Syncfusion.EJ2.Blazor.Navigations 

 

<EjsTab @ref="TabRef"> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Log In"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <CascadingValue Value="this"> 

                    <LogIn></LogIn> 

                </CascadingValue> 

            </ContentTemplate> 

        </TabItem> 

        <TabItem Disabled="true"> 

            <ChildContent> 

                <TabHeader Text="Logged In"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <CascadingValue Value="this"> 

                    <LoginSuccess></LoginSuccess> 

                </CascadingValue> 

            </ContentTemplate> 

        </TabItem> 

        <TabItem Disabled="true"> 

            <ChildContent> 

                <TabHeader Text="Log out"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                Logged out 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</EjsTab> 

 

@code { 

    EjsTab TabRef; 

    public void OnTabSelect(int item) 

    { 

        this.TabRef.Select(item); 

    } 

    public void OnTabEnable(int item, bool enable) 

    { 

        this.TabRef.EnableTab(item, enable); 

    } 

} 

In the first tab log-in form will be available. 

@page "/login" 

 

@using Syncfusion.EJ2.Blazor 

@using Syncfusion.EJ2.Blazor.Buttons 

@using Syncfusion.EJ2.Blazor.Popups 

 

<div class="login-form"> 

    <div class='wrap'> 

        <div id="heading">Sign in</div> 

        <div id="input-container"> 

            <div class="e-float-input e-input-group"> 

                <input id="textvalue" type="text" @bind-value="@Textvalue" required /> 

                <span class="e-float-line"></span> 

                <label class="e-float-text">Username</label> 

            </div> 

            <div class="e-float-input e-input-group"> 

                <input id="textvalue2" type="password" @bind-value="@Textvalue2" required /> 

                <span class="e-float-line"></span> 

                <label class="e-float-text">Password</label> 

            </div> 

        </div> 

        <div class="button-contain"> 

            <EjsButton @onclick="@OnClicked">Log in</EjsButton> 

        </div> 

        @if (EmptyField) 

        { 

            <span class="error">* Please enter valid credentails</span> 

        } 

    </div> 

</div> 

 

@code { 

    public bool EmptyField { get; set; } = false; 

    [CascadingParameter] Index Tab { get; set; } 

    private string Textvalue { get; set; } = ""; 

    private string Textvalue2 { get; set; } = ""; 

 

    private void OnClicked() 

    { 

        if ((this.Textvalue == "") || (this.Textvalue2 == "") || (this.Textvalue == null) || (this.Textvalue2 == null)) 

        { 

            this.EmptyField = true; 

            this.StateHasChanged(); 

        } 

        else 

        { 

            this.EmptyField = false; 

            Tab.OnTabEnable(1, true); 

            Tab.OnTabEnable(0, false); 

            Tab.OnTabSelect(1); 

        } 

    } 

} 

After entering the credentials, second tab will be selected showcasing the login success page in a popup. 

@page "/LoginSuccess" 

 

@using Syncfusion.EJ2.Blazor.Popups 

 

<EjsDialog ID="dialog" @ref="DialogObj" IsModal="true" Width="280px"> 

    <DialogTemplates> 

        <Header> Success</Header> 

        <Content> Congratulations! Login Success</Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton ButtonModel="@DialogBtn" OnClick="@OnClick" /> 

    </DialogButtons> 

</EjsDialog> 

 

@code { 

    EjsDialog DialogObj; 

    [CascadingParameter] Index Tab { get; set; } 

    private void OnClick(Object args) 

    { 

        this.DialogObj.Hide(); 

        Tab.OnTabEnable(2, true); 

        Tab.OnTabEnable(1, false); 

        Tab.OnTabSelect(2); 

    } 

    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel DialogBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Dismiss", IsPrimary = true }; 

} 

On clicking the Dismiss button,  ‘Logged out’ message will be displayed in the third tab. 

Kindly try the sample and get back to us whether the sample meets your requirement. 

Regards, 

Nevitha

[ebi torabi]

Hi Nevitha

Unfortunately I didn't mean it well. I want to design a wizard with a tab as a component. Every time I want to make an instance of it, I dynamically add TabItems in parent.

EjsTab @ref="@Tab" >

    <TabEvents ></TabEvents>

    <TabItems>

       @MyTabItems

    </TabItems>

    </EjsTab>

@code

{

    EjsTab Tab;

      [Parameter]

     public RenderFragment  MyTabItems{ get; set; }

}

********************************

<TabItem @ref="@TabItem">

    <ChildContent>

        <TabHeader Text="@HeaderText" ></TabHeader>

    </ChildContent>

    <ContentTemplate>

        @TabItemContent

    </ContentTemplate>

</TabItem>

@code

{

     [Parameter ]

    public TabItem TabItem { get; set; }

     

    [Parameter ]

    public string HeaderText { get; set; }

    [Parameter]

    public RenderFragment  TabItemContent { get; set; }

}

*****************

@page "/"

    <MyTabs>

        <MyTabItem HeaderText="1">

            <div>1</div>

        </MyTabItem>

        <MyTabItem HeaderText="2">

            <div>2</div>

        </MyTabItem>

        <MyTabItem HeaderText="3">

            <div>3</div>

        </MyTabItem>

    </MyTabs>

[Nevitha Ravi]

Hi Ebi, 

Thanks for your update. 

We have prepared a sample by covering the following requirements. 

• Created Tab as Blazor component
• Added the header and content of the tab items dynamically to a parent tab.
• Created multiple instance

Kindly refer the sample from the following link. 

https://www.syncfusion.com/downloads/support/forum/149600/ze/DynamicTabItem965575905  

MyTab.razor 

@using Syncfusion.EJ2.Blazor.Navigations 

 

<EjsTab> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="@HeaderText"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                @TabItemContent 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</EjsTab> 

@code 

{ 

    [Parameter] 

    public string HeaderText { get; set; } 

    [Parameter] 

    public string TabItemContent { get; set; } 

} 

Tab 1 

<MyTab HeaderText="@Header1" TabItemContent="@Content1"></MyTab> 

 

@code{ 

    public string Header1 = "Tab1 Header"; 

    public string Content1 = "Tab1 Content"; 

} 

Tab 2 

<MyTab HeaderText="@Header" TabItemContent="@Content"></MyTab> 

 

@code{ 

    public string Header = "Tab2 Header"; 

    public string Content = "Tab2 Content"; 

} 

It is not feasible to add the content as other components using RenderFragment. Kindly try the sample and get back to us for further assistance. 

Regards, 

Nevitha. 

 

[ebi torabi]

Hi Nevitha.

Unfortunately, in this example, with each instance of the component, a new tab is created, not a new item tab. We need to dynamically create items in each instance

[Nevitha Ravi]

Hi Ebi, 

Thanks for you update. 

We have prepared a sample to create instance for tab item,  since currently we could pass HTML as string only to content of TabItem. The following sample will have only content as string. 

https://www.syncfusion.com/downloads/support/forum/146900/ze/DynamicTabItem265777677  

@using Syncfusion.EJ2.Blazor.Navigations 

 

<EjsTab> 

    <TabItems> 

        <CustomTabItem HeaderText="@Header1" TabItemContent="@Content1"></CustomTabItem> 

        <CustomTabItem HeaderText="@Header2" TabItemContent="@Content2"></CustomTabItem> 

        <CustomTabItem HeaderText="@Header3" TabItemContent="@Content3"></CustomTabItem> 

        @TabItemContent 

    </TabItems> 

</EjsTab> 

@code 

{ 

    public RenderFragment TabItemContent = builder => 

    { 

        builder.AddContent(1,@<CustomTabItem HeaderText="Header4" TabItemContent="Content4"></CustomTabItem>); 

    }; 

    public string Header1 = "Header1"; 

    public string Content1 = "Content1"; 

    public string Header2 = "Header2"; 

    public string Content2 = "Content2"; 

    public string Header3 = "Header3"; 

    public string Content3 = "Content3"; 

} 

CustomTabItem 

@using Syncfusion.EJ2.Blazor.Navigations 

 

<TabItem> 

    <ChildContent> 

        <TabHeader Text="@HeaderText"></TabHeader> 

    </ChildContent> 

    <ContentTemplate> 

        @TabItemContent 

    </ContentTemplate> 

</TabItem> 

 

@code{ 

    [Parameter] 

    public string HeaderText { get; set; } 

    [Parameter] 

    public string TabItemContent { get; set; } 

} 

We are currently implementing the feature to pass the components as content dynamically within RenderFragment and it will be included in our upcoming Volume 4, 2019 main release expected to be rolled out in the 3^rd week of December. We would appreciate your patience until then. 

https://www.syncfusion.com/feedback/8630/ability-to-pass-renderfragment-to-the-contenttemplate-of-tabitem-in-code-behind  

Regards, 

Nevitha 

[ebi torabi]

Hi Nevitha .Thanks a lot. I wait for volume 4

[Nevitha Ravi]

Hi Ebi, 

You are most welcome. We will let you know once the release has been rolled out. Please keep in touch with us if you need any further assistance, we will be always happy in assisting you. 

Regards, 

Nevitha