Ajax Tabs not showing properly

I have tried implementing the tabcontainer using the example, and for some reason I cannot get the tabs to show properly. For some reason there is a grey box in each of the tabs which covers exactly half of every tab. Is there a style I need to add to fix this?

This a link to an image of what I am talking about:

http://shutter7.com/coppermine/displayimage.php?pid=2499&fullsize=1

Hi there,

For some reason, the use of ajax tab, your aspx are require to be xhtml validate.

Put following line in your aspx page. It will fixes the issue. Hope it helps!

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

<htmlxmlns="http://www.w3.org/1999/xhtml">

That fixed it, but now all of my pages with css styles are now messed up. For example: the same class for a font is working in one row and not the other.

Hi jwhite128,

I've had this problem too. I was able to solvethis using simple workaround: I just overwrote the CSS class style withmy own implementation which then I included directly in my applicationas CSS resource. I even can reproduce the original "XP" style of theTabContainer by just copying the relevant images in my application'sThemes folder.

So my suggestion: create new Tabs style andimplement whatever visual behavior you need, then just set the CssClassattribute of the TabContainer extender.

Kind regards,

sbogus.

I've tried looking for the class names... where are some docs that contain the class names in question?

Hi jwhite128,

There's no direct documentation about which CSS classes you can override and how to do that. There's rather than information spread over several source files from the AjaxControlToolkit source three. You should look at the Tabs subfolder (not the one from the Examples!)

