Error Cannot read property 'header' of undefined

[Fabrizio Alessandro]

Hello,

When I add a new tab to the Tab control I get a JS error in console:

ejs.interop.min.js:1 Cannot read property 'header' of undefined

TypeError: Cannot read property 'header' of undefined

    at Object.getNestedObject (https://cdn.syncfusion.com/ej2/17.4.50/dist/ejs.interop.min.js:1:6542)

    at Object.getModelObject (https://cdn.syncfusion.com/ej2/17.4.50/dist/ejs.interop.min.js:1:6116)

    at Object.getCompObject (https://cdn.syncfusion.com/ej2/17.4.50/dist/ejs.interop.min.js:1:5294)

    at Object.setModel (https://cdn.syncfusion.com/ej2/17.4.50/dist/ejs.interop.min.js:1:5099)

    at https://localhost:44365/_framework/blazor.server.js:8:31421

    at new Promise (<anonymous>)

    at e.beginInvokeJSFromDotNet (https://localhost:44365/_framework/blazor.server.js:8:31390)

    at https://localhost:44365/_framework/blazor.server.js:1:19202

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (https://localhost:44365/_framework/blazor.server.js:1:19173)

This is my code:

<EjsTab @ref="_tab" CssClass="e-fill" OverflowMode="OverflowMode.Scrollable" ShowCloseButton="true">

        <TabEvents Selected="TabSelected" Removed="TabRemoved" Removing="TabRemoving" />

        <TabItems>

            @foreach (var tab in _tabs)

            {

                string cssClass = tab.Context.IsCloseable ? "" : "non-closeable";

                <TabItem CssClass="@cssClass">

                    <ChildContent>

                        <TabHeader Text="@tab.Context.Title"></TabHeader>

                    </ChildContent>

                </TabItem>

            }

        </TabItems>

    </EjsTab>

    void AddPage(TabPage tabPage)

    {

        _tabs.Add(tabPage);

        StateHasChanged();

    }

It is a Tab control "without" the tab content, only header.

The error happens when AddPage is called.

Thank you!

[Alagumeena Kalaiselvan]

Hi Fabrizio, 

Thanks for contacting Syncfusion support! 

We have validated with your reported issue “_header of undefined” and the way you have rendered tab items is improper. So, we suggest you to use AddTab public method to add tab items dynamically. We have prepared a sample based on your requirement. Refer the below code for that 

@using Syncfusion.EJ2.Blazor.Navigations 

 

<button class="e-btn" @onclick="@AddTab">Add Tab </button> 

 

<EjsTab @ref="Tab"> 

    <TabItems> 

        <TabItem Content="Twitter is an online social networking service"> 

            <ChildContent> 

                <TabHeader Text="Twitter"></TabHeader> 

            </ChildContent> 

        </TabItem> 

        <TabItem Content="@Content2"> 

            <ChildContent> 

                <TabHeader Text="Facebook"></TabHeader> 

            </ChildContent> 

        </TabItem> 

        <TabItem Content="WhatsApp Messenger is a proprietary cross-platform"> 

            <ChildContent> 

                <TabHeader Text="Whatsapp"></TabHeader> 

            </ChildContent> 

        </TabItem> 

    </TabItems> 

</EjsTab> 

 

@code { 

    private EjsTab Tab; 

    public List<TabItem> source; 

    public string Content2 { get; set; } = "Facebook is an online social networking service"; 

    public void AddTab() 

    { 

        source = new List<TabItem>() 

        { 

            new TabItem() { Header = new TabHeader() { Text = "Sample 1" }, Content = "Sample Content" } 

        }; 

        Tab.AddTab(source, 0);  // To add tab item dynamically 

    } 

} 

• In above sample, you can add the tab items by clicking the button.

Kindly try with shared sample and get back to us, If you need further assistance 

Regards 

Alagumeena.K