Create tabs on buton click

[Manolo]

Hi,

I want create determinate tabs when a user click on button. I want to do some similar at this page:

https://www.syncfusion.com/kb/3232/how-to-add-usercontrol-inside-tab-from-code-behind

but I need  create the tabs on button click instead on load event.

I've the next probems:

• If I create tabs on click event, the tabs are not render fine
• If I create tabs on load, I need click on button twice for get the tabs, and if I click again, my tabs show empty data
• Other question is, how can I get the selected tab show a blue line on tab top, in your examples it's showed but I can't show it.

Sorry for my English. I attach an example for test my problem

Attachment: Tab2_5879ba1.zip

[Kasithangam C]

Hi Manolo,

Query 1: I need create the tabs on button click instead on load event.If I create tabs on click event, the tabs are not render fine.

Tabs were not rendered on click event due to the scripts were not registered properly while adding usercontrol page inside tab control.To resolve this issue,please set false to the “LoadEJResourcesFromAssembly” key which is in the web.config file and refer all the necessary scripts in Site.Master page.

<code>

<appSettings>

    <add key="LoadEJResourcesFromAssembly" value="false" />   
  </appSettings>
</code>

We have modified your sample based on this and please refer to the following sample:

Sample: Sample

Also, you have render tab items based on the dropdownlist items choosen in the DropDownList.When we create same control id in the page then our controls will not be render.So we can add user control page which is render our controls for a single tab item.

Query2: If I create tabs on load, I need click on button twice for get the tabs, and if I click again, my tabs show empty data.

We are unable to reproduce this issue.Could you please share the screen shot or video information to reproduce the issue in our end.

Query3: how can I get the selected tab show a blue line on tab top, in your examples it's showed but I can't show it.

We have included css for selected tab show a blue line on tab top in our vol3 release, 2015. Our Essential Studio Volume 3, 2015 (13.3.0.7) is rolled out and is available for download under the following link.
https://www.syncfusion.com/forums/120659/essential-studio-2015-volume-3-final-release-v13-3-0-7-is-available-for-download
                                       
You can use Vol3 theme files to achieve this. Please let us know if you have any further query.

Regards,

Kasithangam

[Manolo]

Hi Kasithangam

Thanks for your answer. It works fine.

But I've a doubt with question 3: I've update to versión 13.3.0.7, but the selected tab index doesn't show the top blue bar. And also, if I want change the font size of tab caption text, what do I have to do?

Thanks

[Kasithangam C]

Hi Manolo,

Thanks for your update.

Query 1: I've update to versión 13.3.0.7, but the selected tab index doesn't show the top blue bar

We have referred 13.3.0.7 version theme files in your sample.It is working fine.We are able to display the blue bar on the selected tab.Please refer to the following sample:

Sample: Sample

Please find the below screen shot to display the top blue line for the selected tab item:



We have showcased this in our online sample and please refer to the below online demo link:

http://js.syncfusion.com/demos/web/#!/azure/tab/DefaultFunctionalities


Query 2 : If I want change the font size of tab caption text, what do I have to do?

We can set the font size for the tab header text by using the below css.Please find the code example for the same:

<code>

<style>

        .e-tab .e-header>.e-item a{

            font-size:25px;

        }
    </style>
</code>
Please let us know, if you have any further query.

Regards,

Kasithangam