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.
Syncfusion Feedback

Rendering time of the Tab control

Thread ID:

Created:

Updated:

Platform:

Replies:

131940 Aug 4,2017 03:25 AM Aug 8,2017 05:24 AM ASP.NET MVC 3
loading
Tags: Tab
Jacob
Asked On August 4, 2017 03:25 AM

Rendering time of the Tab control

Hi,

There is a issue about rendering time of the Tab control.

I would use the example from here:

Sample : http://www.syncfusion.com/downloads/support/forum/131867/ze/SyncfusionMvcApplication111552468254

This project can reproduce the problem I mentioned.

When the TabFeatures page is loaded, the Tab control need some time to render.

And this process can be observed, please refer to the 001.png and 002.png.

Is there any way to solve this issue?

Thank you so much.

Best regards.

Attachment: pics_7c3ee5f9.zip

Keerthana Rajendran [Syncfusion]
Replied On August 7, 2017 05:40 AM

Hi Jacob,   
   
Thank you for contacting Syncfusion Support.   
   
Since our controls are based on JavaScript, there is a slight delay between control serialization and rendering, using script. In this delay the serialized html element of the control in DOM are visible so we suggest to follow the below workaround to make the control rendering even.   
   
We can achieve this by rendering the control inside a parent container. Initially set the “display” css property for the container as “none” and then make this as “block” during create event of tab so that the controls will be displayed after rendering.   
   
Please refer to the given code   
   
<div id = "ControlRegion">   
     <div style="width: 500px">   
        @{Html.EJ().Tab("defaultTabs").ClientSideEvents(evt => evt.ItemActive("currentTab").Create("oncreate")).ShowCloseButton(false).EnablePersistence(false).HeaderPosition(HeaderPosition.Top).Items(data =>   
           {   
               data.Add().ID("steelman").Text("Tab 1").ContentTemplate(@<div>   
                     
               </div>);   
               data.Add().ID("woldwar").Text("Tab 2").ContentTemplate(@<div>   
              @Html.EJ().FileExplorer("fileExplorer").Path("http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/").AjaxAction(@Url.Content("http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations")).IsResponsive(true).Width("100%").MinWidth("150px").Layout(LayoutType.Grid).EnableResize(true).Height("600px")   
               </div>);   
                 
           }).Render();}   
    </div>   
</div>   
   
<script>   
    function currentTab() {   
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");   
        fileExplorerObj.adjustSize();   
    }   
    function oncreate()   
    {   
        $("#ControlRegion").css("display", "block");   
    }   
   </script>   
<style>   
   #ControlRegion{   
       display: none;   
   }   
</style>   
   
We have attached a sample for your reference. Please download the sample from the below link   
   
   
To reduce the time taken for loading scripts and css, we can also  use CSG so that we can generate scripts for the required controls only and use that custom script in the application   
   
      
Regards,   
Keerthana.   


Jacob
Replied On August 7, 2017 09:47 PM

Hi, Keerthana

Personally, I don't like this solution.

I do'nt like to Add Css in View, which can cause confusion.

But it really can solve this problem.

Thanks,

Best regards.


Keerthana Rajendran [Syncfusion]
Replied On August 8, 2017 05:24 AM

Hi Jacob,   
   
Thanks for your update.   
   
As we had mentioned earlier, at the time of control rendering, the serialized HTML elements are displayed. We had suggested that you add CSS only as a workaround to make these HTML elements invisible before rendering. If you are not satisfied with the previous workaround, we would like to suggest an alternate solution of adding styles through htmlAttributes instead of direct CSS in View page. Please refer to the below given code.   
   
View:   
 @{Html.EJ().Tab("defaultTabs").ShowCloseButton(false).HtmlAttributes(new Dictionary<string, object>{{ "style" , "visibility:hidden"}}).ClientSideEvents(e=>e.Create("oncreate").ItemActive("currentTab")). Items(data =>   
            {   
            data.Add().ID("steelman").Text("Tab 1").ContentTemplate(@<div>   
                     
               </div>);   
               data.Add().ID("woldwar").Text("Tab 2").ContentTemplate(@<div>   
               ……………….. 
               </div>);   
                 
           }).Render();}<script>   
       
    function oncreate()   
    {   
       this.setModel({ htmlAttributes: { style: "visibility:visible" } })   
    }   
</script>   
   
   
We have modified our previous sample based on this. Please download the sample from: http://www.syncfusion.com/downloads/support/forum/131940/ze/Tab-68557806.zip 
   
   
     
   
Regards,   
Keerthana  
 


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

;