Sunday, March 11, 2012

tabcontainer. making tabs visible/invisible from tabpanelheader click and button click. no

Try using enabled rather than visible

Doesn't seem to make sense but there are a number of threads on this topic

Cheers


I appreciate the quick reply. Unfortunately it did not work. It does make the tabs I choose dissapear on page load. But I want to be able to toggle between making tabs visible/invisiblewithout reloading the page (ex. clicking a button in an update panel changes which tabs are displayed).


mark2:

I appreciate the quick reply. Unfortunately it did not work. It does make the tabs I choose dissapear on page load. But I want to be able to toggle between making tabs visible/invisiblewithout reloading the page (ex. clicking a button in an update panel changes which tabs are displayed).

Hi

I had a play with my setup that does a similar thing to you without the button.(I trigger the events with a treeview selectednodechange.)
I added a button to a tab which fired my Tabtoggle routine when clicked. I set the trigger of the update panel to the button.
I found that I had to change focus to another tab before the tab with the button would disappear.
(ie button in Tab2 then move to Tab1 for the button click event to disenable Tab2)

I hope that helps
Michael


So your intention is to change it on client side. You may use the following function as the click event handler for the button.

function pageLoad() {
var tc = $find("TabContainer1");
tc.get_tabs()[1].set_enabled(false);
}

Hope this helps.


Thanks a lot that worked!. But I also need to:

1. make tabs visible/invisible from code-behind when certain conditions are met. ex: if (my function returns x) then call javascript function

2. if I have several tabs how to do I change the selected tab (also what resource do you use to get the correct javascript syntax for asp controls?)

3. there is a textbox in an updatepanel contained inside the tabpanel that is made visible/invisble. This textbox gets populated on the same buttonclick as the tabpanel becomes visible. The letters in the textbox instead of being black like they were before I used the tc.get_tabs()[1].set_enabled(true);
code are now grey-half invisible ?!

thanks


mark2:

1. make tabs visible/invisible from code-behind when certain conditions are met. ex: if (my function returns x) then call javascript function

You can register the above as startup script is the function returns x. For example:

if(function() == x) { ScriptManager.RegisterStartupScript( .......... ); }

mark2:

2. if I have several tabs how to do I change the selected tab (also what resource do you use to get the correct javascript syntax for asp controls?)

To change active tab on client side, you can use this:

$find("TabContainer1").set_activeTabIndex(indexToBeSet);

mark2:

3. there is a textbox in an updatepanel contained inside the tabpanel that is made visible/invisble. This textbox gets populated on the same buttonclick as the tabpanel becomes visible. The letters in the textbox instead of being black like they were before I used the tc.get_tabs()[1].set_enabled(true);
code are now grey-half invisible ?!

Sorry, I'm not able to reproduce it. Can you show me a simple repro?


Thanks for showing me how to change the active tab from javascript. These problems remain from my previous post:

1. But I would like to call the javascript function from code-behind after the page has loaded. In response to a user triggered event. Like a database query that returns a certain value for a field.
2.The code below reproduces the greyed out text that populates the textbox.
3. Where did you find the correct syntax in javascript to access the tabpanel control [tc.get_tabs()[1].set_enabled(true)] ?


Source Code:

<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!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>
<script type="text/javascript" language="javascript">

function enableTab() {
var tc = $find("TabContainer1");
tc.get_tabs()[0].set_enabled(true);
}
</script>

</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtBox1" runat="server" BackColor="White"> </asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
</cc1:TabPanel>
</cc1:TabContainer>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnEnable" runat="server" OnClientClick="enableTab()" Text="Enable Tab/Populate txtboxes" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Code Behind:

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub btnEnable_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnEnable.Click
txtBox1.Text = "enable clicked1"

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
TabContainer1.Tabs(0).Enabled = False
End Sub
End Class

thanks again for all the help you have provided so far

No comments:

Post a Comment