These are the CSS classes you can override in a CSS file ("new" is the name of the style I choose for this post, you should then specify the TabContainer's attribute CssClass="ajax__tab_new" to override the CSS style):

/* inactive tab */
.ajax__tab_new .ajax__tab_header
.ajax__tab_new .ajax__tab_outer
.ajax__tab_new .ajax__tab_inner
.ajax__tab_new .ajax__tab_tab
/* active tab */
.ajax__tab_new .ajax__tab_active .ajax__tab_outer
.ajax__tab_new .ajax__tab_active .ajax__tab_inner
.ajax__tab_new .ajax__tab_active .ajax__tab_tab
/* tab hover */
.ajax__tab_new .ajax__tab_hover .ajax__tab_outer
.ajax__tab_new .ajax__tab_hover .ajax__tab_inner
.ajax__tab_new .ajax__tab_hover .ajax__tab_tab
/* tab's body */
.ajax__tab_new .ajax__tab_body

Kind regards,

sbogus.

This is for anyone who implements<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and finds that all of their classes and style sheets get messed up.

The classes in your page become case sensitive. So make sure you check the cases of your classes or else they will appear to be all jacked up.

AJAX Tabpanel - Runs slow on IE 7.0 but very fast on FireFox?

Folks,

I am using AJAX.net TabContainer control with 5 tabpanels in it. Each tabpanel has an update panel [update mode is "conditional"] and inside the update panel, I have a gridview control [Editable]. Now, I also have a "Save" button in each of the update panels, that will save the data I enter in the "GridView". The idea is, to update only the "current tab" when I click on "Save"

The problem is that, the code runs very fast on FireFox [meaning, the update is almost instantaneous]. However, on IE7, the update takes thrice as much time as the "FireFox". I think the Javascript runs slow on IE7

Any help or thoughts?

-Thanks

Any one from the AJAX Team?

ive experienced the same thing..very slow for IE rendering..3-4 second pause before the page renders to the screen versus FireFox which just pops up the content without a delay.

I also had the same problem. Actually i had two TabContainers on one page and i not checked firefox but it was very slow in IE and for that reason i removed tabcontainer from my code. Any reason for it being slow and any help in making it fast would be appriciated. Thanks.
Same here. I had to load several text areas into about 9 tabs. This text was really slagging IE. I ended up using a dropdownlist to choose which tabpanel to make visible instead of loading them all at once.

Hehehe... back in the bad old days before AJAX, I made tab-panels from the wizard control with some CSS work. Then when the AJAX extensions came along, I just droped the wizard into an update panel, and it worked great... 10 second job. Then I started converting these to the TabContainer / TabPanel when the AjaxControlToolkit came out. I have pretty much learned that I wasted my time because of the perfomance issues... it is "faster" on FireFox, but still has poor performance. Thank god for backups.

I have a similar sitiuation. I have 4 tabpanels, one tab has a selectable gridview and associated formview wrapped in an update panel. The other three tabs contain editable gridviews wrapped in update panels. One of three gridviews has two dropdownlists as columns with 8000+ selections. When I click on edit on a row using IE the row enters edit mode in around 4 seconds. If I then click on update or cancel it takes over 2 minutes to repaint; using Firefox it repaints in 5 seconds.

If I get rid of the update panels all is well in IE. If I leave the update panels and replace the dropdownlists with textboxes all is well in IE. Big dropdowns in updatepanel wrapped gridview columns seems to be a problem in IE. Firefox handles fine.

Any ideas??? I've Googled and tried things for two days to no avail?

AJAX TabContiners and UpdatePanels

Hi,

I have a page where I have an AJAX TabContainer stored within an UpdatePanel. When I view the page in either IE or FireFox the TabContainer's TabPanels aren't rendering correctly in that there is no clickable panel header or outline of the TabContainer. The controls I have placed in the tab panel appear okay however.

When I move the TabContainer out of the UpdatePanel everything is okay, however I need it to be in the UpdatePanel.

Has anyone else encountered this problem and if so is there a solution or should I just forget about using the TabContainer?

Thanks in advance.

Can you post the markup that you are using to do this.

I've used the same layout you mentioned before with no problem. I've used an updatepanel containing a tab container with tabs with no problem.

Hi

I have adapted the code in the attached blog by Shawn Burke which does demonstrate that a Tabcontainer in an update panel works and works well. Thanks to Shawn.

http://blogs.msdn.com/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx

However, I do have another problem with the Tabcontainer and update panel using the methodology described in the blog. I can get the tabcontainer to work with formview but when I try a reportviewer with parameters I get Javascript errors. I created a test page without the javascript (parameters in onload event) and the reportviewer works fine.

The errors are:

'this.m_clientController' is null or not an object

and

'ClientControllerctl00_ContentPlaceHolder1_TabContainer1_...' is null or not an object

Appreciate any help with this.

Thankyou

Michael

Hi,

Here's my markup:

<asp:UpdatePanel id="updMaster" runat="server">
<ContentTemplate>
<div id="meEdit">
<asp:Panel ID="pnlME" runat="server" CssClass="ME">
<div class="meContainer" style="width:750px;">
<asp:UpdatePanel id="upMain" runat="server" >
<ContentTemplate>
<div class="meSelection" style="float:left; width: 100%; margin-left: 0px; margin-top: 0px; padding: 3px;">

<ajaxToolkit:TabContainer ID="tcVehicles" runat="server">

<ajaxToolkit:TabPanel ID="tpD" runat="server" >
<ContentTemplate>
<asp:Label ID="lblDV" runat="server"></asp:Label>
<br />
<asp:DropDownList ID="ddlDV" runat="server" />
<br />
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel ID="tpA" runat="server">
<ContentTemplate>
<asp:Label ID="lblAnalogueVehicles" runat="server"></asp:Label>
<br />
<asp:DropDownList ID="ddlAnalogueVehicles" runat="server" />
<br />
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel id="updMaster" runat="server">

Depending on the content of a session variable I will either show either both the tab panels or only one of them but the code that does this is executed after Page_Load.

Thanks for your help.

Hmm, I've dumped my markup into a separate project and it's fine.

Looking at what I've got in place I think the problem may be due to my hiding the panel which contains the tab container at page_load and then showing it from a button click.

Ajax TabContainer event.

Hi,
I have a Ajax tabcontainer on my webpage. How can I handle the events when I changed the tabs. I have usedOnActiveTabChanged event in the tabcontainer but it is not working. Please can any one help me? I am providing my code here. Your response is highly appreciated.

<ajaxToolkit:TabContainerID="TabContainer1"runat="server"Width="100%"ActiveTabIndex="0"
ForeColor="green"OnActiveTabChanged="TabContainer1_ActiveTabChanged" >
<ajaxToolkit:TabPanelID="tabPanelSiteDetails"runat="server"HeaderText="Site Details"BorderStyle="Dotted">
<ContentTemplate>
<uc8:HeadingMessageID="HeadingMessage1"runat="server"/>
<uc1:Sites_SiteDetailsID="Sites_SiteDetails2"runat="server"/>
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="tabPanelCOntacts"runat="server"HeaderText="Contacts"CssClass="AjaxTabItem_Site">
<ContentTemplate>
<ucall:Sites_ContactDetailsID="ContactsAll"runat="server"/>
<br/>
<uc2:ContactsID="Contacts"runat="server"/>
<br/>
<uc7:EditDelteCancelID="EditDelteCancel3"runat="server"/>
</ContentTemplate>
</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

***********CODE BEHIND CODE**************

protectedvoid TabContainer1_ActiveTabChanged(object sender,EventArgs e)
{
FillData();
}

Thanks & Regards

Not sure it will help , but could you try to set AutoPostback = true for tab container?

I have the same problem.

Autopostback=> "is not a valid attribute" !

The callback arrives only after a request to the server.

A solution is perhaps to use theOnClientActiveTabChanged and then starting a request from Javascript.

Is there a better way?

Sincerely

Stephan Schipal

I used the same thing (OnClientActiveTabChanged event). It is working for me.

Is there any way to control the background color of the TabContainer???

Hi,

The name of this attribute is AutoPostBack. Please note the three capital letters in the word.

And as far as I know from my own eperience and from the experience of many other users, server-side eventing functions properly.

Kind regards,

sbogus.

Yes,

You can control the whole outlook of a tab panel (the tab container's entity). You can override the CssClass attribute of the TabContainer control. In your own CSS you can then define own style and themes for the container.

For example to control the body's outlook of a tab panel you should override the class

/* tab's body */
.ajax__tab_new .ajax__tab_body

If you need further assistance, just ask here again.

Kind regards,

sbogus.

Ajax tabContainer doesnt dispaly good

Hi! I dropped a ajax tabcontainer in master page, but it's not displaying good. I have this in masterpage:

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

<htmlxmlns="http://www.w3.org/1999/xhtml">

Thank you for the help here, been truggling with this for 2 days.

Hi James25,

Would you please give more information ? We cannot find out the exact root cause based on your description.

Best regards,

Jonathan.

Hi! Thank you for the reply! The cause is the Doctype:

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

If I leave it on the page the tabcontainer gets displayed good. If I take it off the tabcontainer gets broken. But, again if I don't put the doctype the footer takes up half the page.

AJAX TabContainer bold font issue

Just a little background. I have used the AJAX TabContainer in one of my previous project - begining of 2007 and had no issues with it whatsoever. I have started a new project and tried using the TabContainer and I am having yeoman amount of problems. I have a TabContainer with a few tabpanels. The TabPanels have a contentTemplate and no HeaderTemplate(s). Within the first tab I have a set of two tables and on the second tab I have a gridview and two detailView controls. No where in my code I am using a stylesheet or a style tag - so i am not specifying the font size - but ALL the controls within the tab panels are being rendered bold and large fonts. I have tried everything but to no avail and I am hoping someone can point me the right direction. Here's my code snippet. Any help would be mucho appreciated with a lot of gracias.

<asp:ContentContentPlaceHolderID="ContentPlaceHolder2"ID="Content1"runat="server">

<divstyle="background-color:#006400;color:white;font-family:@dotnet.itags.org.Arial Unicode MS"> Referadex Prospect Dashboard</div>

<ajax:TabContainerrunat="server"ID="main"ActiveTabIndex="0">

<ajax:TabPanelID="prospects"runat="server"HeaderText="Prospect Management">

<ContentTemplate>

<ajax:TabContainerid="prospectManagement"runat="server"ActiveTabIndex="0">

<ajax:TabPanelrunat="server"HeaderText="Add Prospects"ID="Add">

<ContentTemplate>

<table>

<tr>

<tdvalign="top">

<table>

<tr>

<divstyle="background-color:#006400;color:white;font-family:@dotnet.itags.org.Arial Unicode MS;Text-align:center">Prospects</div>

</tr>

<tr>

<tdstyle="font-size:small;">Company Name

</td>

<td>

<asp:TextBoxID="txtCompanyName"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Industry

</td>

<td>

<asp:DropDownListID="ddlIndustry"DataSourceID="industrysource"DataTextField="IndustryName"

runat="server"DataValueField="value"Width="250px"/>

</td>

</tr>

<tr>

<td>Address1

</td>

<td>

<asp:TextBoxID="txtAddr1"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Address2

</td>

<td>

<asp:TextBoxID="txtAddr2"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>City

</td>

<td>

<asp:TextBoxID="txtCity"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>State

</td>

<td>

<asp:DropDownListID="ddlState"runat="server"

DataSourceID="states"DataTextField="Name"

DataValueField="Value"Width="250px"/>

</td>

</tr>

<tr>

<td>Zip

</td>

<td>

<asp:TextBoxID="txtZip"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Country

</td>

<td>

<asp:DropDownListID="ddlCountry"runat="server"

DataSourceID="countries"DataTextField="Name"

DataValueField="Value"Width="250px"/>

</td>

</tr>

<tr>

<td>Phone1

</td>

<td>

<asp:TextBoxID="txtPhone1"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Phone2

</td>

<td>

<asp:TextBoxID="txtPhone2"runat="server"width="250px"/>

</td>

</tr>

<tr>

<td>Fax1

</td>

<td>

<asp:TextBoxID="txtFax1"runat="server"width="250px"/>

</td>

</tr>

<tr>

<td>Fax2

</td>

<td>

<asp:TextBoxID="txtFax2"runat="server"width="250px"/>

</td>

</tr>

<tr>

<td>Website

</td>

<td>

<asp:TextBoxID="txtWebsite"runat="server"Width="250px"/>

</td>

</tr>

</table>

</td>

<tdvalign="top">

<table>

<tr>

</tr>

</table>

<table>

<tr>

<divstyle="background-color:#006400;color:white;font-family:@dotnet.itags.org.Arial Unicode MS;Text-align:center">Contacts</div>

</tr>

<tr>

<td>First Name

</td>

<td>

<asp:TextBoxID="txtFirstName"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Last Name

</td>

<td>

<asp:TextBoxID="txtLastName"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Position

</td>

<td>

<asp:DropDownListID="ddlPosition"DataSourceID="positions"DataTextField="positionName"

DataValueField="value"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Direct Phone

</td>

<td>

<asp:TextBoxID="txtPhone"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Extension

</td>

<td>

<asp:TextBoxID="txtExtension"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Mobile Phone

</td>

<td>

<asp:TextBoxID="txtMobile"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Fax

</td>

<td>

<asp:TextBoxID="txtFax"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Email

</td>

<td>

<asp:TextBoxID="txtEmail"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Years with company

</td>

<td>

<asp:TextBoxID="txtYearswithcompany"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Decision Process

</td>

<td>

<asp:DropDownListID="ddlDecisionProcess"runat="server"DataSourceID="DecisionProcess"

DataTextField="decisionname"DataValueField="value"Width="250px"/>

</td>

</tr>

<tr>

<td>Relationship Type

</td>

<td>

<asp:DropDownListID="ddlRelationshipType"runat="server"

DataSourceID="RelationshipType"DataTextField="relationName"DataValueField="value"

Width="250px"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:ButtonID="btnEmptyContact"runat="server"Text="Add Prospect"OnClick="AddCompany"/>

</td>

</tr>

</table>

<asp:LabelID="lblMessage"runat="server"ForeColor="Red"Text="Label"Visible="False"></asp:Label></td>

</tr>

<tr>

</tr>

</table>

<table>

<tr>

<divstyle="background-color:#006400;color:white;font-family:@dotnet.itags.org.Arial Unicode MS;Text-align:center">Notes</div>

</tr>

<tr>

<td>Notes Desription

</td>

<td>

<asp:TextBoxID="txtShortNotes"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Long Notes

</td>

<td>

<asp:TextBoxID="txtLongNotes"runat="server"TextMode="MultiLine"Width="250px"/>

</td>

</tr>

<tr>

<td>Remind me on

</td>

<td>

<asp:TextBoxID="txtCalendar"runat="server"Width="250px"/>

</td>

</tr>

<tr>

<td>Reminder Text

</td>

<td>

<asp:TextBoxID="txtReminder"runat="server"Width="250px"/>

</td>

</tr>

</table>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanelID="View"HeaderText="View Prospects"runat="server">

<ContentTemplate>

<table>

<tr>

<tdvalign="top"colspan="2"style="width: 610px">

<asp:GridViewID="gvProspects"runat="server"AllowPaging="True"AutoGenerateColumns="False"

AutoGenerateSelectButton="True"CellPadding="2"ForeColor="#333333"GridLines="None"

DataSourceID="ProspectsDS"BorderWidth="1px"DataKeyNames="companyId">

<FooterStyleBackColor="#507CD1"Font-Bold="True"ForeColor="White"/>

<RowStyleBackColor="#EFF3FB"/>

<PagerStyleBackColor="#2461BF"ForeColor="White"HorizontalAlign="Center"/>

<SelectedRowStyleBackColor="#D1DDF1"Font-Bold="True"ForeColor="#333333"/>

<HeaderStyleBackColor="#507CD1"Font-Bold="True"ForeColor="White"/>

<EditRowStyleBackColor="#2461BF"/>

<AlternatingRowStyleBackColor="White"/>

<Columns>

<asp:BoundFieldHeaderText="Company Name"DataField="companyName"/>

<asp:BoundFieldHeaderText="Industry"DataField="industry"/>

<asp:BoundFieldHeaderText="Phone1"DataField="Phone1"/>

<asp:BoundFieldHeaderText="Phone2"DataField="Phone2"/>

<asp:BoundFieldHeaderText="Fax1"DataField="fax1"/>

<asp:BoundFieldHeaderText="Fax2"DataField="fax2"/>

<asp:BoundFieldHeaderText="Website"DataField="website"/>

</Columns>

</asp:GridView>

</td>

</tr>

<tr>

<td>

<asp:DetailsViewID="dvContacts"runat="server"CellPadding="4"ForeColor="#333333"

GridLines="None"HeaderText="Contacts"AutoGenerateRows="False"AllowPaging="True"

AutoGenerateEditButton="True"AutoGenerateInsertButton="True"DataSourceID="ContactDS"

DataKeyNames="companycontactId">

<FooterStyleBackColor="#5D7B9D"Font-Bold="True"ForeColor="White"/>

<CommandRowStyleBackColor="#E2DED6"Font-Bold="True"/>

<RowStyleBackColor="#F7F6F3"ForeColor="#333333"/>

<FieldHeaderStyleBackColor="#E9ECF1"Font-Bold="True"/>

<PagerStyleBackColor="#284775"ForeColor="White"HorizontalAlign="Center"/>

<HeaderStyleBackColor="#5D7B9D"Font-Bold="True"ForeColor="White"/>

<EditRowStyleBackColor="#999999"/>

<AlternatingRowStyleBackColor="White"ForeColor="#284775"/>

<Fields>

<asp:TemplateFieldHeaderText="First Name">

<ItemTemplate>

<asp:LiteralID="Literal1"runat="Server"Text='<%# Eval("firstname") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtFirstName"runat="server"Text='<%# Bind("firstName") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtFirstName"runat="Server"Text='<%# Bind("firstName") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Last Name">

<ItemTemplate>

<asp:LiteralID="Literal2"runat="Server"Text='<%# Eval("lastName") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtLastName"runat="Server"Text='<%# Bind("lastName") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtLastName"runat="Server"Text='<%# Bind("lastName") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Position">

<ItemTemplate>

<asp:LiteralID="Literal3"runat="server"Text='<%# Eval("position") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:DropDownListID="ddlPositions"runat="Server"DataSourceID="Positions"

DataTextField="positionName"DataValueField="value"SelectedValue='<%# Bind("position") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:DropDownListID="ddlPositions"runat="Server"DataSourceID="Positions"

DataTextField="positionName"DataValueField="value"SelectedValue='<%# Bind("position") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Direct Phone">

<ItemTemplate>

<asp:LiteralID="Literal4"runat="Server"Text='<%# Eval("Phone") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtDirectPhone"runat="Server"Text='<%# Bind("Phone") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtDirectPhone"runat="Server"Text='<%# Bind("Phone") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Extension">

<ItemTemplate>

<asp:LiteralID="Literal5"runat="server"Text='<%# Eval("extension") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtExtension"runat="Server"Text='<%# Bind("extension") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtExtension"runat="Server"Text='<%# Bind("extension") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Mobile Phone">

<ItemTemplate>

<asp:LiteralID="txtMobilePhone"runat="Server"Text='<%# Eval("mobile") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtMobilePhone"runat="server"Text='<%# Bind("mobile") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtMobilePhone"runat="server"Text='<%# Bind("mobile") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Direct Fax">

<ItemTemplate>

<asp:LiteralID="Literal5"runat="Server"Text='<%# Eval("Fax") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtDirectFax"runat="Server"Text='<%# Bind("Fax") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtDirectFax"runat="Server"Text='<%# Bind("directFax") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Email">

<ItemTemplate>

<asp:LiteralID="Literal6"runat="Server"Text='<%# Eval("email") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtEmail"runat="Server"Text='<%# Bind("email") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtEmail"runat="Server"Text='<%# Bind("email") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Years with Company">

<ItemTemplate>

<asp:LiteralID="Literal7"runat="Server"Text='<%# Eval("yearswithcompany") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtYearsWithCompany"runat="Server"Text='<%# Bind("yearswithcompany") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtYearsWithCompany"runat="Server"Text='<%# Bind("yearswithcompany") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Decision Process">

<ItemTemplate>

<asp:LiteralID="Literal8"runat="Server"Text='<%# Eval("decisionprocess") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:DropDownListID="ddlDecisionProcess"runat="Server"DataSourceID="DecisionProcess"

DataTextField="decisionname"DataValueField="value"SelectedValue='<%# Bind("decisionprocess") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:DropDownListID="ddlDecisionProcess"runat="Server"DataSourceID="DecisionProcess"

DataTextField="decisionname"DataValueField="value"SelectedValue='<%# Bind("decisionprocess") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Relationship Type">

<ItemTemplate>

<asp:LiteralID="Literal9"runat="Server"Text='<%# Eval("relationshiptype") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:DropDownListID="ddlRelationshipType"runat="Server"

DataSourceID="RelationshipType"DataTextField="relationName"DataValueField="value"

SelectedValue='<%# Bind("relationshiptype") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:DropDownListID="ddlRelationshipType"runat="Server"

DataSourceID="RelationshipType"DataTextField="relationName"DataValueField="value"

SelectedValue='<%# Bind("relationshiptype") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

</Fields>

</asp:DetailsView>

</td>

<td>

<asp:DetailsViewID="dvContactNotes"HeaderText="Contact Notes"runat="server"

BackColor="White"BorderColor="#E7E7FF"BorderStyle="None"BorderWidth="1px"CellPadding="3"

GridLines="Horizontal"AllowPaging="True"AutoGenerateRows="False"AutoGenerateEditButton="True"

AutoGenerateInsertButton="True"DataSourceID="notesDS">

<FooterStyleBackColor="#B5C7DE"ForeColor="#4A3C8C"/>

<RowStyleBackColor="#E7E7FF"ForeColor="#4A3C8C"/>

<PagerStyleBackColor="#E7E7FF"ForeColor="#4A3C8C"HorizontalAlign="Right"/>

<HeaderStyleBackColor="#4A3C8C"Font-Bold="True"ForeColor="#F7F7F7"/>

<EditRowStyleBackColor="#738A9C"Font-Bold="True"ForeColor="#F7F7F7"/>

<AlternatingRowStyleBackColor="#F7F7F7"/>

<Fields>

<asp:TemplateFieldHeaderText="Notes Description">

<ItemTemplate>

<asp:LiteralID="Literal10"runat="Server"Text='<%# Eval("shortNotes") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtNotesDesc"runat="server"Text='<%# Bind("shortNotes") %>'/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtNotesDesc"runat="server"Text='<%# Bind("shortNotes") %>'/>

</InsertItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="Notes">

<ItemTemplate>

<asp:LiteralID="Literal11"runat="server"Text='<%# Eval("notes") %>'/>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBoxID="txtNotes"runat="Server"Text='<%# Bind("longnotes") %>'TextMode="MultiLine"/>

</EditItemTemplate>

<InsertItemTemplate>

<asp:TextBoxID="txtNotes"runat="Server"Text='<%# Bind("longNotes") %>'TextMode="MultiLine"/>

</InsertItemTemplate>

</asp:TemplateField>

</Fields>

<EmptyDataTemplate>

<table>

<trvalign="top">

<divstyle="background-color:#006400;color:white;font-family:@dotnet.itags.org.Arial Unicode MS;Text-align:center">Notes</div>

</tr>

<tr>

<td>Notes Desription

</td>

<td>

<asp:TextBoxID="txtENShortNotes"runat="Server"width="250"/>

</td>

</tr>

<tr>

<td>Long Notes

</td>

<td>

<asp:TextBoxID="txtENLongNotes"runat="server"TextMode="MultiLine"width="250"/>

</td>

</tr>

<tr>

<td>Remind me on

</td>

<td>

<asp:TextBoxID="txtENCalendar"runat="Server"width="250"/>

</td>

</tr>

<tr>

<td>Reminder Text

</td>

<td>

<asp:TextBoxID="txtENReminderText"runat="Server"width="250"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:ButtonID="btnENAdd"Text="Add Notes"runat="Server"width="250"/>

</td>

</tr>

</table>

</EmptyDataTemplate>

</asp:DetailsView>

</td>

</tr>

</table>

</ContentTemplate>

</ajax:TabPanel>

</ajax:TabContainer>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanelID="opportunities"runat="server"HeaderText="Opportunity Management">

</ajax:TabPanel>

<ajax:TabPanelID="Marketing"runat="server"HeaderText="Marketing">

</ajax:TabPanel>

</ajax:TabContainer>

<%------------- DATA SOURCES --------------%>

<asp:SqlDataSourceID="prospectsDS"ConnectionString='<%$ ConnectionStrings:ReferralRev %>'runat="Server"

SelectCommand="Select * from dbo.company where IsSubscriber = 0">

</asp:SqlDataSource>

<asp:SqlDataSourceID="contactDS"ConnectionString='<%$ ConnectionStrings:ReferralRev %>'runat="server"

SelectCommand="Select * from companyContact where companyId = @dotnet.itags.org.companyId"

InsertCommandType="StoredProcedure"InsertCommand="dbo.InsertCompanyContact"

UpdateCommandType="StoredProcedure"UpdateCommand="dbo.UpdateCompanyContact">

<SelectParameters>

<asp:ControlParameterControlID="ctl00$ContentPlaceHolder2$main$prospects$prospectManagement$View$gvProspects"

PropertyName="SelectedValue"Name="companyId"/>

</SelectParameters>

<InsertParameters>

<asp:ParameterName="companycontactId"/>

<asp:ParameterName="companyId"/>

<asp:ParameterName="firstname"/>

<asp:ParameterName="lastname"/>

<asp:ParameterName="phone"/>

<asp:ParameterName="extension"/>

<asp:ParameterName="mobile"/>

<asp:ParameterName="fax"/>

<asp:ParameterName="email"/>

<asp:ParameterName="yearswithcompany"/>

<asp:ParameterName="position"/>

<asp:ParameterName="decisionprocess"/>

<asp:ParameterName="relationshiptype"/>

<asp:ParameterName="createuser"/>

</InsertParameters>

<UpdateParameters>

<asp:ParameterName="companycontactId"/>

<asp:ParameterName="companyId"/>

<asp:ParameterName="firstname"/>

<asp:ParameterName="lastname"/>

<asp:ParameterName="phone"/>

<asp:ParameterName="extension"/>

<asp:ParameterName="mobile"/>

<asp:ParameterName="fax"/>

<asp:ParameterName="email"/>

<asp:ParameterName="yearswithcompany"/>

<asp:ParameterName="position"/>

<asp:ParameterName="decisionprocess"/>

<asp:ParameterName="relationshiptype"/>

<asp:ParameterName="modifyUser"/>

</UpdateParameters>

</asp:SqlDataSource>

<asp:SqlDataSourceID="notesDS"ConnectionString='<%$ ConnectionStrings:ReferralRev %>'

SelectCommand="select * from notes where userId = @dotnet.itags.org.userId"runat="server"OnInserting="AddNotes"

OnUpdating="UpdateNotes"InsertCommand="dbo.InsertNotes"InsertCommandType="StoredProcedure"

UpdateCommand="dbo.UpdateNotes"UpdateCommandType="StoredProcedure">

<SelectParameters>

<asp:ControlParameterName="userId"ControlID="ctl00$ContentPlaceHolder2$main$prospects$prospectManagement$View$dvContacts"

PropertyName="SelectedValue"/>

</SelectParameters>

</asp:SqlDataSource>

<%-------------- XML DATA SOURCES ------------%>

<asp:XmlDataSourceID="countries"runat="server"DataFile="~/Resources/Countries.xml"></asp:XmlDataSource>

<asp:XmlDataSourceID="states"runat="server"DataFile="~/Resources/states.xml"></asp:XmlDataSource>

<asp:XmlDataSourceID="Positions"runat="server"DataFile="~/Resources/Positions.xml"></asp:XmlDataSource>

<asp:XmlDataSourceID="DecisionProcess"runat="server"DataFile="~/Resources/DecisionProcess.xml"></asp:XmlDataSource>

<asp:XmlDataSourceID="RelationshipType"runat="server"DataFile="~/Resources/RelationshipType.xml"></asp:XmlDataSource>

<asp:ScriptManagerid="ScriptManager1"runat="server">

</asp:ScriptManager>

<asp:XmlDataSourceID="industrySource"runat="server"DataFile="~/Resources/Industry.xml"></asp:XmlDataSource>

<ajax:CalendarExtenderid="CalendarExtender1"runat="server"TargetControlID="txtCalendar"OnResolveControlID="CalendarExtender1_ResolveControlID">

</ajax:CalendarExtender>

<ajax:CalendarExtenderid="CalendarExtender2"runat="server"TargetControlID="txtENCalendar"OnResolveControlID="CalendarExtender1_ResolveControlID">

</ajax:CalendarExtender>

</asp:Content>

Well, I solved my own problem (it is not a solution but a hack, but so be it). You CANNOT put a AJAX TabContainer control within a the <asp:Content></asp:Content> tag. If you do - do so at your own peril. Since I am developing for Internet Explorer I used an IFrame and used the src property of IFrame to point to an aspx page. Within this page I put the TabContainer control and the font issue has disappeared for now. I will keep my fingers crossed......

Happy AJAXing ;-)

AJAX TabConTainer & TabPanel

I have a TabControl on my page with about 5 tabs. The context in the first two tabs are fine. But from the third the context goes out of the border of the TabPanel. Any1 knows how to make the context stay within the border of the TabPanel...

After playing aroung with it. I found a solution. In the TabContainer properties just add a width to the width you want.

IE displays it correct when no width is included but Firefox & netsape are a bit fussy. So add it for it to be displayed in the other browsers correctly.

And you can resize the tabcontainer width with some javascript funtions onactivatabchanged...

That is, if you have various width tabs inside...

ajax tab panel/tab container buggy

Im having a few problems with using tabpanel/tabcontainer from the toolkit...

i tried to style the tabs. i editted the tab images that are given by default with the ajax toolkit, (only the color of the tabs, not the image sizes).

there appears to be a 1 pixel gap between the tab-right-image and the tab-image. i really am having trouble getting rid of it.

also, i placed a google map (using google maps api) in one of the tabs. i had it centered at some fixed coordinates. when outside the tab the map looks fine, but inside the tab the centre of the map goes to the top lefr corner of the <div> that the map is in.

I have the same problem with the coordinates in tab panel. Did you figure it out?

Thanks

You need to fix the "padding" value in your custom tabs css.

I did the exact same thing in an old project (changed the tabs from yellow to gray...),

can't remember exactly which padding I had to change, but here is the css:

/* xp theme */
.MyTabs .ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px; color:White; font-weight:bold;
background:url(images/MyTabs2/tab-line.gif) repeat-x bottom;
}
.MyTabs .ajax__tab_outer
{
padding-right:0px;
background:url(images/MyTabs2/tab-right.gif) no-repeat right;
height:21px;
}
.MyTabs .ajax__tab_inner
{
padding-left:3px;
background:url(images/MyTabs2/tab-left.gif) no-repeat;
}
.MyTabs .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(images/MyTabs2/tab.gif) repeat-x;
}
.MyTabs .ajax__tab_hover .ajax__tab_outer
{
background:url(images/MyTabs2/tab-hover-right.gif) no-repeat right;
}
.MyTabs .ajax__tab_hover .ajax__tab_inner
{
background:url(images/MyTabs2/tab-hover-left.gif) no-repeat;
}
.MyTabs .ajax__tab_hover .ajax__tab_tab
{
background:url(images/MyTabs2/tab-hover.gif) repeat-x;
}
.MyTabs .ajax__tab_active .ajax__tab_outer
{
background:url(images/MyTabs2/tab-active-right.gif) no-repeat right;
}
.MyTabs .ajax__tab_active .ajax__tab_inner
{
background:url(images/MyTabs2/tab-active-left.gif) no-repeat;
}
.MyTabs .ajax__tab_active .ajax__tab_tab
{
background:url(images/MyTabs2/tab-active.gif) repeat-x;
}
.MyTabs .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:8px;
background-color:#cccccc;
}

