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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

EjsTab - Custom Template doesn't work.

Thread ID:

Created:

Updated:

Platform:

Replies:

151363 Feb 7,2020 07:56 PM UTC Feb 13,2020 09:36 AM UTC Blazor 8
loading
Tags: Dropdown List
Bishan Moteria
Asked On February 7, 2020 07:56 PM UTC

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 [Syncfusion]
Replied On February 10, 2020 12:11 PM UTC

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
Replied On February 10, 2020 12:53 PM UTC

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
Replied On February 10, 2020 04:46 PM UTC

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 [Syncfusion]
Replied On February 11, 2020 04:26 PM UTC

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 

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
Replied On February 11, 2020 04:31 PM UTC

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.



Thanks,
Bishan M.

Alagumeena Kalaiselvan [Syncfusion]
Replied On February 12, 2020 08:54 AM UTC

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
Replied On February 12, 2020 01:21 PM UTC

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 [Syncfusion]
Replied On February 13, 2020 09:36 AM UTC

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.  
 
 
Please ensure your referred scripts and theme versions like below:  
 
Scripts:  
 
Themes:  
  
 
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 


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