Rendering Chart in 2nd Tab

[Kenneth Tang]

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]

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.  

  

https://www.nuget.org/packages/Syncfusion.EJ2.MVC5/  

   

Please check our below help link to render Tab using Content template and get back to us if you have any further queries.   

  

https://ej2.syncfusion.com/aspnetmvc/documentation/tab/how-to/render-the-tab-using-content-template   

 

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]

Dear Deepa,

Thank a lot!

KennethT

[Deepa Loganathan]

Hi Kenneth,  

 

You are most welcome.  

 

Please get back to us if you have any further queries. 

 

Regards,  

Deepa L.