It's one or two of the padding values that changed from the default css.

I've tried all the padding settings that you mentioned in your message, however it hasn't fixed the problem.

It's odd because, in Firefox the google maps works fine, however in IE 7 it's truncating the side of the google map. I'll keep trying to see if I can get it working.

I was talking about the pixel gap for image right thing in the tabs in the other post...

To center the map, can you put a table with width="100%" and horizontalAlign="Center" in the tabpanel?

Hi NNM, it doesn't seem to be as simple as that. I tried centering it like this but it doesn't work. Have a look at this page to have an example of what is the problemhttp://www.twilightblue.eu/en/hotel/121975-campanile-hotel-runcorn.aspx then click on the map section and scroll down. It due to the center point not being in the middle of the div. This works fine outside of the tabpanel and in firefox. Also appartently it works if the map is in the first tab panel.

I found a few other postings on this topic, but no real solution. Seehttp://www.reimers.dk/forums/thread/1212.aspx. Any additional help would be appreciated.

I see...

Never used google maps in an app before...

But in this situation, I would "work around" the issue by placing an iframe inside your last tabpanel, where you want the map to be.

In the iframe, put nothing but the google map. That way, you can "trick" the google map into thinking it's outside of the tabpanel..! And that should avoid any conflicts..

Just an idea..

