ajax TabControl: text

Showing posts with label text. Show all posts

Wednesday, March 28, 2012

Tab container & Tab panel

I am trying to customize look n feel of tab panel's Header Text -- by giving a hover effect or a different background image to tabs. I could not see any way of achieving it.

Where is the location of class ajax__tab_xp? If I create my own class, the separate tabs disappear.. How to apply or modify the stylesheet class??

Thanks in advance for your help.

Anyone guyz? AJAX experts? Please help.

I will greatly appreciate a line of working code for this.. Thanks in advance.

Hi,

Here is a code snippet demonstrate using custom style on tabContainer.

<ajaxToolkit:TabContainer CssClass="ajax__tab_xp2" ....................

This question is being asked soooo many times...

Maybe this'll help:

http://forums.asp.net/t/1163303.aspx

And maybe someone should put this in the FAQ (if it isn't already there)..

Thank you Raymond.. your post has solved my problem 95%.. great!

Quick question, on Hover I have:

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
/* background:no-repeat; */
font-weight:bold;

due to this, all tabs move or drift little bit (due to font weight change) on Mouse Over.
How can I avoid this?

Thanks & I mark this as answer! Yes

Thank you NNM, for the post link. I totally agree with other member -- TabPanel/Container controls are so "non-intuitive" .. if changing style on tab control must be done through css then why can't MSFT write a single line or provide a sample in their AJAX demos!! I spent freaking hours in figuring this out ...

Believe it .. I am gonna have questions when I start actual coding with Tab Controls! .. Hmm

Sam

sdekha76 :

Try changing thepadding value. There's no fixed answer to padding value, since I think it depends on the font size.

edit: the tab styling may seem non intuitive at first, but once you play around with it a bit, you'll be able to customize it completely, even changing the background images. I really love this toolkit control.

tab container: tab panel appears but not the controls in it

Hello,

I have a ajax tab container with 4 tab panels. each panel has arround 30 to 40 controls.later I added another(5th) panel with text box control. The new panel appears, but the control in it is not displayed.

When I tested again with a new file,new tab container, with 7 to 8 panels with no controls. I just added 1 single control to 8 th panel. This time it displays properly.

I am unable to figure out whether it is problem with tab container control, because it has too many controls? I am using ajax control toolkit version 1.0.10301.0.

(or)

problem with the html content I wrote.Here is my code.Pls help.Its urgent

<divid="divMain"style="overflow: auto">

<cc1:TabContainerID="TabContainer1"runat="server"Visible="true"ActiveTabIndex="2">

<cc1:TabPanelID="tpCallHandling"runat="server">

Call Handling</HeaderTemplate>

<tablewidth="98%"style="height: 98%">

<tr>

<tdalign="center"colspan="5"class="aimTableH">

<asp:Labelrunat="server"ID="Label29"CssClass="aimth2"><b> Call Handling</b></asp:Label></td>

</tr>

<trclass="aimTableH"align="center">

<td>

<asp:Labelrunat="server"ID="lblEscalate"CssClass="aimth2"><b>Escalate</b></asp:Label>

</td>

<td>

<asp:Labelrunat="server"ID="Label1"CssClass="aimth2"><b>Lead Type</b></asp:Label>

</td>

<td>

<asp:Labelrunat="server"ID="Label2"CssClass="aimth2"><b>Maximum Attempts</b></asp:Label>

</td>

<td>

<asp:Labelrunat="server"ID="Label3"CssClass="aimth2"><b>Word Tracks</b></asp:Label>

</td>

<td>

<asp:LabelID="lblEmailRecipients"runat="server"CssClass="aimth2"><b>Email Recipients</b></asp:Label>

</td>

</tr>

</table>

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanelrunat="server"ID="TabPanel2">

<HeaderTemplate>TESTING</HeaderTemplate>

<tablewidth="98%"height="100%">

<tr>

<td>

<asp:TextBoxrunat="server"ID="txt1"></asp:TextBox>

</td>

</tr>

</table>

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</div>

<tablewidth="98%"height="100%">

In bold, that is an error... Style="height:98%" is an error too...

My guess is maybe your controls are hidden by the table...

Another tip: if you have too many controls in each tab, maybe try seperating the contents into iframes... Easier to debug..

Monday, March 26, 2012

Tab control disabling tab from code-behind

Hi i think i found a bug.

When i disable a tab from the code behind using following code the text of the tab stays on the screen.

Permits_tab.Enabled =

False

Permits_tab.Visible =

False

So instead i wrote the following code

ScriptManager.RegisterStartupScript(Main_Tabs,

Me.GetType,"removePermitTab","setTimeout(""$find('Main_Tabs').get_tabs()[1].set_enabled(true);"",100);",True)

it basically disables it after the object is build but there's a catch. I had to use timeout to do this because main tab is not built at the place of the code is placed. So if the page loads slow the timeout will run early if the page loads fast enough then the client will see the tab disappear from the tab and get confused.

It's working for me... Sort of.. I just set visible=false without setting enabled. The thing is, the nice gradient tab disappears just for that tab, but the headertext remains...
thats not working actually if you disable from client side using jscript no headertext no nothing shows up :P :)

