NullReference Exception at rendering

[Daniel Eriksen]

Hi,

I recently tried out the Tabs-component but cannot make it to render. I get exception: 

Error: System.NullReferenceException: Object reference not set to an instance of an object.

   at Syncfusion.EJ2.Blazor.Navigations.TabItem.OnInitializedAsync()

   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

I have double checked and the data that is used are all fine and populated correctly. 

                <EjsTab ShowCloseButton="false" HeaderPlacement="HeaderPosition.Top" CssClass="e-fill">

                    <TabItem>

                        <TabItem>

                            <ChildContent>

                                <TabHeader Text="Personlig information"></TabHeader>

                            </ChildContent>

                            <ContentTemplate>

                                <div>

                                    <div class="row">

                                        <div class="col-4">

                                            Namn

                                        </div>

                                        <div class="col-8">

                                            @activeData.Name

                                        </div>

                                    </div>

                                    <div class="row">

                                        <div class="col-4">

                                            Epost

                                        </div>

                                        <div class="col-8">

                                            @activeData.Email

                                        </div>

                                    </div>

                                    <div class="row">

                                        <div class="col-4">

                                            Mobilnummer

                                        </div>

                                        <div class="col-8">

                                            @activeData.Mobile

                                        </div>

                                    </div>

                                </div>

                            </ContentTemplate>

                        </TabItem>

                        <TabItem>

                            <ChildContent>

                                <TabHeader Text="Bakgrund"></TabHeader>

                            </ChildContent>

                            <ContentTemplate>

                                <div>

                                    <div class="row">

                                        <div class="col-4">

                                            Utbildning

                                        </div>

                                        <div class="col-8">

                                            @activeData.Education

                                        </div>

                                    </div>

                                    <div class="row">

                                        <div class="col-4">

                                            Specialisering

                                        </div>

                                        <div class="col-8">

                                            @activeData.Specialization

                                        </div>

                                    </div>

                                    <div class="row">

                                        <div class="col-4">

                                            Erfarenhet

                                        </div>

                                        <div class="col-8">

                                            @activeData.Experience

                                        </div>

                                    </div>

                                </div>

                            </ContentTemplate>

                        </TabItem>

                        <TabItem>

                            <ChildContent>

                                <TabHeader Text="Arbetsrelaterat"></TabHeader>

                            </ChildContent>

                            <ContentTemplate>

                                <div>

                                    <div class="row">

                                        <div class="col-4">

                                            Utbildning

                                        </div>

                                        <div class="col-8">

                                            <EjsCheckBox Label="Måndag" CssClass="e-small" Checked="@activeData.AvailableDays.Monday" Disabled="true"></EjsCheckBox>

                                            <EjsCheckBox Label="Tisdag" CssClass="e-small" Checked="@activeData.AvailableDays.Tuesday" Disabled="true"></EjsCheckBox>

                                            <EjsCheckBox Label="Onsdag" CssClass="e-small" Checked="@activeData.AvailableDays.Wednesday" Disabled="true"></EjsCheckBox>

                                            <EjsCheckBox Label="Torsdag" CssClass="e-small" Checked="@activeData.AvailableDays.Thursday" Disabled="true"></EjsCheckBox>

                                            <EjsCheckBox Label="Fredag" CssClass="e-small" Checked="@activeData.AvailableDays.Friday" Disabled="true"></EjsCheckBox>

                                            <EjsCheckBox Label="Lördag" CssClass="e-small" Checked="@activeData.AvailableDays.Saturday" Disabled="true"></EjsCheckBox>

                                            <EjsCheckBox Label="Söndag" CssClass="e-small" Checked="@activeData.AvailableDays.Sunday" Disabled="true"></EjsCheckBox>

                                        </div>

                                    </div>

                                    <div class="row">

                                        <div class="col-4">

                                            Specialisering

                                        </div>

                                        <div class="col-8">

                                            @activeData.Specialization

                                        </div>

                                    </div>

                                    <div class="row">

                                        <div class="col-4">

                                            Erfarenhet

                                        </div>

                                        <div class="col-8">

                                            @activeData.Experience

                                        </div>

                                    </div>

                                </div>

                            </ContentTemplate>

                        </TabItem>

                    </TabItem>

                </EjsTab>

[Alagumeena Kalaiselvan]

Hi Daniel, 

Greetings from Syncfusion support! 

We have checked your reported issue “null reference exception at rendering” with your shared code and this issue may occurs due to the inappropriate definition of TabItems. It is essential to define TabItem inside the tag of TabItems alone. We have modified your shared code for your reference. 

<EjsTab ShowCloseButton="false" HeaderPlacement="HeaderPosition.Top" CssClass="e-fill"> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Personlig information"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <div> 

                    <div class="row"> 

                        <div class="col-4"> 

                            Namn 

                        </div> 

                        <div class="col-8"> 

                            @activeData.Name 

                        </div> 

                    </div> 

                    <div class="row"> 

                        <div class="col-4"> 

                            Epost 

                        </div> 

                        <div class="col-8"> 

                            @activeData.Email 

                        </div> 

                    </div> 

                    <div class="row"> 

                        <div class="col-4"> 

                            Mobilnummer 

                        </div> 

                        <div class="col-8"> 

                            @activeData.Mobile 

                        </div> 

                    </div> 

                </div> 

            </ContentTemplate> 

        </TabItem> 

        ... 

    </TabItems> 

</EjsTab> 

Kindly try out shared solution and get back to us, If you need further assistance. 

Regards 

Alagumeena.K