EjsTab - Custom Template doesn't work.

[Bishan Moteria]

When rendering custom component inside a tab, the following error is printed in console:

Cannot read property 'isComplexArray' of null TypeError: Cannot read property 'isComplexArray' of null at Object.getCompObject (https://cdn.syncfusion.com/ej2/17.4.47/dist/ejs.interop.min.js:1:5409) at Object.setModel (https://cdn.syncfusion.com/ej2/17.4.47/dist/ejs.interop.min.js:1:5099) at https://localhost:44379/_framework/blazor.server.js:8:31421 at new Promise (<anonymous>) at e.beginInvokeJSFromDotNet (https://localhost:44379/_framework/blazor.server.js:8:31390) at https://localhost:44379/_framework/blazor.server.js:1:19202 at Array.forEach (<anonymous>) at e.invokeClientMethod (https://localhost:44379/_framework/blazor.server.js:1:19173) at e.processIncomingData (https://localhost:44379/_framework/blazor.server.js:1:17165) at e.connection.onreceive (https://localhost:44379/_framework/blazor.server.js:1:10276)

​

Example #1: Using LoadOn="ContentLoad.Init": The error above is printed on page load.

<EjsTab LoadOn="ContentLoad.Init" Height="auto" CssClass="e-fill">

                <TabItems>

                    <TabItem>

                        <ChildContent>

                            <TabHeader Text="Rome"></TabHeader>

                        </ChildContent>

                        <ContentTemplate>

                            <div>

                                <div class="content-title">

                                    <div class="cnt-text">Employee Info</div>

                                </div>

                            </div>

                        </ContentTemplate>

                    </TabItem>

                    <TabItem>

                        <ChildContent>

                            <TabHeader Text="Theme"></TabHeader>

                        </ChildContent>

                        <ContentTemplate>

                            <div id="theme">

                                <div class="content-title">

                                    <ChooseTheme />

                                </div>

                            </div>

                        </ContentTemplate>

                    </TabItem>

                </TabItems>

            </EjsTab>

Example #2: Without using LoadOn="ContentLoad.Init": The error above is printed when tab is changed.

<EjsTab Height="auto" CssClass="e-fill">

                <TabItems>

                    <TabItem>

                        <ChildContent>

                            <TabHeader Text="Rome"></TabHeader>

                        </ChildContent>

                        <ContentTemplate>

                            <div>

                                <div class="content-title">

                                    <div class="cnt-text">Employee Info</div>

                                </div>

                            </div>

                        </ContentTemplate>

                    </TabItem>

                    <TabItem>

                        <ChildContent>

                            <TabHeader Text="Theme"></TabHeader>

                        </ChildContent>

                        <ContentTemplate>

                            <div id="theme">

                                <div class="content-title">

                                    <ChooseTheme />

                                </div>

                            </div>

                        </ContentTemplate>

                    </TabItem>

                </TabItems>

            </EjsTab>

Version - 17.4.47

Thanks,

Bishan M.

[Alagumeena Kalaiselvan]

Hi Bishan, 

Thanks for contacting Syncfusion support! 

We have validated the reported issue “isComplexArray of Null” with shared code but unfortunately we could not reproduced this issue at our end. Refer below code for that 

@using Syncfusion.EJ2.Blazor.Navigations 

 

<EjsTab LoadOn="ContentLoad.Init" Height="auto" CssClass="e-fill"> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Rome"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <div> 

                    <div class="content-title"> 

                        <div class="cnt-text">Employee Info</div> 

                    </div> 

                </div> 

            </ContentTemplate> 

        </TabItem> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Theme"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <div id="theme"> 

                    <div class="content-title"> 

                        <ChooseTheme></ChooseTheme> 

                    </div> 

                </div> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</EjsTab> 

We have used the ChooseTheme as Custom Component. Refer below code for `~/ChooseTheme.razor` 

<h1>Counter</h1> 

 

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

 

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

 

@code { 

    private int currentCount = 0; 

 

    private void IncrementCount() 

    { 

        currentCount++; 

    } 

} 

 

Also, We suspect that issue may occurs due to the custom component. So, kindly share the below details to check further on this. 

• Did you use any other Syncfusion controls inside the custom component?
• Replicate your issue with shared sample (if possible)

Kindly get back to us with above details to proceed further. If the issue reproduced in our end, we will validate and assist you as soon as possible. 

Regards 

Alagumeena.K 

[Bishan Moteria]

Hi Alagumeena,

- Did you use any other Syncfusion controls inside the custom component?

Yes, I've used EjsDropDownList component.

ChooseTheme.razor:

@inherits ChooseThemeBase

<div class="col-md-12">

    <FormGroupRow LabelName="ChooseTheme" LabelDisplayName="Choose Theme" LabelSize="col-sm-4" InputSize="col-sm-8">

        <EjsDropDownList TValue="string" TItem="Theme" Placeholder="e.g. Fabric" DataSource="@_themes" Query="@_query" AllowFiltering="true" @bind-Value="@AppState.SelectedTheme">

            <DropDownListFieldSettings Text="Name" Value="CssFileName"></DropDownListFieldSettings>

        </EjsDropDownList>

    </FormGroupRow>

</div>

ChooseThemeBase.cs:

public class ChooseThemeBase : ComponentBase

    {

        [Inject]

        public AppState AppState { get; set; }

        public List<Theme> _themes = new List<Theme>

        {

            new Theme() { Name = "Fabric (recommended)", CssFileName = "fabric.css" },

            new Theme() { Name = "Material", CssFileName = "material.css" },

            new Theme() { Name = "Bootstrap 4", CssFileName = "bootstrap4.css" },

            new Theme() { Name = "High Contrast", CssFileName = "highcontrast.css" }

        };

        public Query _query = new Query();

    }

    public class Theme

    {

        public string Name { get; set; }

        public string CssFileName { get; set; }

    }

FormGroupRow.razor:

<div class="form-group row">

    <label for="@LabelName" class="@LabelSize col-form-label">@LabelDisplayName</label>

    <div class="@InputSize">

        @ChildContent

    </div>

</div>

@code {

    [Parameter]

    public string LabelName { get; set; }

    [Parameter]

    public string LabelDisplayName { get; set; }

    [Parameter]

    public string LabelSize { get; set; }

    [Parameter]

    public string InputSize { get; set; }

    [Parameter]

    public RenderFragment ChildContent { get; set; }

}

Please note that the above code is functional if I change version back to 17.4.46.

Thank you,

Bishan M.

[Bishan Moteria]

The problem seems to be with @bind-Value="@AppState.SelectedTheme". As soon as i removed binding, the error disappears. In previous version there was also an issue with two-way binding.

Currently, One-way data binding is only working inside EjsTab. I tried Two-Way data binding and Dynamic value binding; both having the same issue.

Thanks,

Bishan M.

[Alagumeena Kalaiselvan]

Hi Bishan, 

Thanks for your update! 

We could able to reproduce the reported issue at our end and this issue has been fixed in our latest release version “V17.4.49”.  Refer below release notes for that 

https://ej2.syncfusion.com/blazor/documentation/release-notes/17.4.49/#common 

Also, we suggest you to use the latest min and interop files to overcome this issue. 

Kindly get back to us, if you need further assistance 

Regards 

Alagumeena.K

[Bishan Moteria]

Hi Alagumeena,

I did noticed a new update. I was able to update ejs.min.js but when try access ejs.interop.min.js using following link it returns Access Denied.

https://cdn.syncfusion.com/ej2/17.4.49/dist/ejs.interop.min.js

Thanks,

Bishan M.

[Alagumeena Kalaiselvan]

Hi Bishan, 

Thanks for your update! 

We have checked your reported issue “can’t access ej2.interop for the version V17.4.49” and it could be accessed at our end. We suggest you to clear the browser cache to resolve the issue. 

Kindly get back to us, If the issue may still persist 

Regards 

Alagumeena.K 

[Bishan Moteria]

Hi Alagumeena,

I was able to download and reference ej2.interop v17.4.49. Although, I'm still having issue with two-way binding. There are no console error(s) but now initial value of EjsDropDownList is always set to 0th element regardless of specifying @bind-Value="AppState.SelectedTheme".

Please note that two-way binding works when displaying EjsDropDownList independently. But in my case I have used EjsTab control and one of the tab has EjsDropDownList (choosing theme).

For more info, please find attached picture.

Thanks,

Bishan M.

Attachment: Syncfusion_Blazor__Two_way_binding_6e388d8e.zip

[Sureshkumar P]

Hi Bishan, 

 

Thanks for your update.  

 

We suspect that the reported issue arises due to the NuGet cache problem and Syncfusion NuGet packages are not installed properly in your application.  

 

So, we suggest you clear the cache by follow the instructions in the below Knowledge Base link and reinstall the NuGet package once again by referring the below getting started documentation link.  

 

KB for clear NuGet cache: https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache  

 

Please ensure your referred scripts and theme versions like below:  

 

Scripts:  

https://cdn.syncfusion.com/ej2/17.4.49/dist/ej2.min.js    

https://cdn.syncfusion.com/ej2/17.4.49/dist/ejs.interop.min.js    

 

Themes:  

 https://cdn.syncfusion.com/ej2/17.4.49/material.css   

  

 

We have created a sample based on your requirement with video demonstration. please check the sample and video here: https://www.syncfusion.com/downloads/support/forum/151363/ze/samples275924285  

 

Regards, 

Sureshkumar P