Actually there is one much simpler solution ;)

Permits_tab.visible = false;

Permits_tab.headertext=""

And this works perfectly for me.

That solution is so sexy it brought tears to my eyes. Yes

HEYYYY thats cheating, hehehehe but works like a charm Stick out tongue

Saturday, March 24, 2012

tab panel header text not changing programaticlly??

Hi All, I am using AJAX tabcontainer in my one of the web application. This application needs to be support english as well as japanese language. I had tried to change tabpanel1 text at run time by resource file(.resx file) and using Tabcontainer.Tabs[0].HeaderText property. But still tabpanel1 is coming on webpage. If i make the changes at design time, it is working fine. Please let me know if anyone has idea over same. Thanks In Advance Arnold

Can you post your code?

------------------
When you ask a question, remember to click "mark as answered" when you get a reply which answers your question.

Hi,Pls find code for changing the tabpanel text at run time: TabContainer1.Tabs[0].HeaderText = Resources.Resource.tabpanel1; TabContainer1.Tabs[1].HeaderText = Resources.Resource.tabpanel2;Please let me know what I am doing wrong?Thanks Arnold.
Any idea?

In which event do you use the code you provided?

In page_load function.

Are you creating any of the objects dinamically?

No, I have created same at design time.Thanks & Regards,Arnold

Oh, yes. One more question... What version of Visual Studio are you using?

What version of the toolkit are you using?

Try just setting your header to a fixed string to eliminate the complexity, e.g. TabConainer.Tabs[0].HeaderText = "Testing" or TabPanel1.HeaderText = "Testing";

You also should be able to do something like HeaderText="<%$Resources:myResources, Welcome %>" in the ASPX. Seehttp://www.codeproject.com/useritems/localization.asp for more information.

-Damien

Hi Guys,

I am using ASP.NET 2.0 AJAX Extensions toolkit and I had already tried both ways few days back, but this was not working, that's why I have droped a forum here :-)

Please let me know whether this is a bug, or how can i fix this?

Thanks & Regards,

Arnold.

When you set a static string (e.g. TabContainer.Tabs[0].HeaderText = "Testing" or TabPanel1.HeaderText = "Testing";), do you still have the issue?

Assuming you do, it sounds to me like something in your code is overwriting your dynamic assignment. This is not a bug with the Toolkit as I have done this with version 10920.

By the way, you are confusing two different technologies... "ASP.NET 2.0 AJAX Extensions toolkit" isn't a version of the Toolkit. TheASP.NET AJAX 1.0 Extensions provide you with the UpdatePanel, ScriptManager, etc. while theAJAX Control Toolkit gives you all the extra controls like the Tabs, Accodion, etc. When I asked what version of the Toolkit you were using I was refering to the build number.

