TabStrip + Multipage WebControl: Modify width?

[Johannes Eble]

Hello,

I use the TabStrip and the Multipage Webcontrol in my Web form. I have
three Tabs/Pages. However, I would like to define an area to the left
and to the right. Controls in these areas should always be visible.

Therefore I have put the TabStrip/Multipage inside a column of a HTML
table. The table consists of one row with three columns. But this
doesn't work at all. The table destroys the design of the PageViews,
but there should be space enough in the column to view the whole
PageViews.
As another approach I moved everything between a PageView into a User
control, one for each PageView. Then I included the User Controls. It
works fine, but as soon as I put the TabStrip/Multipage inside a HTML
column as above, it doesn't work either (which doesn't surprise me
since a User Control is little more than including).
As a final approach I replaced the MultiPage with three Panels. Each
of the panel should serve as a container for a PageView. Only one
panel should be visible at a time. I initialize each panel with its
User Control:

private void Page_Load(object sender, System.EventArgs e)
{

if(! IsPostBack)
{
devicePage = (Device)(LoadControl("Device.ascx") );
devicePage.ID = "devicePage";
Panel1.Controls.Add(devicePage);

pcbPage = (PCB)(LoadControl("PCB.ascx") );
pcbPage.ID = "pcbPage";
Panel2.Controls.Add(pcbPage);

boundCondPage = (BoundCond)(LoadControl("BoundCond.ascx") );
boundCondPage.ID = "boundCondPage";
Panel3.Controls.Add(boundCondPage);

tsHoriz.SelectedIndex = 0;
Panel1.Visible = true;
Panel2.Visible = false;
Panel3.Visible = false;



....
}
}

Also, I have set the AutoPostBack property of the TabStrip control to
true

and I have implemented a SelectedIndexChange handler for the TabStrip
control:

private void tsHoriz_SelectedIndexChange(object sender,
System.EventArgs e)
{
switch(tsHoriz.SelectedIndex)
{
case 0:
Panel1.Visible = true;
Panel2.Visible = false;
Panel3.Visible = false;
break;
case 1:
Panel1.Visible = false;
Panel2.Visible = true;
Panel3.Visible = false;
break;
case 2:
Panel1.Visible = false;
Panel2.Visible = false;
Panel3.Visible = true;
break;
}
....


But this doesn't work either. Only at first load does the first panel
appear with the appropriate User Control. As soon as I select another
tab, the User Control assigned with this tab isn't displayed. Also,
when I return to tab one the User Control assigned with the first
panel has disappeared too. It seems that the application forgets that
the Panels are populated with their corresponding User Controls. Note
that the User Control variables (i.e. devicePage, pcbPage, and
boundCondPage) are real member variables so they can't possibly go out
of scope.

So how can I get the functionality of a TabStrip + Multipage with
adjustible width?

(I have noticed that I *can* set the height of the Multipage. I can
have a button below the TabStrip/Multipage that is alway visible. I
guess that this is possible because I don't have to use a table to do
that: I simply can write the code for the button below the
TabStrip/Multipage code in the aspx file. But this is not what I want.
I want the button to appear right to the TabStrip/Multipage, but
always visible.)



Any help would be great.


Best regards


Johannes

 

[Scott]

Placing a tabstrip/pageview in a table should be no problem -- we have about 40 different pages
that do exactly the same thing without problems.

However, you need to be very careful that the HTML that is generated is accurate and legal; the
tabstrip/pageview and very sensitive to unclosed td/tr/table tags. You might want to run the
tabstrip/pageview in downlevel mode to see if that makes a difference (I don't recall how to do
that, but you can add config value to web.config to force it to run in downlevel); you might try a
Mozilla browser to see if there's a difference (in Mozilla, there will be a small gab on the
tabstrip above the pageview; this is because the HTML that the IE web controls generates needs a bit
of tweak -- but the goal here is to solve the left/right padding).

When I've had problems with my tabstrip/pageviews; what I do is view the HTML source and then
cut/paste to a HTML edit (VS) and then reformat and make sure I have closed all of the tags.

I don't know what your base browser requirements are; however if you just want to add some padding
around the tabstrip/pageivew look into using a <div style="padding-left: 10px">your-controls</div>.

Scott

 

[Johannes Eble]

Hi Scott,

thanks very much for your answer.

You were probably right, i.e. some of the table tags were probably
garbled. I started a new web form. Then I placed the table, the
tabstrip and the multipage. Finally I placed the user controls one
after another. Now, everything seems to work fine, within the table.


Regards


Johannes