New to Ajax, .net and dotnetnuke. I'm trying to figure out something with TabContainers/TabPanels. I want to be fill some form fields on one TabPanel of a TabContainer based on the selected item in a DropDownList on another TabPanel.
Suppose I have something like the code that follows and wanted to put the selected value from the drop down list on Tab 1 into the text box on Tab 2. How would I do that? I am not sure how to access fields on a sibling tab.
Any help would be greatly appreciated.
<asp:UpdatePanel ID="up1" runat="server">
<cc1:TabContainerID="TabContainer1"runat="server"Visible="false">
<cc1:TabPanelID="TabPanel1"runat="server">
<HeaderTemplate>Tab 1</HeaderTemplate>
<ContentTemplate>
<asp:DropDownListID="shopDropDownList"runat="server"DataSourceID="ShopsDataSource"DataTextField="text"DataValueField="value"
OnSelectedIndexChanged="shopDropDownList_change"AutoPostBack="true" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanelID="TabPanel2"runat="server">
<HeaderTemplate>Tab 2</HeaderTemplate>
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</asp:UpdatePanel>
If you need to do this on the client, something like this should work for you:
<scripttype="text/javascript"language="javascript">function pageLoad() {var ddl = $get("<%=DropDownList1.ClientID %>"); $addHandler(ddl,"change", changeHandler); }function changeHandler(e) {debugger;var ddl = $get("<%=DropDownList1.ClientID %>");var tb = $get("<%=TextBox1.ClientID %>"); tb.value = ddl.value; }</script>-yuriy
Hi bob,
Here is a simple sample. Hope it helps.
ASPX Code
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="TabTest.aspx.cs" Inherits="Tab_TabTest" %>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>Tab1</HeaderTemplate>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>Tab2</HeaderTemplate>
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
C# Code
using System;using System.Data;using System.Configuration;using System.Collections;using System.Collections.Generic;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass Tab_TabTest : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) { List<int> myList =new List<int>(); myList.Add(1); myList.Add(2);this.DropDownList1.DataSource = myList;this.DropDownList1.DataBind(); } }protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) {this.TabContainer1.ActiveTabIndex = 0;this.Label1.Text =this.DropDownList1.SelectedValue; }}If I misunderstood you, please let me know.
Hi
the provided code works fine for me (it does asynchronous postback to the server and updates the label).
what do you need to change?
-yuriy
Yes. It helps a lot. Thanks.
