Rendering time of the Tab control

[Jacob]

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]

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   

   

Sample: http://www.syncfusion.com/downloads/support/forum/131940/ze/Sample-436134323.zip   

   

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]

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]

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 

   

   

UG Link:  https://help.syncfusion.com/api/js/ejtab#members:htmlattributes 

     

   

Regards,   

Keerthana