Tab Render Issues

[Murugan]

Hi,

I have a tab control which has 5 tabs. Each tab is calling the different partial view. When I execute the application, first the page shows the tab list with hyperlink and then displays each partial view controls and finally displays the tab control in proper format.

I would like to see the output as fully loaded tab control. I have attached the tab partial view.

Let me know, what I am missing there to render the fully loaded tab.

Thanks,

Murugan 

TabRender_52b2621c.zip

[Gurunathan A]

Hi Murugan,

Thanks for contacting Syncfusion.

Preloading PartialView in each tab items makes some delay, so we suggest you load the contents on fly. It makes your application load at a faster rate and display the content properly. In  rel='nofollow' href  attribute consisting of a URI with a fragment identifier must have a valid  local identifier as the portion after the last hash of main URL. A  local identifier consists of ControlerName/ActionName for a particular tab.  Please refer the below given code snippet,

<code>

[.cshtml]

<div id="tabContents">

       <ul>

          <li><a rel='nofollow' href="Home/Tab1">Essential Tools</a></li>

          <li><a rel='nofollow' href="Home/Tab2">Essential Chart</a></li>

          <li><a rel='nofollow' href="Home/Tab3">Essential Grid</a></li>

       </ul>

</div>

 

[controller.cs]

 

public ActionResult Tab1()

        {

             return PartialView("Partial1");

        }

        public ActionResult Tab2()

        {

             return PartialView ("Partial2");

        }

        public ActionResult Tab3()

        {

             return PartialView("Partial3");

        }

 

</code>

Note:  Add three PartialView in your View folder.

To make your work easier, we have also prepared a simple sample to show case this behavior and the sample can be downloaded from the link given below,

Tabwithview.zip

 

 

Warm Regards,

 

Gurunathan A

[Murugan]

Hi Gurunathan,

Thank you for your quick response.

The problem is with grid and scheduler controls. I have 5 tabs. Each tab has been rendered with different partial view such as Grid, Chart, Tree View, Scheduler and drop down list controls. When you have the plain text inside the partial view, there is no issue. When you have the controls inside the partial view which behaves differently.

Can you please try with different controls inside the partial view and post the sample.

Regards,

Murugan

[Gurunathan A]

Hi Murugan,

Thanks for contacting Syncfusion.

Each tab has been rendered with different partial view such as Grid, Chart, Tree View, Scheduler and drop down list controls. We have prepared a simple sample with Schedule, Grid, TreeView, Chart and Drop Down in each tab item to show case this behavior and we are not getting enormous delay during page load. Still, if the issue exists with this sample then please record a video and share with us it will help us to identify and sort out the cause of this issue.

The sample can be downloaded from the link given below,

Mini_Sample.zip

Regards,
Gurunathan A

[Murugan]

Hi Gurunathan,

Thank you for the sample.

Unfortunately, I dont have the latest version of syncfusion. So, I used the existing version and tried to build the application and I got the following error.

Microsoft JScript runtime error: Unable to get value of the property 'Button': object is null or undefined

I have attached the project. I tried to implement the same way as you did in my project, there also I got the same exception.

Can you please let me know what I am missing?

Regards,

Murugan

Mini_Sample_f5506149.zip

[Gurunathan A]

Hi Murugan,

We regret for the delay in getting back to you.

 Loading the content on fly in tab is a known issue in version 11.1.0.21. We have already fixed this issue in latest volume release v11.2.0.25.  So, we suggest you to upgrade to the latest release version 11.2.0.25.

Kindly let us know if you have further queries.

 

Warm Regards,

Gurunathan A