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.
Unfortunately, activation email could not send to your email. Please try again.

Syncfusion controls in Syncfusion Tab unusual display style

Thread ID:

Created:

Updated:

Platform:

Replies:

131234 Jun 29,2017 09:47 PM Jul 3,2017 12:10 AM ASP.NET MVC 3
loading
Tags: Tab
Jacob
Asked On June 29, 2017 09:47 PM

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.

Keerthana Rajendran [Syncfusion]
Replied On June 30, 2017 08:42 AM

  
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. 


Jacob
Replied On July 2, 2017 10:18 PM

Hi,

Thanks for the sample and the solution.

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

Thanks a lot.


Keerthana Rajendran [Syncfusion]
Replied On July 3, 2017 12:10 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;