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

Some Header Templates Are Not Being Shown

Thread ID:

Created:

Updated:

Platform:

Replies:

146379 Aug 1,2019 11:33 PM UTC Nov 14,2019 12:42 PM UTC Blazor 5
loading
Tags: Accordion
Dominick Marciano
Asked On August 1, 2019 11:33 PM UTC

I'm trying to dynamically generate vertical list of accordion controls when a drop down is changed.  I'm pulling the data fine but when accordion controls are created, some of the headers are being shown and some aren't.  Below is the section of code that creates the accordion controls when the state is changed (which is within a tab control):

<EjsTab>
    <TabItems>
        <TabItem Header="@AssembliesHeader">
            <ContentTemplate>
                <div class="row" style="margin-left: 17px;">
                    <EjsTextBox ID="ejsSearchAssemblies" Placeholder="Search Assemblies"></EjsTextBox>
                </div>
                <div class="row" style="margin-left: 17px">
                    <EjsDropDownList ID="ejsCategories" DataSource="@Categories" Placeholder="Select Category" OnValueSelect=@((args) => OnCategoryChanged(args))>
                        <DropDownListFieldSettings Text="Text" Value="Id"></DropDownListFieldSettings>
                    </EjsDropDownList>
                </div>

                @foreach (var assembly in assembliesToShow)
                {
                    <div class="row" style="margin-left: 17px;">
                        <EjsAccordion>
                            <AccordionItems>
                                <AccordionItem Expanded="false">
                                    <HeaderTemplate>
                                        <div>
                                            <div style="display: inline-block">
                                                <img height="20" width="20" src="@assembly.Symbol" alt="@assembly.ReferenceNumber" />
                                            </div>
                                            <div style="display: inline-block">
                                                <span style="font-family: Roboto, sans-serif; font-size: 12px;">@assembly.AssemblyName</span>
                                            </div>
                                        </div>
                                    </HeaderTemplate>
                                    <ContentTemplate>
                                        <div class="container">
                                            CONTENTS
                                        </div>
                                    </ContentTemplate>
                                </AccordionItem>
                            </AccordionItems>
                        </EjsAccordion>
                    </div>
                }
            </ContentTemplate>
        </TabItem>
        <TabItem Header="@DetailsHeader">

        </TabItem>
    </TabItems>
</EjsTab>

I have also attached a ZIP file with several screenshots showing how the accordion controls render.

Attachment: screenshots_1870e5d6.zip

Karthigeyan Krishnamurthi [Syncfusion]
Replied On August 5, 2019 10:19 AM UTC

Hi Dominick, 
 
Syncfusion greetings. 
 
We could reproduce the reported issue in rare case and logged the below bug report. Fix will be included in our upcoming weekly release on August 19, 2019. 

Regards, 
Karthi 


Joshua Lapinski
Replied On November 7, 2019 03:00 PM UTC

This appears to still be an issue. Using the below very simple example, the header does not always render. This appears to happen more frequently on firefox (windows 10, firefox version 70.0 (64-bit)). This appears to only be affecting "HeaderTemplate". When setting the header with "Header", this issue doesn't occur. Note that I was able to replicate this issue using Chrome (windows 10, Version 78.0.3904.87 (Official Build) (64-bit)), but it occurs much less frequently.

I'm using version 17.3.18 of SyncFusion's blazor controls. BTW, can you create updated builds that target .Net Core 3.0 instead of 3.1?


<EjsAccordion>
    <AccordionItems>
        <AccordionItem>
            <HeaderTemplate>
                <div>some header</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div>some content</div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</EjsAccordion>

Nevitha Ravi [Syncfusion]
Replied On November 8, 2019 01:06 PM UTC

Hi Joshua, 

Greetings from Syncfusion Support. 

We were unable to reproduce the reported issue at our end both in Firefox and Chrome browsers with the version 17.3.18-beta. We suspect that the issue might occur either due to Nuget cache or browser cache. So please clear the cache and check the sample. Also we have shared a sample for the same which can be available in the following link. 

Steps to clear the Nuget cache: 
  1. Right click on the dependencies in solution explorer.
  2. Choose ‘Manage NuGet package’.
  3. Click settings icon in the top -right corner.
  4. In General tab, click ‘Clear All Nuget caches’ button.

The updated builds will support only .Net core 3.1 so kindly upgrade you SDK versions to use our Syncfusion latest versions.  

Regards, 
Nevitha. 


Joshua Lapinski
Replied On November 12, 2019 06:07 PM UTC

Hello Nevitha,

Thanks for supplying the full demo solution!

Unfortunately, I am still experiencing the issue with the provided solution. Occasionally (either on first page load or from refreshing the page via the F5 key) the header will be blank. I followed the provided instructions to clear the nuget cache and I also cleared the browser cache. I noticed the provided solution was set to version 17.3.0.11, so I updated to 17.3.0.18 and cleared the nuget cache again and I still experienced the issue.

Is there any other debug information I could provide that may help determine the issue? I don't see any error/debug info logged in Visual Studio's output window related to this. Are there any flags I could use to enable some type of 'debug' or 'verbose' mode for the syncfusion library?

I did mess around with enabling other debug flags for the project (set in appsettings.json) and set the "System" and "Microsoft" log level to "Debug" and noticed a pattern in the logged output. I attached two  files, each showing all the logged messages after a page refresh. when the header template is not rendered, it appears that a call to "UpdateTemplate" is also absent. the below debug message shows up when the header renders properly, but is missing when the header is missing:

Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Debug: Invoking instance method 'UpdateTemplate' on instance '5' with callback id '1'.

there are a handful of other debug messages that also show only when the header renders, which makes me believe that something in the rendering process is breaking in some cases.

Is there anything else I could do to help debug this?

Attachment: debug_output_fdbb9141.zip

Nevitha Ravi [Syncfusion]
Replied On November 14, 2019 12:42 PM UTC

Hi Joshua, 

Sorry for the inconvenience caused. 

We were able to reproduce the reported issue at our end and confirming this issue as a defect and logged the bug report which can be tracked from the following link. 

The fix will be included in our bi-weekly patch release expected to be rolled out in the end of November, 2019. We would appreciate your patience until then. 

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