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 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}">

<SelectParameters>

<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:

<script type="text/javascript">

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">

<HeaderTemplate>TabA</HeaderTemplate>

<ContentTemplate>

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

<ContentTemplate>

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

<ItemTemplate>

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

</ItemTemplate>

<EditItemTemplate>

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">

<HeaderTemplate>TabB</HeaderTemplate>

<ContentTemplate>

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

<ContentTemplate>

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

<ItemTemplate>

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

</ItemTemplate>

<EditItemTemplate>

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