Going For AJAX: tab

Showing posts with label tab. Show all posts

Wednesday, March 28, 2012

How do I programatically change the active tab (TabPanel)?

I am trying to change the selected tab from a hyperlink within a TabPanel to activate another tab (TabPanel). Ideally, I would like to do this on the client side using javascript. Can this be done and if so how?

I am using the official release version of the Ajax Control Tookit.

Thanks in advance for any help or suggestions!

Brian

Hi,

you can use this javascript method and call the method from a hyperlink control:

function SetActiveTab(tabControl, tabNumber)
{
var ctrl = $find(tabControl);
ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);
}

I have an example for you:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Evaluator.aspx.cs" Inherits="Evaluator" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!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 id="Head1" runat="server"> <title>Tab Control </title> <script> function SetActiveTab(tabControl, tabNumber) { var ctrl = $find(tabControl); ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <input type="Button" id="tabChange" value="Set Tab" onclick="SetActiveTab('<%=Tabs.ClientID%>', 1)" /> <br /> <cc1:TabContainer ID="Tabs" runat="server"> <cc1:TabPanel runat="server" ID="tab1" HeaderText="Tab 1"> <ContentTemplate> Test Tab 1 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel runat="server" ID="tab2" HeaderText="Tab 2"> <ContentTemplate> Test Panel 2 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel runat="server" ID="tab3" HeaderText="Tab 3"> <ContentTemplate> Test Panel 3 </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </form> </body></html>

Regards
Marc Andre

Thank you very much! That works perfectly.

regards,

Brian

What about server side changing?

Anyone?

also interested in server-side - thanks.
right infront of me - "tabs.ActiveTabIndex = 0" where tabs is the tabcontainerid and 0 = tabid.

I am trying to programatically change the Active Tab to Tab B, after doing a partial page postback using an UpdatePanel in Tab A. It doesn't work. If I do a full page postback it does work. Can you switch tabs programatically after a partial page postback?

srr0943:
I am trying to programatically change the Active Tab to Tab B, after doing a partial page postback using an UpdatePanel in Tab A. It doesn't work. If I do a full page postback it does work. Can you switch tabs programatically after a partial page postback?

I'm having the same issue right now. I haven't tried performing a "full postback" yet, but I can't seem to get the tabs to change.

This is what I've done to resolve this issue.

I have a TabContainer that has about 4-5 tabs depending on the tabs required by the user. Each tab has an update panel within it to prevent full postbacks. What I did was housed the entire TabContainer in a "parent" UpdatePanel. Once I have set it to change the active tab via TabContainer.ActiveTabIndex = 0,1,2 etc I tell the parent UpdatePanel to update. See code example below

TabContainer.ActivetabIndex = 1
ParentUpdatePanel.Update()

Voila!

Hi!

I've same but little different problem. When user clicks on a non_active tab, I want to keep active tab as active if some criteria doesn't meet. For example, I've 2 tabs in tab container. Suppose Tag[0] is active tab right now. When user clicks on Tag[1], I call a javascript method, that I've set in the OnClientClick property of Tag[1]. The JavaScript method is as under

function checkCriteria()
{
var stopTabChange = true;

if (stopTabChange)
{
var ctrl = $find('<%=myTabs.ClientID%>');
ctrl.set_activeTab(ctrl.get_tabs()[0]);
}
}

The above method is called when user clicks on Tag[1]. I assume that due to above method, Tag[1] will not become active and Tag[0] will remain active. But instead of above method, Tag[1] still becomes active. Can you help me that please?

Regards

Amer Javaid

Hi!

Thanks everybody, I figured it out how to do that. I called above method in OnClientActiveTabChanged event of TabContainer and it worked.

Regards

Amer Javaid

I'm sorry for not understanding this but I am very new to AJAX controls and need a little help with VB.Net code behind to do this:

"right infront of me - "tabs.ActiveTabIndex = 0" where tabs is the tabcontainerid and 0 = tabid."

can anyone please point me to an example in VB.Net?

I have 3 tabs in my TabContainer and on certain criteria need to change the visible Tabpanel using the code-behind. Any help would be greatly appreciated. TIA,

Coleen,

Let's say on a button click you want to change the active tab panel. In that case, under the buttons onClick event you would write some code that would look like below:

TabContainerName.ActiveTabIndex = 0 ' or any number from 0, 1, 2 - because in your example you only have three tabs.

Does that make sense?

Yes, thank you very much!

Actually I tried to setActiveTabIndex in event handler on Click edit commend in GridView as aserver sidesolution and is not working, at least in my case.

Monday, March 26, 2012

How do I exit GridViews EditMode when user clicks to another TabPanel?

I've got a GridView/FormView pair on each of four TabPanels. If a user has a GridView is in EditMode in one tab and he clicks on another tab's header, I want to have the GridView on the current panel exit EditMode.

I've tried several approaches, but with no results, save one. That setup, though the GridView did exit EditMode, theentire TabContainer refreshed - took forever, and really looks crappy.

In the one that "worked", I had this in my code behind:

Protected Sub tabContEquipment_ActiveTabChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles tabContEquipment.ActiveTabChangedGridView1.EditIndex = -1GridView2.EditIndex = -1GridView3.EditIndex = -1GridView4.EditIndex = -1End Sub

And in the TabContainer's tag, I had to include this:

<ajaxToolkit:TabContainer ID="tabContEquipment" runat="Server" CssClass="active_tab inactive_tab hover_tab" ActiveTabIndex="0" OnActiveTabChanged="tabContEquipment_ActiveTabChanged" AutoPostBack="true">

My latest attempt was to call a sub from each of the tabs' OnClientClick event and exit the EditMode for that tab's GridView. Like such:

<ajaxToolkit:TabPanel ID="tabEquip" runat="server" HeaderText="Equipment" OnClientClick="GridView1_ExitEditMode">

and:

Public Sub GridView1_ExitEditMode(ByRef senderAs Object,ByRef eAs System.EventArgs)GridView1.EditIndex = -1End Sub

That just resulted in the entire TabContainer not rendering and I got the error: 'GridView1_ExitEditMode' is not defined. That's likely due to my inexperience in coding, but I don't understand why that setup didin't work...

I'm wondering if this has something to do with working with triggers and child controls within the container and its panels, but I'm not really getting how those work together either!

I'dREALLY appreciate it if someone could help me out here. I really thought this would be a simple matter of just setting EditMode = -1 for the GridView when the user clicks another header, but obviously that's not the case! (Which seems to be the rule, rather than the exception with the AJAX Control Toolkit - another remark from a very inexperienced developer!)

Thanks!

C'mon! No one's got any suggestions/ideas?

I'dreally appreciate some helpl here!

Thanks.

Hey, guys, I'm still not getting anywhere with this problem.

Could anyone offer any suggestions?

Thank

capella07:
<ajaxToolkit:TabPanel ID="tabEquip" runat="server" HeaderText="Equipment" OnClientClick="GridView1_ExitEditMode">
and:
Public Sub GridView1_ExitEditMode(ByRef senderAs Object,ByRef eAs System.EventArgs)GridView1.EditIndex = -1End Sub
That just resulted in the entire TabContainer not rendering and I got the error: 'GridView1_ExitEditMode' is not defined. That's likely due to my inexperience in coding, but I don't understand why that setup didin't work...

OnClientClick property indicates the client side function that will be called when the panel is clicked on client side, but it doesn't exist in your code.

capella07:
I've tried several approaches, but with no results, save one. That setup, though the GridView did exit EditMode, theentire TabContainer refreshed - took forever, and really looks crappy.
In the one that "worked", I had this in my code behind:
Protected Sub tabContEquipment_ActiveTabChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles tabContEquipment.ActiveTabChangedGridView1.EditIndex = -1GridView2.EditIndex = -1GridView3.EditIndex = -1GridView4.EditIndex = -1End Sub
And in the TabContainer's tag, I had to include this:
<ajaxToolkit:TabContainer ID="tabContEquipment" runat="Server" CssClass="active_tab inactive_tab hover_tab" ActiveTabIndex="0" OnActiveTabChanged="tabContEquipment_ActiveTabChanged" AutoPostBack="true">

This is an easy way to achieve what you described, and I think you may place the TabContainer in a UpdatePanel to avoid a full postback.

Saturday, March 24, 2012

How do I add an image button to a tab on a AJAX TabControl dynamically at runtime

How do I add an image button to a tab dynamically at runtime so that it replicates the codebehind version :-

ajaxToolkit:TabPanelrunat="server"ID="tabA"HeaderText=""><HeaderTemplate><asp:ImageButtonrunat="server"ID="refreshTabA"ImageUrl="./img/Refresh.gif"OnClick="refreshTabA_OnClick"/><spanstyle="">Tab A</span></HeaderTemplate>

I am building my Tabs on my TabControl dynamically and in each of the tabs I have a ReportViewer control. (So I can display multiple reports on a page 1 tab per report), this bit works ok which adds the tab and the tab title and the report, just the image button on the tab I'm missing.

TabPanel tabPanel =newTabPanel(); // Create Tab dynanically

tabPanel.ID =

"tab" + ReportName;

tabPanel.HeaderText = DisplayName;

ReportViewer reportViewer =newReportViewer(); // Create report

tabPanel.Controls.Add(reportViewer);// Add report dynamically to TabTabContainer1.Tabs.Add(tabPanel);// Add Tab to Tab Container

After much searching on the web I think I have found a solution

// Create Tab dynanically

TabPanel tabPanel =newTabPanel();

// Assign a new header template with the image and report Info which is a simple

class holding ReportName and DisplayName

tabPanel.HeaderTemplate =

newDynamicallyCreatedTemplate(ListItemType.Header, reportConfig);

Then create your Template Class

1 public class DynamicallyCreatedTemplate : ITemplate
2 {
3 //A variable to hold the type of ImageButton.
4 ListItemType _itemType;
5 ReportInfo _reportInfo;
6
7 //Constructor where we define the template type and column name.
8 public DynamicallyTemplate(ListItemType itemType, ReportInfo reportInfo)
9 {
10 //Stores the template type.
11 _itemType = itemType;
12 _reportInfo = reportInfo;
13 }
14
15 public void InstantiateIn(System.Web.UI.Control container)
16 {
17 try
18 {
19 switch (_itemType)
20 {
21 case ListItemType.Header:
22
23 // First Add the Image Button
24 ImageButton imgButton =new ImageButton();
25 imgButton.ID ="img" + _reportInfo.ReportName;
26 imgButton.ImageUrl = @."./img/Refresh.gif";
27 imgButton.Click +=new ImageClickEventHandler(refreshTabA_OnClick);
28 imgButton.ToolTip ="Refresh";
29 container.Controls.Add(imgButton);
30
31 // Then add the Tab Label
32 Literal header_ltrl =new Literal();
33 header_ltrl.Text =" " + _reportInfo.DisplayName;
34 container.Controls.Add(header_ltrl);
35 break;
36 case ListItemType.Item:break;
37 }
38 }
39 catch
40 {
41 }
42 }
43 }

hi all,

i have 3 tabs in my tabcontainer generated dynamically.

for each tab header i need to have a different active image and deactive image

tab1 (active1.gif, inactive1.gif)

tab2 (active2.gif ,inactive2.gif)

has anyone tried out this.

Pls help

Thanks.

How do I access controls in a TabContainer for FormView Select Parameters

I have a page with a gridview which is inside a tab panel.

Depending upon the selection in the GridView I need to set a Select Parameter for a FormView on another area of the page.

I simply get the error "Could not find control 'GridView2' in ControlParameter 'PoemID'"

Any suggestions ?

i got the same problem trying to access a label inside a tabcontainer...

someone pease help us!

I have had some success with resolving a similar problem by adding the name of the container to to the ControlId parameter as follows: ContainerName$Gridview2

I have an UpdatePanel with a textbox inside, further down the page I have a tab panel that needs to reference the value entered into the textbox and was able to get it to work by having the following syntax:<asp:ControlParameterControlID="UpdatePanel1$TextBox1" ...... what I can't work out is how to reference the same textbox from the tabpanel if it was placed within another tabpanel above or a different container such as an accordion panel. let me know if this gives you any clues...

Found any solution yet? I'm also facing the same problem. Thank you for sharing.

Men, thanks to you I could fix my application...

You just have to do the same with all the controls of the panel, but remember to use the tab container and the tab panel, OK... Here my example... Thnaks

SelectMethod="GetEmpleado_MByNumero"TypeName="RecursosHumanoBLL"UpdateMethod="UpdateEmpleadosMByNumeroEmpleado"OldValuesParameterFormatString="{0}">

<asp:ControlParameterControlID="udpConsultaEmpleado$tcEmpleados$tpFiltro$gvEmpleados"DefaultValue="1"Name="Numero"

PropertyName="SelectedValue"Type="Int32"/>

</SelectParameters>

I hope it work for you too

How do i abort Ajax TabContainer Tab Change?

I have a Ajax TabContainer that has 3 tabs and each of the tab contains a formview to display/update data. When the user modifies any data in the edit mode in the formview and tries to change tab without updating the data, i would like to display a warning message to alert the user that he/she has some unsaved data in the form and abort the tab change. I sort of have an idea how to do it but somehow it's giving me a runtime javascript object reference = null runtime error on sender.set_activeTabIndex(0); in tabChanged(). Can someone help please? Thanks.

Current Code:

var isDirty = false;

var prevTabIndex = 0;

function tabChanged(sender, args)

{

if (isDirty)

{

sender.set_activeTabIndex(0);

prevTabIndex = parseInt(sender.get_activeTabIndex());

}

function setDirty(objID)

{

if (document.getElementById(objID).value != document.getElementById(objID).defaultValue)

{

//alert("Old Value: "+document.getElementById(objID).defaultValue+", New Value: "+document.getElementById(objID).value);

isDirty=true;

}

</script>

<cc1:TabContainerID="TabContainer1"runat="server"Width="818px"Height="260px"ActiveTabIndex="0"OnClientActiveTabChanged="tabChanged">

<cc1:TabPanelID="TabPanel1"runat="server"HeaderText="TabA">

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<asp:FormViewID="fvA"runat="server"DefaultMode="readonly"DataSourceID="dsA"OnModeChanging="changeFormViewMode">

FieldA :<%# Eval("FieldA") %>

</ItemTemplate>

FieldA:

<asp:TextBoxID="TextBoxA"runat="server"Text='<%# Bind("FieldA") %>'onchange="setDirty(this.id)"></asp:TextBox>

</EditItemTemplate>

</asp:FormView>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanelID="TabPanel2"runat="server"HeaderText="TabB">

<asp:UpdatePanelID="UpdatePanel2"runat="server">

<asp:FormViewID="fvB"runat="server"DefaultMode="readonly"DataSourceID="dsB"OnModeChanging="changeFormViewMode">

FieldB :<%# Eval("FieldB") %>

</ItemTemplate>

FieldB:

<asp:TextBoxID="TextBoxB"runat="server"Text='<%# Bind("FieldB") %>'onchange="setDirty(this.id)"></asp:TextBox>

</EditItemTemplate>

</asp:FormView>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</cc1:TabPanel>

Hi Sazabi,

After a quick glance, I found that there maybe a endless loop in your code. When you change the actived Tab, it will raise OnClientActiveTabChanged event and there's set_activeTabIndex() in your code, then it will raise OnClientActiveTabChanged once more.

You should do some modification. For example:

var flag = false;
function tabChanged(sender, args){
if(flag) {flag = false; return;}
flag = true;
sender.set_activeTabIndex(0);
prevTabIndex = sender.get_activeTabIndex();
}

Best regards,

Jonathan

How do a postback on Tab change (ajaxToolkit:TabContainer)

Please help - very simple question.

From documentation onajaxToolkit:TabContainer

TabContainer Properties
ActiveTabChanged (Event) - Fired on the server side when a tab is changed after a postbackOnClientActiveTabChanged - The name of a javascript function to attach to the client-side tabChanged event

When tabs changed, I need to know what tab was changed and populate the related dynamic content.

I have the code (see below) wher OnActiveTabChanged="TabChangedServer" never gets fired and do a postback on Tab change. How can I make it to do a postback!?

<ajaxToolkit:TabContainer runat="server" ID="Tabs" OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="TabChangedServer" >

Thanks

Nat

I found a solution myself. See my post athttp://forums.asp.net/thread/1554862.aspx

Me too!

http://forums.asp.net/t/1074271.aspx

Wednesday, March 21, 2012

How can I override the default "TAB" look on the TabControl.

Basically, I'm the designer and trying to customize this tab control. I don't want the default "style" look and need to customize it to my liking. There really isn't much information on this. I do know how to create the tab options as a headertemplate. I just don't know how to TURN off the XP default tab. Can anyone lend any assistance?

I believe I have figured this out - Thanks to an external web site. I'm posting the solution here so others may benefit from it.

Basically I found out that the default CSS styles are listed below: The tab control uses CSS inheritance to set the cascade. So if you change the

<ajaxToolkit:TabContainerrunat="server"Height="300px"width="750px"ScrollBars="Vertical"CssClass="ajax__tab_xp"> to the following and modify the class value you can take control of the CSS in an external style sheet. The one problem is utilizing the embedded images.

/*AJAX.NET TAB CONTROL */.ajax__tab_xp .ajax__tab_header { font-family:verdana,tahoma,helvetica; font-size:11px; background: url(AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}.ajax__tab_xp .ajax__tab_outer { padding-right:4px; background: url(AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right; height:21px;}.ajax__tab_xp .ajax__tab_inner { padding-left:3px; background: url(AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_tab { height:13px; padding:4px; margin:0; background: url(AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer { background: url(AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner { background: url(AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab { background: url(AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_active .ajax__tab_outer { background: url(AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_active .ajax__tab_inner { background: url(AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_active .ajax__tab_tab { background: url(AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}.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;}

Hi,

Do you know if there any sample css styles for the tabs out there? I am not very good with css and was wondering if I could look at some samples.

Thanks

Wednesday, March 28, 2012

How do I programatically change the active tab (TabPanel)?

Monday, March 26, 2012

How do I exit GridViews EditMode when user clicks to another TabPanel?

Saturday, March 24, 2012

How do I add an image button to a tab on a AJAX TabControl dynamically at runtime

How do I access controls in a TabContainer for FormView Select Parameters

How do i abort Ajax TabContainer Tab Change?

How do a postback on Tab change (ajaxToolkit:TabContainer)

Wednesday, March 21, 2012

How can I override the default "TAB" look on the TabControl.

Going For AJAX

Blog Archive

About Me