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.

How Do I Dynamically Update a TabPanel?

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.

How do I dynamically create TabPanels in codebehind?

I have tried creating TabPanels dynamically in Page_Init but they aren't showing up even though I do see them when doing View Source on the resulting page. When I add them statically with the designer, they do show up. I am using 10618 version of the toolkit.

Here is a code snippet:

protected void Page_Init(object sender, EventArgs e){ AjaxControlToolkit.TabPanel tp =new AjaxControlToolkit.TabPanel(); tp.ID ="DynamicTab1"; tp.HeaderText ="DynamicTab1" Label tabContents =new Label(); tabContents.Text = tp.HeaderText; tp.Controls.Add(tabContents); ExistingTabContainer.Tabs.Add(tp);}

Hi,

I'd do this dynamic tab panel creation this way (it also works in the Page_Load event handler):

protected override void OnInit(EventArgs e){base.OnInit(e);// Create the tab panel's content container Control tabContent =new Control(); TabPanel tab =new TabPanel(); tab.ID ="tabPanel1"; tab.HeaderText ="Dynamic Panel"; Label label =new Label(); label.Text ="This is a dynamic tab panel"; tabContent.Controls.Add(label); tab.Controls.Add(tabContent);this.tabContainer1.Tabs.Add(tab);}

This pice of code works for me perfect. The tabContainer1 control is of type AjaxControlToolkit.TabContainer and is declared on the page this way:

<ajaxcc:TabContainer ID="tabContainer1" runat="server"></ajaxcc:TabContainer>

Kind regards,

sbogus.

sbogus, I got it to work using your sample code. I really appreciate your help.

Cheers!

Ron

how can i set tabpanels on right side of a tabcontainer

HI all,

How can i set tabpanels on right side of a tabcontainer

hello all...

does anyone know.. please do write a reply...

i see only no replies