ajax TabControl: form

Showing posts with label form. Show all posts

Wednesday, March 28, 2012

System.Web.UI.WebControls.Menu and UpdatePanels / WebParts

Hi,

(using April version of Atlas)
I have a web form with a script manager, a web part manager, a menu and a web part zone with a generic web part in it. An update panel is around the web part manager and the web part zone. When I click on the arrow for the popup web part menu and chose for example "minimize", everything works fine for the first time, until the web part is rendered: When I want to click once again on the arrow for the popup web part menu, nothing happens anymore (nothing = no popup of the menu). This is just because of the System.Web.UI.WebControls.Menu on the page. When I remove the System.Web.UI.WebControls.Menu, everything works normal.

I made a sample code, to reproduce the problem:

<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb"Inherits="_Default" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/> <div> <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:WebPartManager ID="WebPartManager1" runat="server"> </asp:WebPartManager> </ContentTemplate> </atlas:UpdatePanel> <br /> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"> <Items> <asp:MenuItem Text="Neues Element" Value="Neues Element"> <asp:MenuItem Text="Neues Element" Value="Neues Element"> <asp:MenuItem Text="Neues Element" Value="Neues Element"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Neues Element" Value="Neues Element"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Neues Element" Value="Neues Element"> <asp:MenuItem Text="Neues Element" Value="Neues Element"></asp:MenuItem> </asp:MenuItem> </Items> </asp:Menu> <br />  </div> <atlas:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:WebPartZone ID="WebPartZone1" runat="server"> <ZoneTemplate> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </ZoneTemplate> </asp:WebPartZone> </ContentTemplate> </atlas:UpdatePanel> </form> </body></html>

ASH123,

I am having the same issue. I found that if you set WebPartVerbRenderMode to TitleBar, you are allowed to minimize/restore the webpart multiple times.

Did you ever find a solution that doesn't involve this work around?

Thanks

Monday, March 26, 2012

Tab Control - Change active tab

Hi,

I have a quick question that I am hoping will have an easy answer.

I have a form with a tab control and 3 tabs. What I would like to do is have a button on one of the tabs change the active tab.
So under tab 1 the users clicks the button which will bring them to tab 2. I know they can just click on the tab header at the top however I want to do some quick validation of information before making that tab visible and switching focus to it, is this possible?

Regards,

Daryl

function SetTabIndex(index)
{
var tabs = $find('TabContainerClientID');
tabs.set_activeTabIndex(index);
}
Thank you Jason!

Tab control & master pages

How do I access a tab control that is on a Default.aspx form, which is diplayed in the ContentPlaceholder from my MasterPage.

Page.FindControl(string controlId) ?

I'm not sure, but I think this works...

Agapito

Nope it does not work.

Maybe im explaining wrong. The control resides in a Default.aspx that will be the ContentPlaceholder. I want to access the control from the master pages. The Tab control resides on the Default.aspx

I also tried

//Page.FindControl(TabContainer1);//Master.FindControl(TabControl1);this.ContentPlaceHolder1.FindControl(TabControl);

Given a Content Placeholder of "GCSContent" and a Tab Container of "TabContainer1", I am able to successfully find the control in the Page_Unload event of MasterPage.master using the following syntax:

this.GCSContent.FindControl("TabContainer1");

how do I accomplish this............?

It tells me that the TabContainer1 does not exist in the current context

protected void MenuItem_Click(object sender, MenuEventArgs e)
{
if (this.Menu1.SelectedItem.Value.Equals("1"))
{

this.ContentPlaceHolder1.FindControl("TabContainer1");
TabContainer1.ActiveTab = TabPanel2;

}

}

What is the ID of the tabContainer?

TabContainer myTabContainer = (TabContainer) this.ContentPlaceHolder1.FindControl("whatever_ID");

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, Update Panel, and TabOrder

I am having a problem with my update panel and tab panel where it will not recognize my form elements and let me tab to them.

I have an update panel that is a conditional update. When this is updated, it is making a tab enabled in the tabcontainer. (this is the second tab that is visible)

When this is done, I set the focus to the first form element (drop down list box) using the Script Manager.

The problem is when I tab, it goes directly to the address bar in IE 7.0. Even if I hit the tab several times, it will never come back to the drop down list even.

Now here is where it gets wierd. If I click the first tab and then go back to the second tab, I can hit the tab key and everything works right. Why would this be happening?

Thanks,

Keith

ok, I figured out what was happening.

I had a tab that was disabled for various reason.

