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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tab and Progress Bar

Thread ID:

Created:

Updated:

Platform:

Replies:

132803 Sep 21,2017 07:31 PM UTC Sep 22,2017 12:27 PM UTC ASP.NET MVC 1
loading
Tags: Tab
LUCIANO ALMEIDA PIMENTA
Asked On September 21, 2017 07:31 PM UTC

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 12:27 PM UTC

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 => 
        { 
        data.Add().ID("TW").Text("Twitter").ContentTemplate(@<div> 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
    </div>); 
        }).ClientSideEvents(e=>e.ItemActive("loaditems")).Render();} 
</div> 
<button id="btn1" onclick="additems()">AddItem</button> 
<script> 
    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 
            $.ajax({ 
                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 
                } 
            }); 
    } 
</script> 

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 

Regards, 
Prince 



CONFIRMATION

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.

Warning Icon 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.Close Icon

;