We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

custom component wit tab do not work

Thread ID:

Created:

Updated:

Platform:

Replies:

149600 Dec 2,2019 08:46 PM UTC Dec 7,2019 08:24 AM UTC Blazor 9
loading
Tags: Tabs
ebi torabi
Asked On December 2, 2019 08:46 PM UTC

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 [Syncfusion]
Replied On December 3, 2019 12:43 PM UTC

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
Replied On December 3, 2019 01:34 PM UTC

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 [Syncfusion]
Replied On December 4, 2019 11:01 AM UTC

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. 

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
Replied On December 4, 2019 01:39 PM UTC

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 [Syncfusion]
Replied On December 5, 2019 12:54 PM UTC

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. 

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
Replied On December 5, 2019 01:17 PM UTC

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 [Syncfusion]
Replied On December 6, 2019 11:28 AM UTC

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. 

@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 3rd week of December. We would appreciate your patience until then. 

Regards, 
Nevitha 


ebi torabi
Replied On December 6, 2019 05:20 PM UTC

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

Nevitha Ravi [Syncfusion]
Replied On December 7, 2019 08:24 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon