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. Image for the cookie policy date

Rendering time of the Tab control

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

3 Replies

KR Keerthana Rajendran Syncfusion Team August 7, 2017 09:40 AM UTC

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.   



JA Jacob August 8, 2017 01:47 AM UTC

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.



KR Keerthana Rajendran Syncfusion Team August 8, 2017 09:24 AM UTC

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  
 


Loader.
Up arrow icon