Some Header Templates Are Not Being Shown

[Dominick Marciano]

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]

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. 

https://www.syncfusion.com/feedback/7863/template-not-rendering-properly-at-initial-load 

Regards, 

Karthi 

[Joshua Lapinski]

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]

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. 

https://www.syncfusion.com/downloads/support/forum/146379/ze/Accordion1845687131  

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]

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]

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. 

https://www.syncfusion.com/feedback/10177/header-template-not-rendering-in-firefox 

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