Showing posts with label panels. Show all posts
Showing posts with label panels. Show all posts

Wednesday, March 28, 2012

System.WebForms.PageRequestManagerParserErrorException The message revieved from the serve

I am trying to use update panel's feature to asyncronously postback and update the data in one of my grid. I am using Master Page and ASPX and a User Control that actually contains the button, Update Panels and a Grid.

When I click btnRefresh I get the following error:

System.WebForms.PageRequestManagerParserErrorException The message revieved from the server could not be parsed...

My ascx looks like this:

<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>

<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:ImageButtonID="btnRefresh"runat="server"ImageUrl="~/refresh.gif"OnClick="ImageButton1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanelID="UpdatePanel2"runat="server">
<Triggers>
<asp:AsyncPostBackTriggerControlID="btnRefresh"/>
</Triggers>
<ContentTemplate>
<igtbl:UltraWebGridID="UltraWebGrid1"runat="server"Height="200px"Width="468px"style="left: 1px; top: 226px">
</igtbl:UltraWebGrid>
</ContentTemplate>
</asp:UpdatePanel>

Could someone please suggest on this? Is the problem with User Controls??

Guys,

I added the script manager in my Master Page and then added scriptManagerProxy at my user controls which resolved the problem.

Cheers,

Ashish

Tab Container

I have seen the tab container inside an update panel and with out any update panels.

Which is correct?

Thank!

Dennis4j,

The only reason I put the TabContainer inside of an UpdatePanel is when I have an "editable" GridView inside one of the tabs. I can't remember where I read this, but in order for the tab control to keep track of the correct tab when the grid goes into edit mode this had to be done. I think it was logged as a bug but I don't have the details handy.

Regards.

tab container and tab panels

I'm getting what I think is odd behavior from the tab panels. Everything of course works fine if the tab panels are static. However, I want to programmatically add to the tab container in my code behind.

The first time the page loads the outline of the tab container is present (which is fine). I click a button and do a postback for the update panel and two tabpanels are added to the tabcontainer. If I do another postback, then I get an error "There is no source code available for the current location." message box. I click OK. I then get a message box that says, "ArgumentOutOfRangeException was unhandled by user code ....Specified argument was out of range of valid values...Parameter name: index".

For example,

"UpdatePanel1" runat="server" UpdateMode="Conditional"> "TabContainer1" runat="server"> "HiddenField1" runat="server" OnValueChanged="HandleNodeClick"/>public void HandleNodeClick(Object sender, EventArgs e){ AjaxControlToolkit.TabPanel panel1 =new AjaxControlToolkit.TabPanel(); panel1.HeaderText ="panel1"; panel1.Visible =true; panel1.ID ="panel1"; AjaxControlToolkit.TabPanel panel2=new AjaxControlToolkit.TabPanel(); panel2.HeaderText ="panel2"; panel2.Visible =true; panel2.ID ="panel2"; TabContainer1.Controls.Add(panel1); TabContainer1.Controls.Add(panel2);}
As a workaround I tried the following, which didn't work either. I have three different formats of tabcontainers I want to use. I tried just putting the three different tabcontainers on the aspx page to begin with. In the code behind, on page load I set .visible=false for all 3 (which worked as expected). Based on an event, I then set .visible=true for a given tabcontainer. However, only the text of the desired tabcontainer is displayed -- the formatting, the panels, etc. aren't. Suggestions for either of these approaches is much appreciated.

In my case I have successfully created the tabs and the buttons on them - they display just fine and the tabs select. However, as soon as I click on any of the buttons the same error arises. Setting an eventhandler for each button does not cure the problem.

I am very keen for a quick solution!


Further investigation shows that the problem does not even relate to adding controls to the tab but arising even if adding tabs dynamically.

I added a button outside the tab and then just did the tab adding.:

Dim FC()As cCategory = cCategory.AllCats
Dim iAsInteger
For i = 0 To FC.length-1
Dim tab As New AjaxControlToolkit.TabPanel
tab.HeaderText = FC(i).TabName
tab.ID = "tab" & CStr(i)
tbForms.Tabs.Add(tab)
NexttbForms.ActiveTabIndex = 0

A click on the static button then produces the error message.

It seems as if the wiring up of the postback info is incomplete with the dynamically created tabs.


OK guys - I found most of the answer from another thread - use Page_Init

However . . .

