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

Rendered issue in Tab


I found the FileExplorer will be rendered inside the hidden element of tab control at first.

So when I use the Tab control, it will have a issue that the FileExplorer will not be updated properly.

Here is the code:

    @Html.EJ().Tab("Tab").Items(data =>



            .AjaxSettings(settings =>
                settings.Read(read =>

    @Html.Action("PartialFilesIndex", "Files")


This worked well if the FileExplorer be put at the first Tab page, but at the other Tab page it will not success.  #(Please refer to the 01.png)

When I change mine Google Chorme browser size(like F11), it will refresh and worked but it still not worked well. #(Please refer to the 02.png)

Even if I use Syncfusion online demo code to replace mine PartialView the same issue still exist.

My english is not that good because english is not my first language so forgive me if i make some mistakes.

Thank you so much.

Best Regards.

Attachment: pics_cda9ffc8.zip

3 Replies

KS Kaviyarasu Sivasenapathi Syncfusion Team August 2, 2017 03:37 PM UTC

Hi Jacob,  
Thanks for using Syncfusion products.  
We have analyzed your query (“Rendered issue in Tab). You can achieve your requirement by calling “adjustSize()” method of FileExplorer component during the “itemActive” event of Tab component. Please refer the below code block.  

    ViewBag.Title = "Tab"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
<h2>Tab Default:</h2> 
<div id = "ControlRegion"> 
     <div style="width: 500px"> 
        @{Html.EJ().Tab("defaultTabs").ClientSideEvents(evt => evt.ItemActive("currentTab")).ShowCloseButton(false).EnablePersistence(false).HeaderPosition(HeaderPosition.Top).Items(data => 
               data.Add().ID("steelman").Text("Tab 1").ContentTemplate(@<div> 
               data.Add().ID("woldwar").Text("Tab 2").ContentTemplate(@<div> 
    function currentTab() { 
        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); 

For your convenience, we have attached the sample below.  
To know more details about adjustSize() method, please refer the following documentation link  
We have already fixed this issue and included in Essential studio version. So please use your essential studio version to and above. 
Please let us know whether the provided sample helps you to achieve your requirement. If not, get back to us with more information we will assist you gladly.    
Kaviyarasu S  

JA Jacob August 4, 2017 06:52 AM UTC

Hi Kaviyarasu,

Thanks a lot, this issue was be solved.

But I found other issue at Tabs control, I will post it in the Tabs forum.

Best regards.

KS Kaviyarasu Sivasenapathi Syncfusion Team August 7, 2017 06:45 AM UTC

Hi Jacob, 
Thanks for your update. 
Please let us know if you need further assistance on this. 
Kaviyarasu S   

Live Chat Icon For mobile
Up arrow icon