I suggest you try the 10920 build and see if you still are having the issue:http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941. If you are, all signs point to a bug in your code. In that case, step through your program putting a watch on the TabPanel1.HeaderText seeing where it ends up being changed.

-Damien

Hi,I apologize for giving wrong information. Actually I am using ASP.NET 2.0 AJAX Extension and AJAX toolkit version 1.0.10920.0 both.And even I had tried in all the ways:TabContainer1.Tabs[0].HeaderText = "sample app";TabContainer1.Tabs[0].HeaderText = Resources.Resource.tabpanel1;in aspx file,">But nothing is working.In watch window, right value is displaying but on GUI, value is same as the design time value.Any efforts regarding same will be appreciated as this minor issue is taking so much of time.Thanks & Regards,Arnold

Ok, with 10920, I know for a fact it works. There is a problem somewhere in your code, something must be overwriting your tab's header. Do a search for "HeaderText" in your app to see if in fact it is being set somewhere else.

-Damien

Hi Damien,Thanks for reply. Issue has been solved finally.Issue was with headertemplate. headertemplate in aspx. was overwriting the information.Thanks & Regards,Arnold

Tab panels header text cut off half way vertically

I have added on Tab Container which contain three panels. When I run the page, the header text of panel cuts of vertically, looks like a white bar on top of text. Any help will be highly appreciated.

Following is my code:

<div>
<cc1:TabContainer ID="TabContainer1" runat="server">
<cc1:TabPanel ID="pnlStoryList" runat="server" HeaderText="Story List">
<HeaderTemplate>
Story List
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td>
</td>
<td>
<b>Story Title</b>
</td>
<td colspan="3" align="center">
<b>Actions</b>
</td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="pnlOtherStory" runat="server">
<HeaderTemplate>
Other Stories
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td width="80%">
<b>Title</b></td>
<td width="20%" colspan="3" align="center">
<b>Actions</b></td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="pnlSharedStory" runat="server">
<HeaderTemplate>
Shared Stories
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td width="85%">
<b>Title</b></td>
<td colspan="2" width="15%">
<b>Actions</b></td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>

Hu Bdimtiaz,

Please make sure your have use the right DOCTYPE. Here is the write example.

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If it is not the write direction, please feel free to let me know with a repro.

Best regards,

Jonathan

<cc1:TabPanel ID="pnlStoryList" runat="server" HeaderText="Story List">
<HeaderTemplate>
Story List
</HeaderTemplate>

You don't need a headertemplate when you use HeaderText.

Try removing either the headertemplate or the HeaderText property.

edit: I bet your symptom is causes by the css in your headertemplate that does not come from the default tabs css, but from the page, and therefore becomes too big.

With HeaderText the default css will be used and it should fit nicely.

Hi NNM,

I have tested it. The result is cotent inside <HeaderTemplate> will be shown as the HeaderText.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"><ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"> <HeaderTemplate>12123</HeaderTemplate> <ContentTemplate>13123</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </form></body></html>

You can test it . It works pretty well. Now , you can remove the DocType and have another test. You will find the real exact root cause.

Best regards,

Jonathan

Tested... True...

And my above post about css in headertemplate is wrong.

Tab Properties

Hello,

How can I change the text type and color the AJAX tabs?

And how can I change the tab container outline color?

Can I do this using CSS or in some other way?

Thanks,

Miguel

Take a look at theTabs sample page theming section which discusses how to customize the Tabs.

tab visible to false at runtime??

The text of the tab shows up. How do I deal with that?

I found an answer:

http://forums.asp.net/p/1123799/1761705.aspx

Wednesday, March 21, 2012

Tabcontainer in formview - not inserting data

i am using a tabcontainer and panels inside the insertitemtemplate of a formview.

When i input text in the field and do an insert, a new record is created in the database, but the inputted fields are not processed??

If i place one textfield outside of the tabcontainer, the insert is working.

So, my question is: Is it not possible to use a tabcontainer IN a formview or do i need a workaround?