(PS: off topic, but I noticed some warnings in ie7: 4 cookies blocked: 2 from images.activehotels.com ... and 2 from google maps. Just so u know)

Hi Christopher

I found a little clumsy workaround, but it works!

When I was dealing with it, I found out that when you click on a pushpin, the map get centered properly. So I called a click event programtically after the map loading and immediately closed the InfoWindow. So the map gets centered and user can not notice of it.

I called the event like that:

GEvent.trigger(gmarkers[0],"click");

gmarkers[0].closeInfoWindow()

This worked for me.

Hi Guys, for future reference I got this working I added the following line of code at the end of the script. Please note that just the cmap.checkResize() didn't work by itself.

window.onload=function(){window.onload;map.checkResize()}

Thanks for your help on this

Did you solve the problem with the gap in the tab header? I noticed the same thing when I copied the GIFs from the toolkit sample. I think I found a solution but I don't understand why the gap happens when I am using the same CSS as the sample.

I changed the following line:

.ajax__tab_tectrack.ajax__tab_outer {padding-right:4px;background:url('/Graphics/Tabs/tab-right.gif')no-repeatright;height:21px;}

to

.ajax__tab_tectrack.ajax__tab_outer {padding-right:0px;background:url('/Graphics/Tabs/tab-right.gif')no-repeatright;height:21px;}

and the gap is gone...