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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Create tabs on buton click

Thread ID:

Created:

Updated:

Platform:

Replies:

120749 Oct 11,2015 10:50 AM UTC Oct 14,2015 09:46 AM UTC ASP.NET Web Forms 3
loading
Tags: Tab
Manolo
Asked On October 11, 2015 10:50 AM UTC

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 [Syncfusion]
Replied On October 12, 2015 03:07 PM UTC

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
Replied On October 13, 2015 09:33 AM UTC

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 [Syncfusion]
Replied On October 14, 2015 09:46 AM UTC

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


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.

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

;