Can Line Chart be rendered without binding data?

[CHIHPEI]

Scenario and Issue:

I had a Tabstrip with three tabs,

in each tab there are four DropDownList and four line charts.

However, If I bind all the data once (Include DropDownLists and Line Charts in three tabs),

the page would rendered slowly and caused some of the data loss binding.

Question1 :

I'm wondering if it's possible to render Line Chart before data binding?

then I'll data bind it after DropDownList Select event was triggered.

Or is there any other alternative ways?

What I've Tried

The TabStrip is in a partialview,

once a button was clicked the partialview will be load with javascript function by.
 $("#myHtmlElementId").load('@Url.Action("MyAction","MyController")', params)

The complicated part is the line chart in initial tab strip was data binded with local binding the data passed by ViewBag.

And if I try to render the other line chart while the second or third TabStrip Item was selected.

It's logic would be conflict, if the user clicked the first TabStrip again.

Since the line chart were data binded with local data by ViewBag,

and the others in 2nd or 3rd TabStrip were renderd while the TabStrip item was selected,

And the selected event would call a javascript function to render another partial view to fill content into the TabStrip.

Is there something like TabStrip initial event? 

So that I could also fill the first Tabstrip item contents same as the 2nd or 3rd TabStrip.

[CHIHPEI]

Update 

1.  I've found the problem why can't some of the widget data bind properly.

It's becuase they used the same name. Kinda silly.

2. Change another way to render the 2,3 tab items by loading data with ajax

tabstrip.Add().Text("MyTabItem") .LoadContentFrom(Url.Action("MyAction","MyController"));

So I guess I've fixed the problem and found the solution for my case.

Further Question:

Is it possible to generate a loading view while the widgets are getting data from the backend?

Since the query takes quite a long time

[Alexander]

Hi Chihpei,

Thank you for sharing the current solution with the community regarding the experienced issue on your end, it is greatly appreciated.

I noticed that there is not a Telerik UI for ASP.NET Core license associated with your account which limits the availability of our support services for the product. In this regard, It is recommended that you either purchase or renew your license in order to gain access to the latest updates, fixes, features, and support regarding the Telerik UI for ASP.NET Core components. More information regarding the currently available plans can be reviewed here:

• Support Plans

Indeed, the Name options of the helpers have to be always unique in the context of the whole web page. If a partial view is loaded multiple times, each instance of this partial view has to render all helpers with unique Name (id) options. If this requirement is not met, the page will render duplicate element IDs and only the helper instance which occurs first in the markup will be initialized and will work properly.

In regards to your additional inquiry, we have a dedicated knowledge base article that further depicts how an overlay can be explicitly set for the Chart upon fetching its data which can be found here:

• Show Overlay while the Chart Is Loading

The approach mentioned within the article relies on the invocation of the .progress() method provided by Kendo which displays a semi-transparent background and an animated GIF as it is designed to be used during asynchronous remote data requests.

That being said, please allow me to elaborate on how the desired outcome can be achieved particularly for the Telerik UI for ASP.NET Core suite in more detail:

• Create an external "div" element that will act as a container for the progress indicator. Note that it is mandatory to be inserted after the Chart's declaration:
  

@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
     .Name("chart1")
     ...
)

<div class="chart-loading"></div>

• Wrap both the Chart declaration and previously created div element in a separate div container. This would be required in order to further access the loading indicator during its initialization within the Chart component:
  

<div class="chart-wrap" style="position: relative;">
	@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
		.Name("chart1")
		...
	)
	
	<div class="chart-loading"></div>
</div>

• Wire to the document.ready() method to ensure the DOM's rendering and initialize the indicator:
  

<script>
    $(document).ready(function() {
            // Spin all loading indicators on the page.
            kendo.ui.progress($(".chart-loading"), true);
    });
</script>

• Subscribe to the Chart's Render event and within the handler, disable the loading indicator:
  

<script>
    function onRender(e){
        var loading = $(".chart-loading", e.sender.element.parent());
        kendo.ui.progress(loading, false); // Disable the loading indicator.
    }
</script>

For your convenience, here is a Telerik REPL example that illustrates the mentioned above within a TabStrip scenario as well:

• Telerik REPL for ASP.NET Core Example

I hope this helps.

[CHIHPEI]

Hi Alexander,

Thank you for the great example,

It works fine for me.