Expansion Panel with ondemand data fetch from server

[Lorenzo]

Hello everyone,
I’m trying to use expansion panels in a way that the content is loaded only when the panel is opened. So when the user clicks on a panel, they might see the loading icon and then see the data received from the server. Is it possible to do this?

 

Thank you

[Alexander]

Hi Lorenzo,

I hope you are doing well!

Generally, the Telerik UI for ASP.NET Core Expansion Panel does not offer built-in capabilities for loading arbitrary content from the server.

Regardless, a possible way to achieve the desired outcome would be to use the built-in .ajax() method. Which is provided from the jQuery framework to get the job done. Please allow me to share a potential approach in a more step-like manner:

• Create an Expansion Panel with an initially empty content:
  

@(Html.Kendo().ExpansionPanel()
          .Name("brazil")
          .Title("Brazil")
          .SubTitle("South America")
          .Content(string.Empty)
)

• Within the document.ready event, make an asynchronous request, but beforehand, initiate a loading indicator. From there you can use the "success" fallback method to capture the retrieved content and supplement it within the boundaries of the ExpansionPanel via the .html():
  

<script>
    $(document).ready(function() {
        var element = $("#brazil").parents(".k-expander"); // Gather the wrapper DOM element for the ExpansionPanel which entails the rest of the Expansion Panel HTML content.

        kendo.ui.progress(element, true); // Initiate a loading indicator.
        $.ajax({ // Create an asynchronous request.
            url: "@Url.Action("AjaxContent", "Window")",
            success: function(data){
                 setTimeout(function(){ // Timeout is used for the purposes of the demonstration.
                    $("#brazil").getKendoExpansionPanel().toggle(); // Expand the Expansion Panel's content.
                    kendo.ui.progress(element, false); // Obscure the Loading indicator.
                    $("#brazil").html(data); // Populate the retrieved content.
                 }, 1500)
            }
        })
    });
</script>

The aforementioned result would then produce the following result:

Here is a Telerik REPL that further encompasses each of the abovementioned step in a more runnable environment:

• Telerik REPL for ASP.NET Core Example

I hope this helps during your endeavors.

Kind Regards,
Alexander
Progress Telerik