TabContainer and FormView

Hello,

I would like to replace our current tab solution with the tab controls found in the ajax control toolkit. I've spent a few days trying to get the tabs to operate in the manner I would like and was wondering if anyone could explain the best way to use TabContainer and FormView controls together.

Basically, I would like to do the following:

<asp:SqlDataSource ... /><asp:FormView ...><EditItemTemplate><ajaxToolkit:TabContainer ...><ajaxToolkit:TabPanel ID="Panel1" ...>...</ajaxToolkit:TabPanel><ajaxToolkit:TabPanel ID="Panel2" ...>...</ajaxToolkit:TabPanel></ajaxToolkit:TabContainer></EditItemTemplate></asp:FormView>

When I build pages based on this - Update and Insert commands fail with "You must declare the scalar variable XXX" errors as the formview cannot find the editing controls inside the TabContainer because it is an INamingContainer. I have tried using multiple FormView controls (one for each tab panel) in concert to update & insert records - however the amount of custom code required is unacceptable.

The solution I choose has to be very reusable as we have hundreds of different pages (like this) in production. At this point I am considering writing my own client side tab control as I would like to come up with a solution as quickly as possible and I've hit a number of dead ends.

Does the ajax control toolkit support using a FormView that contains a TabContainer (am I just missing something)? Are there any good workarounds? Are there plans to add this kind of support in the future?

Any answers or information will greatly help me make my decisions. Thanks in advance,
J. Shane Kunkle

jkunkle@dotnet.itags.org.vt.edu

Any input or advice is appreciated...

Hi Shane,

I think it's not that easy to make works perfectly in your situation now.

Can you try to add a public property on the TabContainer, and take it as a parameter?

I'm sorry - i'm not sure i understand your advice. Are you advising that I should create a class that inherits from TabContainer - what would the new property do?

Thanks again for the assistance,

Shane

Yes, or you can change the its original code since it's provided.

TabContainer doesnt persist tab selection between postbacks

Hi,

I'm using a couple of TabContainers on my web form. The main TabContainer hosts seven TabPanels, each of which hosts a different FormView control.

According to the Tab documentation, "the most recent tab should remain selected after a postback." However, whenever I change the mode on a FormView (e.g. changing to Edit a record), a postback occurs and a the first tab is selected again.

I tried setting the TabContainer's EnableViewState="True", but that didn't help.

What do I need to do to keep the same tab selected between postbacks?

Thanks,

Mark

Anyone else seeing this problem? Any idea how to keep the tab selected between postbacks?

Thanks,

Mark

Hi Mark,

According to my test, the active index is persisted between postbacks.

If it doesn't for you, please try the following workaround.

1. Add a hidden field on the form

2. On the client side active index changed event, save current index into the hidden field

3. On postback, set the activeIndex of the tabContainer to the value in hidden field( on Server Side )

Or set it via javascript in client side pageLoad event.

Hope this helps.

Thank you Raymond. Sorry for the late reply; I have been distracted with other tasks. I'll try this when I get back to working on the UI.

Mark

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