one control on the tab was trying to show a modal dialog box. It was resulting in an error because the control wasn't passed back to the client. This caused all kinds of havoc apparently. I fixed this so that the control wasn't inappropriately calling the show modal dialog and all tabs were fine again.

Tabcontainer & Tabpanel

I just installed the AJAX Extensions and AJAX ControlToolkit. I'm trying to use the TabContainer and the TabPanel so I can have tabs on my ASP form. Here is my sample:

<ajaxToolkit:TabContainerID="TabContainer1"runat="server"ActiveTabIndex="0"CssClass="ajax__tab_xp">

<ajaxToolkit:TabPanelID="TabPanel1"runat="server"HeaderText="Tab one heading">

<ContentTemplate> Tab 1 Text

<asp:ButtonID="Button1"runat="server"Text="Button"/>

</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="TabPanel2"runat="server"HeaderText="Tab two heading"Enabled="false">

<ContentTemplate> Tab 2 Text

<asp:ButtonID="Button2"runat="server"Text="Button"/>

<asp:CheckBoxID="CheckBox1"runat="server"/></ContentTemplate>

</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

But when i go into Design view all i get is a grey 'TabContainer - TabContainer1' box. I would like to be able to view the tabs and add buttons, labels, textboxes, and pictures into each tab in design mode. Is there a way to do that or another option to look at for tabs in a web application?

We do not have extensive support for tabs in design mode. We do have awork item tracking it though. Currently you will have to customize tabs using the code view.

Are there other kinds of ways to use a tabpanel? For example, writing a seperate .aspx page and display that in each tab? I found you could use IFRAME's but is that the only way to do something like that? There were concerns about using frames that some browsers may block that from working, so is there another option to display multiple .aspx pages in one web window, in a tab panel?

Are there other kinds of tabpanels for asp?

Thanks!

merickson:
Are there other kinds of ways to use a tabpanel? For example, writing a seperate .aspx page and display that in each tab?

I wrapped the desired TabPanel content in a Web User Control. The user control can be edited in both views and the TabPanel simply contains the control, like so:

<ajaxToolkit:TabPanel runat="Server" ID="urlTabPanel" HeaderText="User Control">
<ContentTemplate>
<BaBu:MyUserControl runat="server" />
</ContentTemplate>
</ajaxToolkit:TabPanel>

babu

Wednesday, March 21, 2012

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 Issue

I've created a webform that has a modal dialog box that retrieves data from a database, then returns those values to the parent form. This functionality works fine. I recently added a tabcontainer in hopes to add tabs to the parent web form. After reformatting my form with the tabcontainer and tab panel, everything seem to be working fine until I tested the modal dialog box. It does open but when trying to pass information back to the parent form, it doesn't seem to find the fields. I am using the "document.getElementbyID" with no luck. Below is my javascript function that does work as soon as I remove the tabcontainer with its corresponding tab panel. I put them back and it doesn't work, it does return the followingerror "document.getElementById(...) is Null or not an object"

Any advice from the experts would be greatly appreciated. I really like to use these tabs on my form.

try using

document.getElementById('<%= txtGroup.ClientID%>').value=txt2[1].toString();
document.getElementById('<%= txtGroupID.ClientID%>').value=txt2[0].toString();

Yes...that did it thank you! But I am still puzzled by the whole "tab container" concept. Why are fields somehow not available. After making the changes as you mentioned above, and proceeding to submit my form the sqldatasource1.insert() is not working. I get the following error "Could not find control 'txtReceived' in ControlParameter 'letter_recv_date' ". Again, if I remove the tab container and leave all the fields onto a form, it works fine. Any additional insights would be appreciated.

Hi Rnino3,

Control's ID usually does same as its ClientID when the control is inside another Container.

For example, TextBox1 inside TabContainer1 , its ClientID should be TabContainer1_TabPanel1_TextBox1. You can find in the generated HTML code. So in your situation, please use <"%=txtReceived.ClientID%"> instead of txtReceived.

Best regards,

Jonathan

Wednesday, March 28, 2012

System.Web.UI.WebControls.Menu and UpdatePanels / WebParts

Monday, March 26, 2012

Tab Control - Change active tab

Tab control & master pages

tab control and modelpopup

Saturday, March 24, 2012

Tab Panel, Update Panel, and TabOrder

Tabcontainer & Tabpanel

Wednesday, March 21, 2012

TabContainer doesnt persist tab selection between postbacks

TabContainer Issue

ajax TabControl

Blog Archive

About Me