ProtectedSub Page_Init(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.InitDim FC()As cCategory = cCategory.AllCats
Dim iAsInteger
For i = 0To 0
Dim tabAsNew AjaxControlToolkit.TabPanel
tab.HeaderText = FC(i).TabName
tab.ID ="tab" &CStr(i)
Dim FM()As cForm = cForm.Tab(FC(i).TabId)
Dim FMname(FM.Length - 1)AsString
Dim jAsInteger
For j = 0To 0
Dim btnAsNew Button
btn.Text = FM(j).Description
btn.ID ="btn" &CStr(i) &":" &CStr(j)
AddHandler btn.Click,AddressOf ButtonClick
tab.Controls.Add(btn)
FMname(j) = FM(j).Description
Next
tbForms.Tabs.Add(tab)
Next
EndSub

PublicSub ButtonClick(ByVal senderAsObject,ByVal eAs System.EventArgs)
EndSub

This fires a postback OK but this never reaches the ButtonClick routine.

Why?


Making progress very slowly!

The Page_Init is performed every time a postback occurs (Before Page_Load) and at that time the dynamically added control do not exist (they have to be re-created each time around, it seems) If I test for postback at the start of Page_Init and do not do the dynamic creation at that time, then the same error as before occurs.

I do not fully understand what is going on but I guess that the postback cannot connect up with the event handling which was created the first time around. Presumably I need to find some way of working out what the postback actually is and look at it explicitly.

Any ideas, folks?


I think I'm hitting the same issue.

I've added two tab panels to my TabContainer statically. The tab panels host the ReportViewer control which is possibly a bit ambitious but it is a business requirement if possible.

Then in the Page_Load event handler I add a third tab panel dynamically with the following code block :

ReportViewer rv = new ReportViewer();
rv.ID = "rv3";
rv.ProcessingMode = ProcessingMode.Remote;
rv.Height = 500;
rv.Width = 950;
rv.Reset();
SetReportParameters(rv, 53); // this just inits the reportviewer

AjaxControlToolkit.TabPanel tabPanel = new AjaxControlToolkit.TabPanel();
tabPanel.ID = "tab3";
tabPanel.HeaderText = "Dynamically added tab panel";
tabPanel.Controls.Add(new LiteralControl("<ContentTemplate>"));
tabPanel.Controls.Add(rv);
tabPanel.Controls.Add(new LiteralControl("</ContentTemplate>"));
//this.tabReports.Controls.Add(tabPanel);
this.tabReports.Controls.AddAt(tabReports.Controls.Count, tabPanel);

This all works fine but it's not really dynamic yet. So I then add a button to the page outside of the TabContainer and in the event handler for it I use a similar code block to the above except I use a different TabPanel.ID. This is when I run into the problem. Before the button event handler code is entered I'm getting the ArgumentOutOfRangeException and VS dumps me into the TabPanelCollection.cs class in the TabPanel method.

public new TabPanel this[int index]
{
get { return (TabPanel)base[index]; }
}

In my case index=2 and the Exception tells me the it is out of range of valid values. What is confusing me is that my code to insert the new panel hasn't been run yet so something else must be going on. In order to speed up diagnostics on this I'm going to remove the ReportViewers and put in some simple controls but in the meantime it would be good if someone from the AJAX team could comment on this issue.

I've now got wroking code - but at the price of a fudge!

Firstly, the dynamic creation must be done in Page_Init (not Page_Load) and must be done on every Postback, not just frst time through.

Secondly, in Page_Load on Postback, I check the Page.Request.Form collection. Despite all that I have read, there is nothing in the first few entries but (4) there is the full name of the control and its text value.

Dim sAsString = Page.Request.Form.AllKeys(4)
If s.ToLower.StartsWith("tbforms")Then
Dim s1()AsString = s.Split("$")
Dim s2AsString = s1(1).Substring(3)
Dim s3AsString = s1(2).Substring(3)
Dim tabNoAsInteger =CInt(s2)
Dim btnNoAsInteger =CInt(s3)

I am far from happy with this as it depends on an undpecified magic number (which, as we all know, chnages just when you can least afford it!)

I still suspect that there is a bug lurking somewhere here.

TAB CONTAINER AJAX TOOLKIT

Good Day!!!I'm trying to used Tab Container (Ajax Toolkit) but i need more than 20 tab panels in 1 tab container. The problem is the tab panels I added in the tab container is not fixed to the tab container. Can you help me to fix my problem thank you...marc

Hi

The problem is the tab panels I added in the tab container is not fixed to the tab container?What do you mean?

Please refer to http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx for help.

Tabs Description

TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.

Thanks


hi Good Day! I have a tab container with 16 tab panels, and I set the width style of the tab container (770px) , the problem is the other tab panelsis not fixed to the 770px(width of the tab container) and continuesly going to the right. Hope you can help me to my problem thank you.

Tab container & Tab panel

Hi

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.


<style type="text/css">
.ajax__tab_xp2 .ajax__tab_header {
font-family:verdana,tahoma,helvetica;
font-size:21px;
background:
repeat-x
bottom;white-space:normal;
}
.ajax__tab_xp2 .ajax__tab_outer {
border-style: solid double;
padding-right:4px;
background:
no-repeat
right;
height:21px;
}
.ajax__tab_xp2 .ajax__tab_inner {
padding-left:3px;
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_tab {
height: 100px;
padding:4px;
margin:0;
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_container .ajax__tab_default {text-align:center; background-color:Blue;white-space:normal;}
.ajax__tab_xp2 .ajax__tab_body {text-align:center; background-color:Blue; font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px; border-style:none; border-color:Green; border-bottom-style:none; border-left:none; border-right:none; border-top:none; }
.ajax__tab_xp .ajax__tab_body {
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
</style>

<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 Error after a Refresh

I have a tab container with two tab panels inside of it, and they work perfectly well the first time the page is loaded. If I hit refresh (not post back I am talking F5 or the browser refresh button) the page loads up except for the tab container which does not show up.

The error I receive in IE is the following

Line: 6
Char 31345
Error: Object Expected

When I run this in Firefox and check the error in FireBug It tells me the following error occurred

h is not a constructor

createCallback(undefined,Object,null,Object,div#ctl00_mainContent1_ComparisonPieCharts1_TabContainer1_PublisherTab)ScriptResource.ax... (line 5)

(no name)()default.aspx (line 988)

createCallback(Object _disposableObjects=[2] _components=Object,Object)ScriptResource.ax... (line 5)

createCallback()ScriptResource.ax... (line 5)

createCallback()ScriptResource.ax... (line 5)

Function.__typeName="Function";Function.__class=true;Function.createCallback=fun...

Thanks in advance for your help,

Brendan

I set my ScriptMode for my scriptmanager to Debug and now I found that the error message is really

Sys.ArgumentUndefinedException: Value cannot be undefined.Parameter name: type

Sys$CultureInfo$_getAbbrMonthIndex("")ScriptResource.ax... (line 5762)

{name: "element", mayBeNull: true, domElement: true, optional: true}


Hi Brendan,

Can you post a simple repro of your issue?

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">

<HeaderTemplate>

Call Handling</HeaderTemplate>

<ContentTemplate>

<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>

<ContentTemplate>

<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..

tab control

dear All

I have a tab container with 2 tab panels (say tabpanel1 and tabpanel2). ONLY when tabpanel2 is selected I wanted an event to fire. can someone tell me how to do this?

a little code would be a great help.

prasad.

var tabs = $find('TabsBehaviorID');
tabs._addActiveTabChanged(YourHandlerHere);

You can then check the tab index in the handler and ignore if it is not tabpanel2.


it says unexpected character $ (Dollar sign)
This was clientside JS code that I posted that needs to be included in <script> tags...have you done that? Maybe if you could post some code that would help.

i dont quite understand..I just have a tab with two panels in the aspx code.

<cc1:TabContainer ID="TabContainer2" runat="server">
<cc1:TabPanel ID="TabPanel1" HeaderText="Tab1" runat="server">
<ContentTemplate>

</ContentTemplate>
</cc1:TabPanel>

<cc1:TabPanel ID="TabPanel2" HeaderText="Tab2" runat="server">
<ContentTemplate>

</ContentTemplate>
</cc1:TabPanel>

</cc1:TabContainer>

I want the following. When tab2 is selected, I want to do some calculations in the code behind...and display them in tab2.

on the other hand when tab1 is selected then I want nothing to happen.

How do I call this event? can you help me with some code behind?

prasad..


Ahhh...you want a server side solution. The tab container doesn't currently postback when a tab is changed so you have to force this to happen manually. The following code demonstrates this:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /><script type="text/javascript"> function ActiveTabChanged(sender, e) { __doPostBack('<%= TabContainer2.ClientID%>', sender.get_activeTab().get_headerText()); }</script><asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="conditional"> <ContentTemplate> <cc1:TabContainer ID="TabContainer2" runat="server" OnActiveTabChanged="TabContainer2_ActiveTabChanged" OnClientActiveTabChanged="ActiveTabChanged"> <cc1:TabPanel ID="TabPanel1" HeaderText="Tab1" runat="server"> <ContentTemplate> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" HeaderText="Tab2" runat="server"> <ContentTemplate> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="TabContainer2" EventName="ActiveTabChanged" /> </Triggers></asp:UpdatePanel>

You can then hook up to the event in the code behind as follows:

protected void TabContainer2_ActiveTabChanged(object sender, EventArgs e){}

thank you for the code, is it possible that there is a postback only when tab panel2 is selected and NOT when tabpanel1 is selected?

prasad.


sender.get_activeTab().get_tabIndex() will tell you which tab is the new active tab so you can selectively fire the postback.


thank you. that helped.

BTW do you know how to change the tabs background color? using the

<cc1:TabPanel ID="TabPanel1" BackColor="#CECABB" runat="server">

doesnt change the color.

prasad-


http://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx
thank you a ton!

Hi everybody!!!

Hi Would like, How do to the Tab Painel to load the content..only when it is called...because, on this samples of Jason, the content is being loaded with a firts postback.... is it possible ?

I Need this, because i've five gridviews in my page, and this stays bad...

Thank all!!!

p.s: my english isn't good


You can use dynamic population via a web service using the Dynamic* properties of the tab panel control. If the tab panels need to contain server controls that postback, then you will have to create the tab panel controls during a postback (not via a web service).

Monday, March 26, 2012

tab control and modelpopup

In my form aspx page, I have three panels, top of the page I have three input buttons controls how I display my panels, first button display panel1(hides panel2 and 3) , second button displays panel2(hides panel1 and panel3), third panel display panel3(hides panel1 and 2).

Only thing is, panel2 has one small subpanel and datagrid in it that for datagrid, I put a modelpopupextender , because I wanted when user clicks linkbutton inside the datagrid, I make modelpopup pops. That means it I have update panel inside the Panel2 already.

I have tried some javascript functions for displaying/hiding my panels when buttons are clicked, but I needed also for panel2 when user saves datagrid, page refreshes and needs to comes back to show panel2 again,it was keep showing panel1, I put some javascript for that would remember last button clicked, so could come back that one, but that gives me some problem, so maybe I should try Ajaxs Tab , but I get confused how would I set up that, because I already have updatepanel inside the panel2 for modelpopup, so how would I can put tab control for whole form? Would it effect Tab and modelpop up together ?

Any suggestions?

Hi,

I agree your idea of trying to use TabContainer control. With it, you don't need to worry about keep its state between postbacks.

For more information about how to use it, I'd suggest downloading the sample web sitehere and try the tabs page.

Saturday, March 24, 2012

tab panel display problems

I am using a tab container with tab panels. The first problem is that the headers have the bottom half cut off. The second problem is that the panel will not render with the backcolor I specify. The third problem is that the panels have dynamic content that includes a button which launches a second window. When you click on the button all the information is cleared from the panels.

Hi

Would you please post some code?

Thanks


Try add the following to your aspx page:

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

Good luck.

Tab Panels inside of a repeater?

I'm trying to create a dynamic amount of tabs and cannot place tab panels inside, is their a suggested alternative?

I just need tab like functionality.

Thanks alot!

-Ryan

Hi Ryan,

I'm not sure how are you trying to implement it with Repeater, but you can create TabPanel dynamically.

For instance:

AjaxControlToolkit.TabPanel tbpanel = new AjaxControlToolkit.TabPanel();
tbpanel.HeaderText = "Tab 01";
tbpanel.Controls.Add(new TextBox());
Label lb = new Label();
lb.Text = "Content";
tbpanel.Controls.Add(lb);
TabContainer1.Tabs.Add(tbpanel);

Hope this helps.


Thanks for the reply, that seems useful but I'm still a little confused how I should use it, basically this is what I need.

A Tab Container is created, inside is a repeater which, with each iteration, creates a tab panel and populates it.

So how would I add the stuff inside the panels (the stuff I've written in the aspx page)
Do I still databind?

Just confused where/how I should use that,

thanks!


So you want to populate the TabPanel dynamically? And the contents to be populated are different aspx pages?

TabPanel can't be used as a container for another page, unless wrapping a iframe inside it.

I would recommend you create UserControl(.ascx) for different content, and load it into the TabContainer.

For instance:

AjaxControlToolkit.TabPanel tbpanel = new AjaxControlToolkit.TabPanel();
tbpanel.HeaderText = "Tab 01";

if( .............. ){
Control c = this.LoadControl("relative path to the UserControl")
tbpanel.Controls.Add(c);
}
TabContainer1.Tabs.Add(tbpanel);

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.

Wednesday, March 21, 2012

TabContainer Firefox problem

I am using tabContainer for tabed navigation with update panels inside tabpanel for async updates to the server.

Ome tab panel contains FCKEditor. I have experinced 2 errors on the page when using Firefox:

1. The page is loading very slowly and the following message is displayed in the status bar:
"Transfering data from localhost"

2. FCKEditor when used inside tab panel and updatepanel will losse the text entered when I try to update asinc to the server.

I have tried the following solution but it did not work:
http://jlcoady.net/archive/2007/03/30/fckeditor-work-inside-updatepanel

The most relevant error in Error console seems to be the following:
Warning: Error in parsing value for property 'display'. Declaration dropped.
Source File:http://localhost:56780/WebResource.axd?d=MJBzFYTfWN4CIFiUGFH5fLnKi97ZUvWrbLbcxzkrjzR4fE38RehHyps3lRxPqwg76Z_83olVsuwUqCCjsO2ZJw2&t=633130226175471389
Line: 5

With the following data:

/* default layout */.ajax__tab_default .ajax__tab_header {white-space:nowrap;}.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

There is also a bunch of css errors.

Needless to say everything works perfectly in IE 7.

Any help/suggestions will be greatly appreciated.

P.S. To isolate the problem - I have taken fckeditor out of the page and everything works fine. Then I added FCK Editor outside of update panel and tabcontainer and the problem reappeared, hence it is safe to conclude that the problem is related to FCKEditor.

Solved the problem.

FCKEditor subfolder containing all the setting,images etc for FCK Editor MUST be placed in the root folder of a web application. Probably there is a way to do it but it is not an issue any more.

TabContainer Enabled or Visible

Hi,
I have a Tabcontainer using 3 TabPanels. "Identity", "Invoices","stats".

I need to display the Invoices and Stats panels only when the Identify is on Update mode (the other status could be Create).
So I set the value of Visible property for these panels to False.
I don't have the css design Panels but the HeaderTexts are displayed.

I tried with the Enabled property, I get the same problem.

And by the way, what is the difference between Enabled and Visible for the TabContainer Control ?

Thanks for your help

Stan

Do you have to use this

TabContainer1.Tabs(1).Enabled =False

is work fine...


Hi Stan,

Here is a sample. It controls the HeadText at the client side. It's very simple and should be extended in your usage!

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="TabTest.aspx.cs" Inherits="TabTest" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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> <asp:Label ID="Label1" runat="server" Text="Label" Width="141px"></asp:Label><br /> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Identity"> <ContentTemplate> 1111111<br/> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Invoices" Visible="false"> <ContentTemplate> 222222<br/> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="stats" Visible="false" Enabled="false"> <ContentTemplate> 333333<br/> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <script type="text/javascript" language="javascript">Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(sender, e){var tab1ID = "<%= this.TabContainer1.Tabs[1].ClientID%>";var tab2ID = "<%= this.TabContainer1.Tabs[2].ClientID%>";if(typeof(eval("document.all."+tab1ID))=="undefined"){ eval("document.all.__tab_"+tab1ID).innerHTML="";}if(typeof(eval("document.all."+tab2ID))=="undefined"){ eval("document.all.__tab_"+tab2ID).innerHTML="";}//alert(eval("document.all."+tab1ID))});</script> </form></body></html>

Difference between Enabled and Visible(We assume both of them are set to false):

1、Effect: Visible="false" HeadText is shown.

Enabled="false" HeadText isn't shown.

2、Client Code Visible ="false"

No

Enabled="false"

Sys.Application.add_init(function() { $create(AjaxControlToolkit.TabPanel, {"enabled":false,"headerTab":$get("__tab_TabContainer1_TabPanel3")}, null, {"owner":"TabContainer1"}, $get("TabContainer1_TabPanel3"));}); 3、Source code:if (!this._enabled) { this._hide();

}

_hide : function() {
this._tab.style.display = 'none';
if (this._get_active()) {
var next = this._owner.getNearestTab(false);
if (!!next) {
this._owner.set_activeTab(next);
}
}
this._deactivate();
}

For more details , please research this files: Tab.js, TabPanel.cs ,TabContainer.cs.

Hope it helps . If i misunderstood you, please let me know.

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!..