Tab and Progress Bar

[LUCIANO ALMEIDA PIMENTA]

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]

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