.NET Core TabStrip with DateTimePicker - What am I missing?

[David]

I seem to have hit a stumbling block which I cannot find a simple solution to.  Can someone point a direction for me to persue?

I am designing a website which will present to the user a tabbed interface.  Each tab will represent a collection of available options/items for the user to fill out when submitting changes to an edited object.

That sounds simple in concept.  I have used several host objects.  TabStrips, ExpansionPanels have been tried.  Both seem to render the same results.  Any "content" panels which are not rendered initially do not render properly when selected.

I.E., Tab #0 looks fine.  Tab#1, which is obscured/hidden, contains controls that when viewed lack things such as labels, icons, most script driven features.  The same logic fails when other non-tabstrip items used.

Here is a quicky sample showing the problem.  In theory, expansion panels 1, 2, and 3 should all render content.  Only panel #1 shows valid content, 2 and 3 are malformed at best.

My root problem seems to be my inability to dynamically show content not visible when the page is initially rendered.  Can someone point me the correct direction?  I have tried the "loadfrom" content options all having the same results.

            @(Html.Kendo().ExpansionPanel()
                        .Name("reoccurringItems")
                        .Title("Reoccurring")
                        .SubTitle("Items running more than one time")
                        .Expanded(false)
                        .Content("Test Text to test feature..")
                        )

            @(Html.Kendo().ExpansionPanel()
                        .Name("nonReoccurringItem")
                        .Title("Run Once")
                        .SubTitle("A item run one time only")
                        .Expanded(false)
                        .Content(@<text>
                <div>
                    @(Html.Kendo().DateTimePickerFor(m => m.OneTimeOccurrenceAtDateandTime)
                                  .Label(lbl => lbl.Content("Run Once At Date/Time").Floating(true))
                                  .Rounded(Rounded.Full).ToClientTemplate())
                </div>
            </text>)
                        )

            @(Html.Kendo().ExpansionPanel()
                        .Name("nonReoccurringTestItem")
                        .Title("Test Two")
                        .SubTitle("Test With Textbox")
                        .Expanded(false)
                        .Content(@<text>
                <div>
                    @(Html.Kendo().TextBoxFor(m => m.ScheduleDescription).Label(lbl => lbl.Content("Description").Floating(true)))
                </div>
            </text>)
                        )

 

[Eyup]

Hi David,

 

Thank you for reaching out.

Based on your description and sample code, the issue is that controls inside initially hidden containers (such as TabStrip or ExpansionPanel panels that are not expanded by default) do not render correctly when they become visible. This affects features like labels, icons, and script-driven functionality for widgets such as DateTimePicker and TextBox.

Root Cause
Telerik UI widgets rely on visible dimensions during initialization. If a widget is initialized inside a hidden container, its layout and scripts may not execute properly, resulting in broken or missing UI elements.

Hidden Errors

Usually, in similar cases, the most common reason of the failing are javascript errors. Please run the page on Chrome browser and enable the F12 inspector console to see if there are any hidden javascript errors interfering.

Possible Workarounds

• Use Visibility Events:
  For ExpansionPanel, use its expand event. For TabStrip, use the activate event. These events fire after the content becomes visible, allowing you to safely trigger widget resizing or re-initialization.

• Manually Trigger Resize:
  In the event handler, get references to the widgets inside the newly visible panel and call their resize() method. This ensures proper rendering.

Sample Solution for ExpansionPanel

You can use JavaScript to listen for the expansion event and resize child widgets:

$(document).ready(function() {
    // Listen for ExpansionPanel expand event
    $(".k-expansion-panel").on("kendoExpansionPanelExpand", function(e) {
        // Find Kendo widgets inside the expanded panel and resize them
        $(this).find(".k-widget").each(function() {
            if (this.kendoWidget && typeof this.kendoWidget.resize === "function") {
                this.kendoWidget.resize();
            }
        });
    });
});

Make sure the widgets are initialized before you trigger their resize.

Handling "loadfrom" Content Option

• If you're using the LoadFrom option to load content dynamically, ensure that widgets in the loaded content are initialized only after the panel is expanded and visible.

Summary Steps

• Use the container’s post-visibility event to trigger widget resizing.
• Avoid initializing widgets in hidden containers unless you handle their resize on reveal.
• If using dynamic content loading, initialize widgets after the content becomes visible.

 

Please check these troubleshooting steps and keep me updated on the result.

 

Regards,
Eyup
Progress Telerik