Maybe i just need to do it by inserting it manually, but then my question is, how do i get the inputted values from the formview?

Thanx for your help

Maurice

Hi Multje,

I had a similar issue when trying to use a dropdownlist bound to a sqldatasource AND the same dropdownlists selected value bound to the formview's datasource. I couldn't have it both ways, so I had to come up with a workaround.

Your situation is that the items in the tabcontainer would have to be referenced using the FindControl() method, which is not a built-in process in the formview... so your workaround will need to be similar to that which I used.

I put a hiddenfield in the formview, and when my dropdownlist selection changed, I put the selected item value into the hidden field. The formviews datasource was two-way bound to the hiddenfield, and not the dropdownlist itself.

What you will need to do is trigger the population of the hiddenfield's value in the formview when you do something within your tabcontainer. Get what I am saying? That way, the formview wont need to dig through the tabcontainer... it will use the hiddenfield. The hiddenfield will be populated by by your actions within the tabcontainer.

Hi,

thanx for the response.

I understand the workaround, however, in my case i dont have any dropdowns, just textboxes that are filled in by the user. I really cant understand why the formview, with the tabcontainer within in, containing the same fields as the formview normally has, databound and all, doesnt insert the values in the database? And the workaround in my case would be a lot of work to do, since my table has got about 35 fields to fill! That would mean i need 35 hidden fields as well??!!

There must be a better solution to this! :-)

Maurice

hi,

in code i found a way to make it work:

Protected

Sub BookTemplateDetail_OnIteminserting(ByVal senderAsObject,ByVal eAs System.Web.UI.WebControls.FormViewInsertEventArgs)Handles BookTemplateDetail.ItemInserting
Dim pAsNew TextBox
Dim SelTabContainerAsNew TabContainer
Dim SelTabPanelAsNew TabPanel

e.Cancel =True
Try
SelTabContainer = BookTemplateDetail.FindControl("TabContainer1")
SelTabPanel = SelTabContainer.FindControl("TabPanel1")
p = SelTabPanel.FindControl("new_tbook_template_naamTextBox")
dbStatus.Text = p.Text
Catch exAs Exception
dbStatus.Text ="Failed!"
EndTry
EndSub

this works, but MY GOD! I have 30 fields on this form (on 3 tabpanels). Do i need to find all af them, put them in separate strings and then call the insert method??

Any suggestions?

Hello guys, i've found a solution

Protected

Sub FvLodge_ItemUpdating(ByVal senderAsObject,ByVal eAs System.Web.UI.WebControls.FormViewUpdateEventArgs)Handles FvLodge.ItemUpdatingDim lodgeNombre, lodgeObservaciones, lodgePropiedadMLP, lodgeActivoAsStringDim lodgeNoches, lodgeHabitaciones, lodgeCapMaxHab, idUsuarioModificadorAsIntegerDim SelTabContainerAsNew TabContainerDim SelTabPanelAsNew TabPanelTry

SelTabContainer = FvLodge.FindControl(

"TbcDatosLodge")

SelTabPanel = SelTabContainer.FindControl(

"PnlDatos")

lodgeNombre =

CType(SelTabPanel.FindControl("TxtLodgeNombre"), TextBox).Text-->here i capture the value in the textbox that is inside the tabpanel

e.NewValues.Add(

"LodgeNombre", lodgeNombre) -->and here i pass that value as aNewValueto the collection of new values, is is important that the key name must be the same as in your update or insert queryCatch exAs Exception

e.Cancel =

TrueEndTryEndSub

hope this helps!..

Wednesday, March 28, 2012

Tab container & Tab panel

tab container: tab panel appears but not the controls in it

Monday, March 26, 2012

Tab control disabling tab from code-behind

Saturday, March 24, 2012

tab panel header text not changing programaticlly??

Tab panels header text cut off half way vertically

Tab Properties

tab visible to false at runtime??

Wednesday, March 21, 2012

Tabcontainer in formview - not inserting data

ajax TabControl

Blog Archive

About Me