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

Rendering Chart in 2nd Tab

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

3 Replies

DL Deepa Loganathan Syncfusion Team 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.  




KT Kenneth Tang January 31, 2019 02:10 PM UTC

Dear Deepa,

Thank a lot!

KennethT


DL Deepa Loganathan Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon