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

Syncfusion controls in Syncfusion Tab unusual display style

Hi,

I am glad to use Syncfusion frameworks, and I trying this since last 2 days with lots of Syncfusion controls, and I using ASP.NET MVC framework.

But I have some problem when I use the Tab control.

I have created a Syncfusion Tab control, and I want to put something in.

In the View, the demo code is like this:

    @Html.EJ().Tab("Tab").Items(data =>
{
data.Add().ID("demo").Text("demo").ContentTemplate(@<div>

        @Html.Action("PartialViewIndex", "demo")

    </div>);
}

I thought this way I could made lots Syncfusion controls as PartialView and combine more controls in one page from using Syncfusion Tab control.

This works fine in most situations but for some Syncfusion controls it will have problem.

For some example, Gantt, and Schedule will not compile success in html at first, but when I change mine Google Chorme browser size(like F11), it will refresh and worked.

The other case is FileExplorer, it always be fixed in one size, I still can't change the size, and it's too small.

I have not yet used any datasourse in this project, almost just use Syncfusion website demo code and online documentation, so I find this weird.

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.

3 Replies

KR Keerthana Rajendran Syncfusion Team June 30, 2017 12:42 PM UTC

  
Hi Jacob, 
 
Thank you for contacting Syncfusion support 

Query: For some example, Gantt, and Schedule will not compile success in html at first, but when I change mine Google Chrome browser size(like F11), it will refresh and worked. 

Gantt: At the load time, the Gantt will be rendered inside the hidden element of tab control. Hence, the control width and height will not be updated properly. To overcome this issue, we must update the “SizeSettings” of Gantt once we switched to second tab. To achieve this requirement we can use “ItemActive” event of Tab control which will be triggered when we switch  between  tab items . In this event we can update the Gantt control size properly.   
Please refer following code snippet 
@Html.EJ().Tab("Syncfusion_Control")   
//..   
.ClientSideEvents(eve => eve.ItemActive("itemActive"))   
   
<script type="text/javascript">   
function itemActive(args) {   
            //returns current active index.   
            if (args.activeIndex == 1) {   
                var obj = $("#GanttContainer").data("ejGantt");   
                if (obj) {   
                    obj.setModel({ "sizeSettings": { "height": "450px","width": "100%" } });   
                }   
            }   
        }       
</script>   
 
We have prepared a sample for your reference. Please find the sample location as below,   
 
Schedule: When a Scheduler width is set to 100%, it will consider its parent div element width. In your case, consider Scheduler is rendered in second Tab (which is the parent div element for second Scheduler) whose width will 0. Therefore, when the second Tab is clicked Scheduler width is not adjusted properly and kindly refer the below KB link to overcome the issue.  
 
Query: The other case is FileExplorer, it always be fixed in one size, I still can't change the size, and it's too small. 

We have analyzed your query. You can achieve your requirement (“Need to change the size of FileExplorer control”) by using EnableResize property. This property is used to enable/disable the resizing option in FileExplorer control. If you set width as 100% then FileExplorer control takes full width of parent element. Please refer the below code example,  
  
[_fileExplorer.cshtml]  
  
@(Html.EJ().FileExplorer("fileExplorer").Path("~/FileBrowser/").AjaxAction(@Url.Content("~/Home/FileActionDefault"))  
    .Width("100%").IsResponsive(true).MinWidth("150px").EnableResize(true))  
  
  
  
For your reference, we have prepared a sample based on this, and it can be downloaded from the following location: 

Sample: FileExplorer

For more details on the 
EnableResize method, please refer to the help document link: 
  
Please let us know whether the provided sample is helpful in achieving your requirement. If not, get back to us with more information to proceed further. 

Regards, 
Keerthana. 



JA Jacob July 3, 2017 02:18 AM UTC

Hi,

Thanks for the sample and the solution.

Now it worked well and I will keep testing other Syncfusion controls.

Thanks a lot.



KR Keerthana Rajendran Syncfusion Team July 3, 2017 04:10 AM UTC

Hi Jacob, 
 
We are glad to hear that your issue has been resolved . Please get back to us if you require any further assistance on this. We will be happy to assist you. 
 
Regards, 
Keerthana. 


Loader.
Up arrow icon