Rendered issue in Tab

[Jacob]

Hello,

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 =>
{

//...

data.Add().ID("File").Text("File").ContentTemplate(@<div>

    @*@(Html.EJ().FileExplorer("fileExplorer")
            .Height("600px")
            .Width("100%")
            .IsResponsive(true)
            .MinWidth("100%")
            .EnableResize(true)
            .Path("http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/")
            .AjaxAction("http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations")
            .AjaxSettings(settings =>
                settings.Read(read =>
                    read.Url("http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperationsCors")
            .DataType("jsonp")
            ))
        )*@

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

    </div>);
}

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

[Kaviyarasu Sivasenapathi]

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.  

 

[CSHTML] 

@{ 

    ViewBag.Title = "Tab"; 

    Layout = "~/Views/Shared/_Layout.cshtml"; 

} 

<h2>Tab Default:</h2> 

<br/> 

<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> 

                   

               </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] 

 

<script> 

    function currentTab() { 

        var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); 

        fileExplorerObj.adjustSize(); 

    } 

</script> 

For your convenience, we have attached the sample below.  

 

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

 

To know more details about adjustSize() method, please refer the following documentation link  

 

API Link : https://help.syncfusion.com/api/js/ejfileexplorer#methods:adjustsize  

 

We have already fixed this issue and included in Essential studio 15.2.0.46 version. So please use your essential studio version to 15.2.0.46 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.    

  

Regards,  

Kaviyarasu S  

[Jacob]

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.

[Kaviyarasu Sivasenapathi]

Hi Jacob, 

Thanks for your update. 

Please let us know if you need further assistance on this. 

 

Regards, 

Kaviyarasu S