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.
Unfortunately, activation email could not send to your email. Please try again.

Tab and Progress Bar

Thread ID:





132803 Sep 21,2017 03:31 PM Sep 22,2017 08:27 AM ASP.NET MVC 1
Tags: Tab
Asked On September 21, 2017 03:31 PM

Is it possible to put a progress bar in the Tab to indicate page loading?
My tabs are created dynamically (using addItem in ASP.NET MVC) and the screens have many controls.

Prince Oliver [Syncfusion]
Replied On September 22, 2017 08:27 AM

Hi Luciano, 

Thank you for contacting Syncfusion forums. 

We cannot use Progressbar control to track the progress of page load. Since the total time to load and content size will be unknown. So, instead of Progressbar control you can use WaitingPopup control to show a loading spinner and hide it once the content load completes. Kindly refer to the following code snippet. 

<div class="controlframe"> 
    @{Html.EJ().Tab("tabSample").Items(data => 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
<button id="btn1" onclick="additems()">AddItem</button> 
    function additems() { 
        var tabObj = $("#tabSample").data("ejTab"); 
        tabObj.addItem("#new", "New Item", 1); 
    function loaditems() { 
        $("#new").ejWaitingPopup({ showOnInit: true, appendTo: ".controlframe" }); //rendering waiting popup control to the tab's content 
                type: 'POST', 
                url: "/Tab/_contentLoad", 
                success: function (data) { 
                    $("#new").data("ejWaitingPopup").hide(); // hiding waiting popup once the content is loaded 
                    $("#new").html(data); //appending the content to the tabitem 

In the above code, we have used a button click to add new item to the tab. We load the content to the new tab only upon clicking the tabitem, using itemActive event. We have prepared a sample for your convenience, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/132803/ze/TabWithProgressbar163012902 



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.

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.