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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Rendering Chart in 2nd Tab

Thread ID:

Created:

Updated:

Platform:

Replies:

142383 Jan 31,2019 02:07 AM UTC Feb 1,2019 04:51 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Tab
Kenneth Tang
Asked On January 31, 2019 02:07 AM UTC

Dear all,

When we put a chart in non-seleted tab within tab control, we found that the chart can't resize when user active that tab.
Please advance how we could solve the issue, thx.

KennethT

Attachment: Archive_dd4fabc8.zip

Deepa Loganathan [Syncfusion]
Replied On January 31, 2019 07:27 AM UTC

Hi Kenneth,    
 
We understood your concerns regarding Tab control. This issue can be resolved using one of the below options. 
 
1.     If you are using ContentTemplate option to add Tab content 
 
The reported issue is a known issue in the reported version and has been fixed in patch release version (16.4.47). With this fix, the tab content rendered with ContentTemplate will fit inside the Tab item. 
  
So please use the updated Nuget package to the latest version to resolve the issue that can be downloaded from the following link.  
  
   
Please check our below help link to render Tab using Content template and get back to us if you have any further queries.   
  
 
2.     Other than ContentTemplate 
 
If you are not using ContentTemplate ,  you need to refresh the Chart instance in the selected event of Tab as given in the below code.  
 
 
 
@Html.EJS().Tab("ej2Tab").Items(@Viewbag.items).Selected("tabSelected").Render()  
  
<script>  
    function tabSelected(e) {  
 
         if(e.selectedIndex === 2){ // check the selected Index 
 
        setTimeout(() => {   
            var chartEle = document.querySelector('.e-tab .e-content #e-content_' + ((e === undefined || e === null) ? 0 : e.selectedIndex) + ' .e-chart');  
            var chartObj = chartEle.ej2_instances[0];  
            chartObj.refresh(); // refreshed chart object on tab selection  
        }, 400);  
           } 
    }  
</script>  
  
With this, the Chart will be refreshed to fit in the Tab content. 
 
Kindly let us know if you have any further concerns. We will be happy to assist you.  
 
Regards,   
Deepa L.  



Kenneth Tang
Replied On January 31, 2019 02:10 PM UTC

Dear Deepa,

Thank a lot!

KennethT

Deepa Loganathan [Syncfusion]
Replied On February 1, 2019 04:51 AM UTC

Hi Kenneth,  
 
You are most welcome.  
 
Please get back to us if you have any further queries. 
 
Regards,  
Deepa L. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;