Showing posts with label click. Show all posts
Showing posts with label click. Show all posts

Wednesday, March 28, 2012

Tab Container and GridView

Hello

Does any peopel try to use the GridView Paging with the Tab Container? It is because when I try to click to page 2.

Following problem occurred.

Specified argument was out of the range of valid values.
Parameter name: The StartRowIndex '10' is out of range. Current item count is '0'

Hi Hnchan,

Here is the sample which you can reference to. Please compare it with yours.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel2" runat="server"> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server"> <HeaderTemplate> Tab1</HeaderTemplate> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="3"> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" /> <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> <asp:CommandField ShowEditButton="True" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"></asp:SqlDataSource> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate> Tab2 </HeaderTemplate> <ContentTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </asp:Panel> </form></body></html>
Also you can add an UpdatePanel and put the GridView inside the UpdatePanel .Thanks.
Best regards,
Jonathan

I am sorry to say that it still does not work. Is this the problem related the ObjectContainerDataSource from WCSF?


Hi Hnchan,

So what's your Ajax Control Toolkit's version? Mine is V10618.

hnchan:

Is this the problem related the ObjectContainerDataSource from WCSF?

It's hard to say.Would you please wholly copy my source code and have a test.If all these don't work, we really need more information to find out the exact root cause.

I hope this help.

Best regards,

Jonathan

Tab Content Disappears by Clicking on Active Tab

I am puzzled as to why the dynamically loaded content of an Active Tab disappears when I click on the Active Tab. But if I click on another Tab and go back to the previous tab the content appears.

<%@dotnet.itags.org.PageLanguage="C#"MasterPageFile="~/MasterPages/DeafaultMasterPage.master"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"Title="Default Page" %>
<asp:ContentID="Content2"ContentPlaceHolderID="cphBody"Runat="Server">
<scripttype="text/javascript"language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= tcDefault.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
<ajaxToolkit:TabContainerID="tcDefault"runat="server"OnClientActiveTabChanged="ActiveTabChanged"

OnActiveTabChanged="ActiveTabChangedServer">

<ajaxToolkit:TabPanelID="tab1"runat="server"HeaderText="Info"EnableViewState="true">

<ContentTemplate>Dynamic content, load UserControl

</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="tab2"runat="server"HeaderText="tab 2"EnableViewState="true"/></ajaxToolkit:TabContainer>

Code Behind

protected void Page_Load(object sender, EventArgs e) { ScriptManager sm = ScriptManager.GetCurrent(this.Page); sm.RegisterAsyncPostBackControl(tcDefault); }  
protected void ActiveTabChangedServer(object sender, EventArgs e) {// Initialize Tab TabContainer tc = (TabContainer)CommonUtility.FindControlRecursive(this,"tcDefault");if (tcDefault.ActiveTab == tab1) { LoadControl1(tc); }if (tcDefault.ActiveTab == tab2) {//Do something in code LoadControl2(tc); } }

I noticed if I did the following;

protected void Page_Load(object sender, EventArgs e) { ReCreateTab(); }

The content in the tab sticks, but then the content is displayed twice. I know it has something to do with the ViewState, but not sure how to debug and what to read, I am new at this .Net and Ajax.

Any help would be appreciate.


Hi,

This is a FAQ regarding dynamic controls in asp.net. Please refer to this:

1. Why do I have to recreate dynamic controls every time? /Why dynamic controls are disappeared on PostBack?

Whenever a request comes, a new instance of the page that isbeing requested is created to serve the request even it's a PostBack. Allcontrols on the page are reinitialized, and there state can be restored fromthe ViewState in a later phase.

The dynamic controls have to be recreated again and added tothe control hierarchy. Otherwise, they won't exist in the page.

Please be careful with when to create dynamic controls. Inorder to keep their state, they have to be created before the LoadViewStatephase. Page_Init as well as Page_Load methods are options available.

For more information about this topic, please refer to thisarticle:

Creating Dynamic Data Entry User Interfaces[http://msdn2.microsoft.com/en-us/library/aa479330.aspx ]

Hope this helps.

Tab container problem

I am having a problem with my tab panel/tab container. Whenever I make a change or click in a tab it refreshes and takes me to the tab called pictures upload/modify. I want to be able to make changes in a tab and stay in that tab not switch tabs. I'm not sure what is causing this any ideas?

Here is the code:

<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@dotnet.itags.org. Page Language="VB" MasterPageFile="~/masterpage.master" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString1 %>"
DeleteCommand="DELETE FROM [Scrollbar] WHERE [EventID] = @dotnet.itags.org.EventID" InsertCommand="INSERT INTO [Scrollbar] ([Event]) VALUES (@dotnet.itags.org.Event)"
SelectCommand="SELECT * FROM [Scrollbar]" UpdateCommand="UPDATE [Scrollbar] SET [Event] = @dotnet.itags.org.Event WHERE [EventID] = @dotnet.itags.org.EventID">
<DeleteParameters>
<asp:Parameter Name="EventID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Event" Type="String" />
<asp:Parameter Name="EventID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Event" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConflictDetection="CompareAllValues"
ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString1 %>" DeleteCommand="DELETE FROM [Picture] WHERE [Picture_ID] = @dotnet.itags.org.original_Picture_ID AND [Picture_Name] = @dotnet.itags.org.original_Picture_Name AND [Picture_Description] = @dotnet.itags.org.original_Picture_Description AND [Picture_Date] = @dotnet.itags.org.original_Picture_Date AND [Picture_User] = @dotnet.itags.org.original_Picture_User AND [Picture_Path] = @dotnet.itags.org.original_Picture_Path"
InsertCommand="INSERT INTO [Picture] ([Picture_Name], [Picture_Description], [Picture_Date], [Picture_User], [Picture_Path]) VALUES (@dotnet.itags.org.Picture_Name, @dotnet.itags.org.Picture_Description, @dotnet.itags.org.Picture_Date, @dotnet.itags.org.Picture_User, @dotnet.itags.org.Picture_Path)"
OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [Picture]"
UpdateCommand="UPDATE [Picture] SET [Picture_Name] = @dotnet.itags.org.Picture_Name, [Picture_Description] = @dotnet.itags.org.Picture_Description, [Picture_Date] = @dotnet.itags.org.Picture_Date, [Picture_User] = @dotnet.itags.org.Picture_User, [Picture_Path] = @dotnet.itags.org.Picture_Path WHERE [Picture_ID] = @dotnet.itags.org.original_Picture_ID AND [Picture_Name] = @dotnet.itags.org.original_Picture_Name AND [Picture_Description] = @dotnet.itags.org.original_Picture_Description AND [Picture_Date] = @dotnet.itags.org.original_Picture_Date AND [Picture_User] = @dotnet.itags.org.original_Picture_User AND [Picture_Path] = @dotnet.itags.org.original_Picture_Path">
<DeleteParameters>
<asp:Parameter Name="original_Picture_ID" Type="Int32" />
<asp:Parameter Name="original_Picture_Name" Type="String" />
<asp:Parameter Name="original_Picture_Description" Type="String" />
<asp:Parameter Name="original_Picture_Date" Type="DateTime" />
<asp:Parameter Name="original_Picture_User" Type="String" />
<asp:Parameter Name="original_Picture_Path" Type="String" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Picture_Name" Type="String" />
<asp:Parameter Name="Picture_Description" Type="String" />
<asp:Parameter Name="Picture_Date" Type="DateTime" />
<asp:Parameter Name="Picture_User" Type="String" />
<asp:Parameter Name="Picture_Path" Type="String" />
<asp:Parameter Name="original_Picture_ID" Type="Int32" />
<asp:Parameter Name="original_Picture_Name" Type="String" />
<asp:Parameter Name="original_Picture_Description" Type="String" />
<asp:Parameter Name="original_Picture_Date" Type="DateTime" />
<asp:Parameter Name="original_Picture_User" Type="String" />
<asp:Parameter Name="original_Picture_Path" Type="String" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Picture_Name" Type="String" />
<asp:Parameter Name="Picture_Description" Type="String" />
<asp:Parameter Name="Picture_Date" Type="DateTime" />
<asp:Parameter Name="Picture_User" Type="String" />
<asp:Parameter Name="Picture_Path" Type="String" />
</InsertParameters>
</asp:SqlDataSource>

<cc1:TabContainer ID="TabContainer1" runat="server" width="875px" style="z-index: 133; left: 20px; position: absolute; top: 300px" BackColor="Transparent">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Events Data">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EventID"
DataSourceID="SqlDataSource2" EmptyDataText="There are no data records to display.">
<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="EventID" HeaderText="EventID" ReadOnly="True" SortExpression="EventID" />
<asp:BoundField DataField="EventName" HeaderText="EventName" SortExpression="EventName" />
<asp:BoundField DataField="EventDate" HeaderText="EventDate" SortExpression="EventDate"/>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource8" runat="server" ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString5 %>"
DeleteCommand="DELETE FROM [Events] WHERE [EventID] = @dotnet.itags.org.EventID" InsertCommand="INSERT INTO [Events] ([EventName], [EventDate]) VALUES (@dotnet.itags.org.EventName, @dotnet.itags.org.EventDate)"
ProviderName="<%$ ConnectionStrings:CORE2062ConnectionString5.ProviderName %>"
SelectCommand="SELECT [EventID], [EventName], [EventDate] FROM [Events]" UpdateCommand="UPDATE [Events] SET [EventName] = @dotnet.itags.org.EventName, [EventDate] = @dotnet.itags.org.EventDate WHERE [EventID] = @dotnet.itags.org.EventID">
<InsertParameters>
<asp:Parameter Name="EventName" Type="String" />
<asp:Parameter Name="EventDate" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="EventName" Type="String" />
<asp:Parameter Name="EventDate" Type="String" />
<asp:Parameter Name="EventID" Type="Int32" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="EventID" Type="Int32" />
</DeleteParameters>
</asp:SqlDataSource>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="EventID"
DataSourceID="SqlDataSource2" DefaultMode="Insert" Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="EventID" HeaderText="EventID" InsertVisible="False" ReadOnly="True"
SortExpression="EventID" />
<asp:BoundField DataField="EventName" HeaderText="EventName" SortExpression="EventName" />
<asp:BoundField DataField="EventDate" HeaderText="EventDate" SortExpression="EventDate" />
<asp:CommandField ShowInsertButton="True" />
</Fields>
</asp:DetailsView>
<br />
<asp:SqlDataSource ID="SqlDataSource6" runat="server" ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString4 %>"
DeleteCommand="DELETE FROM [Scrollbar] WHERE [EventID] = @dotnet.itags.org.EventID" InsertCommand="INSERT INTO [Scrollbar] ([Event]) VALUES (@dotnet.itags.org.Event)"
ProviderName="<%$ ConnectionStrings:CORE2062ConnectionString4.ProviderName %>"
SelectCommand="SELECT [EventID], [Event] FROM [Scrollbar]" UpdateCommand="UPDATE [Scrollbar] SET [Event] = @dotnet.itags.org.Event WHERE [EventID] = @dotnet.itags.org.EventID">
<InsertParameters>
<asp:Parameter Name="Event" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Event" Type="String" />
<asp:Parameter Name="EventID" Type="Int32" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="EventID" Type="Int32" />
</DeleteParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource7" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString4 %>" DeleteCommand="DELETE FROM [Scrollbar] WHERE [EventID] = @dotnet.itags.org.original_EventID AND [Event] = @dotnet.itags.org.original_Event" InsertCommand="INSERT INTO [Scrollbar] ([Event]) VALUES (@dotnet.itags.org.Event)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [Scrollbar]" UpdateCommand="UPDATE [Scrollbar] SET [Event] = @dotnet.itags.org.Event WHERE [EventID] = @dotnet.itags.org.original_EventID AND [Event] = @dotnet.itags.org.original_Event">
<DeleteParameters>
<asp:Parameter Name="original_EventID" Type="Int32" />
<asp:Parameter Name="original_Event" Type="String" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Event" Type="String" />
<asp:Parameter Name="original_EventID" Type="Int32" />
<asp:Parameter Name="original_Event" Type="String" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Event" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<br />
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataKeyNames="EventID"
DataSourceID="SqlDataSource7">
<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="EventID" HeaderText="EventID" InsertVisible="False" ReadOnly="True"
SortExpression="EventID" />
<asp:BoundField DataField="Event" HeaderText="Event" SortExpression="Event" />
</Columns>
</asp:GridView>

</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Users">
<ContentTemplate>
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
<WizardSteps>
<asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Pictures Upload/Modify">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<br /><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
<asp:Label ID="Label1" runat="server" Text="Please browse for a picture and then complete the following form."></asp:Label>
<asp:Label ID="Label2" runat="server" style="z-index: 100; left: 338px; position: absolute; top: 372px"></asp:Label>

<asp:DetailsView ID="DetailsView2" runat="server" AutoGenerateRows="False" DataKeyNames="Picture_ID"
DataSourceID="SqlDataSource3" DefaultMode="Insert" Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="Picture_ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="Picture_ID" />
<asp:BoundField DataField="Picture_Name" HeaderText="Name" SortExpression="Picture_Name" />
<asp:BoundField DataField="Picture_Description" HeaderText="Picture Description(optional)"
SortExpression="Picture_Description" />
<asp:BoundField DataField="Picture_Date" HeaderText="Date" SortExpression="Picture_Date(optional)" />
<asp:BoundField DataField="Picture_User" HeaderText="User" SortExpression="Picture_User" />
<asp:BoundField DataField="Picture_Path" HeaderText="Path" SortExpression="Picture_Path" NullDisplayText="FileUpload1.PostedFile.FileName"/>
<asp:CommandField ShowInsertButton="True"/>
</Fields>
</asp:DetailsView>

<asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False" DataKeyNames="Picture_ID"
DataSourceID="SqlDataSource5" EmptyDataText="There are no data records to display.">
<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="Picture_ID" HeaderText="Picture_ID" ReadOnly="True" SortExpression="Picture_ID" />
<asp:BoundField DataField="Picture_Name" HeaderText="Picture_Name" SortExpression="Picture_Name" />
<asp:BoundField DataField="Picture_Description" HeaderText="Picture_Description"
SortExpression="Picture_Description" />
<asp:BoundField DataField="Picture_Date" HeaderText="Picture_Date" SortExpression="Picture_Date" />
<asp:BoundField DataField="Picture_User" HeaderText="Picture_User" SortExpression="Picture_User" />
<asp:BoundField DataField="Picture_Path" HeaderText="Picture_Path" SortExpression="Picture_Path" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString3 %>"
DeleteCommand="DELETE FROM [Picture] WHERE [Picture_ID] = @dotnet.itags.org.Picture_ID" InsertCommand="INSERT INTO [Picture] ([Picture_Name], [Picture_Description], [Picture_Date], [Picture_User], [Picture_Path]) VALUES (@dotnet.itags.org.Picture_Name, @dotnet.itags.org.Picture_Description, @dotnet.itags.org.Picture_Date, @dotnet.itags.org.Picture_User, @dotnet.itags.org.Picture_Path)"
ProviderName="<%$ ConnectionStrings:CORE2062ConnectionString3.ProviderName %>"
SelectCommand="SELECT [Picture_ID], [Picture_Name], [Picture_Description], [Picture_Date], [Picture_User], [Picture_Path] FROM [Picture]"
UpdateCommand="UPDATE [Picture] SET [Picture_Name] = @dotnet.itags.org.Picture_Name, [Picture_Description] = @dotnet.itags.org.Picture_Description, [Picture_Date] = @dotnet.itags.org.Picture_Date, [Picture_User] = @dotnet.itags.org.Picture_User, [Picture_Path] = @dotnet.itags.org.Picture_Path WHERE [Picture_ID] = @dotnet.itags.org.Picture_ID">
<InsertParameters>
<asp:Parameter Name="Picture_Name" Type="String" />
<asp:Parameter Name="Picture_Description" Type="String" />
<asp:Parameter Name="Picture_Date" Type="DateTime" />
<asp:Parameter Name="Picture_User" Type="String" />
<asp:Parameter Name="Picture_Path" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Picture_Name" Type="String" />
<asp:Parameter Name="Picture_Description" Type="String" />
<asp:Parameter Name="Picture_Date" Type="DateTime" />
<asp:Parameter Name="Picture_User" Type="String" />
<asp:Parameter Name="Picture_Path" Type="String" />
<asp:Parameter Name="Picture_ID" Type="Int32" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="Picture_ID" Type="Int32" />
</DeleteParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString1 %>"
DeleteCommand="DELETE FROM [Picture] WHERE [Picture_ID] = @dotnet.itags.org.Picture_ID" InsertCommand="INSERT INTO [Picture] ([Picture_Name], [Picture_Description], [Picture_Date], [Picture_User], [Picture_Path]) VALUES (@dotnet.itags.org.Picture_Name, @dotnet.itags.org.Picture_Description, @dotnet.itags.org.Picture_Date, @dotnet.itags.org.Picture_User, @dotnet.itags.org.Picture_Path)"
ProviderName="<%$ ConnectionStrings:CORE2062ConnectionString1.ProviderName %>"
SelectCommand="SELECT [Picture_ID], [Picture_Name], [Picture_Description], [Picture_Date], [Picture_User], [Picture_Path] FROM [Picture]"
UpdateCommand="UPDATE [Picture] SET [Picture_Name] = @dotnet.itags.org.Picture_Name, [Picture_Description] = @dotnet.itags.org.Picture_Description, [Picture_Date] = @dotnet.itags.org.Picture_Date, [Picture_User] = @dotnet.itags.org.Picture_User, [Picture_Path] = @dotnet.itags.org.Picture_Path WHERE [Picture_ID] = @dotnet.itags.org.Picture_ID">
<InsertParameters>
<asp:Parameter Name="Picture_Name" Type="String" />
<asp:Parameter Name="Picture_Description" Type="String" />
<asp:Parameter Name="Picture_Date" Type="DateTime" />
<asp:Parameter Name="Picture_User" Type="String" />
<asp:Parameter Name="Picture_Path" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Picture_Name" Type="String" />
<asp:Parameter Name="Picture_Description" Type="String" />
<asp:Parameter Name="Picture_Date" Type="DateTime" />
<asp:Parameter Name="Picture_User" Type="String" />
<asp:Parameter Name="Picture_Path" Type="String" />
<asp:Parameter Name="Picture_ID" Type="Int32" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="Picture_ID" Type="Int32" />
</DeleteParameters>
</asp:SqlDataSource>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="Meeting Notes">
<ContentTemplate>

<asp:GridView ID="GridView4" runat="server" AutoGenerateColumns="False" DataKeyNames="Meeting_ID"
DataSourceID="SqlDataSource9" EmptyDataText="There are no data records to display." AllowSorting="True">
<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="Meeting_ID" HeaderText="Meeting_ID" ReadOnly="True" SortExpression="Meeting_ID" />
<asp:BoundField DataField="Meeting_Date" HeaderText="Meeting_Date" SortExpression="Meeting_Date" />
<asp:BoundField DataField="Meeting_Title" HeaderText="Meeting_Title" SortExpression="Meeting_Title" />
<asp:BoundField DataField="Meeting_Description" HeaderText="Meeting_Description"
SortExpression="Meeting_Description" />
<asp:BoundField DataField="Meeting_Topic1" HeaderText="Meeting_Topic1" SortExpression="Meeting_Topic1" />
<asp:BoundField DataField="Meeting_Notes1" HeaderText="Meeting_Notes1" SortExpression="Meeting_Notes1" />
<asp:BoundField DataField="Meeting_Topic2" HeaderText="Meeting_Topic2" SortExpression="Meeting_Topic2" />
<asp:BoundField DataField="Meeting_Notes2" HeaderText="Meeting_Notes2" SortExpression="Meeting_Notes2" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource9" runat="server" ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString1 %>"
DeleteCommand="DELETE FROM [Meeting] WHERE [Meeting_ID] = @dotnet.itags.org.Meeting_ID" InsertCommand="INSERT INTO [Meeting] ([Meeting_Date], [Meeting_Title], [Meeting_Description], [Meeting_Topic1], [Meeting_Notes1], [Meeting_Topic2], [Meeting_Notes2]) VALUES (@dotnet.itags.org.Meeting_Date, @dotnet.itags.org.Meeting_Title, @dotnet.itags.org.Meeting_Description, @dotnet.itags.org.Meeting_Topic1, @dotnet.itags.org.Meeting_Notes1, @dotnet.itags.org.Meeting_Topic2, @dotnet.itags.org.Meeting_Notes2)"
ProviderName="<%$ ConnectionStrings:CORE2062ConnectionString1.ProviderName %>"
SelectCommand="SELECT [Meeting_ID], [Meeting_Date], [Meeting_Title], [Meeting_Description], [Meeting_Topic1], [Meeting_Notes1], [Meeting_Topic2], [Meeting_Notes2] FROM [Meeting]"
UpdateCommand="UPDATE [Meeting] SET [Meeting_Date] = @dotnet.itags.org.Meeting_Date, [Meeting_Title] = @dotnet.itags.org.Meeting_Title, [Meeting_Description] = @dotnet.itags.org.Meeting_Description, [Meeting_Topic1] = @dotnet.itags.org.Meeting_Topic1, [Meeting_Notes1] = @dotnet.itags.org.Meeting_Notes1, [Meeting_Topic2] = @dotnet.itags.org.Meeting_Topic2, [Meeting_Notes2] = @dotnet.itags.org.Meeting_Notes2 WHERE [Meeting_ID] = @dotnet.itags.org.Meeting_ID">
<InsertParameters>
<asp:Parameter Name="Meeting_Date" Type="DateTime" />
<asp:Parameter Name="Meeting_Title" Type="String" />
<asp:Parameter Name="Meeting_Description" Type="String" />
<asp:Parameter Name="Meeting_Topic1" Type="String" />
<asp:Parameter Name="Meeting_Notes1" Type="String" />
<asp:Parameter Name="Meeting_Topic2" Type="String" />
<asp:Parameter Name="Meeting_Notes2" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Meeting_Date" Type="DateTime" />
<asp:Parameter Name="Meeting_Title" Type="String" />
<asp:Parameter Name="Meeting_Description" Type="String" />
<asp:Parameter Name="Meeting_Topic1" Type="String" />
<asp:Parameter Name="Meeting_Notes1" Type="String" />
<asp:Parameter Name="Meeting_Topic2" Type="String" />
<asp:Parameter Name="Meeting_Notes2" Type="String" />
<asp:Parameter Name="Meeting_ID" Type="Int32" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="Meeting_ID" Type="Int32" />
</DeleteParameters>
</asp:SqlDataSource>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<script language="vbscript" runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim filename = "upload/" & FileUpload1.PostedFile.FileName
If FileUpload1.HasFile Then
Try
FileUpload1.SaveAs(Server.MapPath("~/upload/") & _
FileUpload1.FileName)
Label1.Text = "File name: " & "upload/" & _
FileUpload1.PostedFile.FileName & "<br>" & _
"File Size: " & _
FileUpload1.PostedFile.ContentLength & " kb<br>" & _
"Content type: " & _
FileUpload1.PostedFile.ContentType
Catch ex As Exception
Label1.Text = "ERROR: " & ex.Message.ToString()
Label2.Text = filename
End Try
Else
Label1.Text = "You have not specified a file."
End If
End Sub
</script>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConflictDetection="CompareAllValues"
ConnectionString="<%$ ConnectionStrings:CORE2062ConnectionString1 %>" DeleteCommand="DELETE FROM [Events] WHERE [EventID] = @dotnet.itags.org.original_EventID AND [EventName] = @dotnet.itags.org.original_EventName AND [EventDate] = @dotnet.itags.org.original_EventDate"
InsertCommand="INSERT INTO [Events] ([EventName], [EventDate]) VALUES (@dotnet.itags.org.EventName, @dotnet.itags.org.EventDate)"
OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [Events]"
UpdateCommand="UPDATE [Events] SET [EventName] = @dotnet.itags.org.EventName, [EventDate] = @dotnet.itags.org.EventDate WHERE [EventID] = @dotnet.itags.org.original_EventID AND [EventName] = @dotnet.itags.org.original_EventName AND [EventDate] = @dotnet.itags.org.original_EventDate">
<DeleteParameters>
<asp:Parameter Name="original_EventID" Type="Int32" />
<asp:Parameter Name="original_EventName" Type="String" />
<asp:Parameter Name="original_EventDate" Type="DateTime" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="EventName" Type="String" />
<asp:Parameter Name="EventDate" Type="DateTime" />
<asp:Parameter Name="original_EventID" Type="Int32" />
<asp:Parameter Name="original_EventName" Type="String" />
<asp:Parameter Name="original_EventDate" Type="DateTime" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="EventName" Type="String" />
<asp:Parameter Name="EventDate" Type="DateTime" />
</InsertParameters>
</asp:SqlDataSource>
</asp:Content

Hi,

According to my understanding to your problem, it's ActiveTabIndex isn't maintained between postback.

You can refer to this thread talks about the same thing and try the workaround in it.

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

Monday, March 26, 2012

Tab Control - create tab on gridview selectindexchanged - code posted

I am using ajax tab control. I want to create a new tab everytime i click on the select of the gridview. Problem is it only allows me to create 1 tab. When I click on another select in the gridview - it doesn't allow to create another tab and gives me an error.

Is there another way to do this?

protectedvoid gv1_SelectedIndexChanged(object sender,EventArgs e)

{

UserControl ucR = (UserControl)LoadControl("../test.ascx");

ucR.ID = ((GridView)sender).SelectedDataKey.Value.ToString();

TabPanel tab =newTabPanel();

tab.Controls.Add(ucR);

tab.HeaderText = ((GridView)sender).SelectedDataKey.Value.ToString();

tcResults.Tabs.Add(tab);

}

After postback it loses the tabs - had to load in session and re-make the tabs in page_init


What error you are getting ?

Tab control .click() method problem

Hi there,

I have a problem with my tab control. due to the nature of the content of the third tab (a google map) i need to load that tab first (map doesn't centre properly if it is not the active tab - but that is a subject for another post...). However that is not the tab i want active when the page is renders it is actually the first tab with the summary info on that I want users to see first.

So a little bit of javascript the body OnLoad event fires off the tab panel header tab's .click() method. All fine and dandy in IE but FireFox and Opera don't want to play. I assume I am calling the method on the wrong control but it looked right from digging around in the .axd files. The offending line is below:

<

bodyonload="showFirstTab();">

<

scriptlanguage="javascript"type="text/javascript">function showFirstTab()

{

if (document.all("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab"))

{

document.getElementById(

"__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click();}

}

</script> Does anyone know the correct syntax, another way to achieve the same result or alternatively how to fix my Google map!

Also a good reference on the events (and order they fire) and methods would be really helpful.

Cheers,

Lucy

I believe the suspect line in your code that is causing problems is:

if (document.all("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab"))

Basically IE supports this, but FireFox (and some other common browsers don't). What you should do is something more like:

var ele=document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab");
if(ele)
ele.click();


Thanks for the reply. I had already discarded that line of code as bogus but even removing the if statement the .click() method does not work. The error returned is

the source line is:
document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click();

Error:
document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click is not a function

Any thoughts?

Cheers,
Lucy


Alright, here is what I figured out. Basically, I was able to get it working in the SampleWebSite. But to do it I created a button:

<

inputtype="button"onclick="DoIt();"/>

And then script:

<script>
function

DoIt() {
document.getElementById('__tab_ctl00_SampleContent_Tabs_Panel3').click();
}
</script>

This actually worked. But when I tried to do it onload, it failed. It seems you can't do that (maybe the controls aren't loaded?). I then and the onload call setTimeout(XXXX, 100) and had it call the click event in the 100ms timeout, this worked. So now I'm REALLY convinced it's a timing issue. Hope this gives you some traction.


Hi guys,

In the first post, Lucy sad about a problem with GMAP and TabPanel (map doesn't centre properly if it is not the active tab).

Are there any solution for this issue?

Thanks for helps!

Wilder Lopes
WebDeveloper
Rio de Janeiro/Brazil


Hi guys,I'm afraid the solution was lateral thinking! i.e. ditch the AJAX toolkit tab container and write my own. This is simply some HTML tags to control layout,image buttons (with javascript for mouse events - ignore the intellisense errors the page will compile fine) to do the post backs and a multiview to control the content shown. This works great - no problems with google maps now! Another bonus is that that pages load far faster now since only the data for the relevant tab is rendered on request as opposed to all of them. The down side is that there is a server request every time the user clicks on a tab as opposed to a quick javascrip show / hide on the browser. For me with data rich pages (especially that Google map!) this works out fine.Sorry no solution using the tab container itself.Cheers,Lucy
Sorry forgot to add link to see it in action:See www.ideasforthekids.co.uk for this in action. Do a search and the tabs are on the attraction page (tab graphics are being improved as we speak). http://www.ideasforthekids.co.uk/attraction.aspx?attID=7d21af2f-7c88-4e9a-82c7-85b6b5797d53

Tab Control Error

Friends,

I am using Tab Control(developed using ATLAS,downloaded from net) in my project, it working fine.But when the Session has expired, if I click any Links on the page, will redirect to Login Page. But while clicking the Tabs in the Tab Control, its throwing an Unknown Error through Alert box.

Any Help, Thanks in Advance.

Regards,

Vasanth

Is the Tab control visible depending on the session and user? Did you add this tab control in a usercontrol so you can post it here? I would like to test it. I use that control quite a lot without any problem.

Tab Control How to set Focus to panel

I have a datagrid on my tab control, on panel 3, When I click to put the datagrid in edit mode and the post back happens the tab control goes back to panel 1. How can I stop this or set it back to panel 3?

I tried: Did not work.

Sub NoteGrid_EditRow(ByVal SenderAs Object,ByVal eAs DataGridCommandEventArgs)
NoteGrid.EditItemIndex = e.Item.ItemIndex
BindDataNotes()
Me.TabPanel3.Focus()
End Sub

I got it,

Me.TabContainer1.ActiveTabIndex ="2"


Usethis.TabContainer.ActiveTabIndex instead ofthis.TabPanel.Focus()

Tab control question

Does anyone know how to force the user to "stay" in a tab if they try to click another tab? I'm doing validation but don't want them to be able to move to another tab until required fields are filled out.

Thanks,

Doug

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

This post might help. You can intercept the ActiveTabChanged event and decide whether you want to allow the tab to change or not.

Jason


Thanks for that link but I'm still unsure how to prevent the user from getting to another tab. I tried setting the "ActiveTabIndex" within that event and it still goes to the other tab.Tongue Tied

Does anyone have any sample code that would help me?

Thanks!

Doug


Hi Doug,

You may keep the previous selectedIndex in a variable, and assign it back to TabContainer if validation fails.

For instance:

int previousIndex = 0; // variable storing previously selected index
protected void Page_Load(object sender, EventArgs e)
{
previousIndex = TabContainer1.ActiveTabIndex;
}
protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e)
{
bool validationResult = true;
// compute validationResult
if(!validationResult) // if validation fails
TabContainer1.ActiveTabIndex = previousIndex;
}

Hope this helps.

Tab key works with CalendarExtender on sample site but not on production site

Hi,

I have some textboxes and calendarsextenders bound to them. When I click on 1st textbox, calendar pops up. It hides two other boxes beneath it. After I select date i need to go other text boxes. I tried with tab key but it does not switch to other control, and calendar remains open. I have to click on empty area of page to close calendar.

However, on test site provided with toolkit tab key works ok. Does anyone have idea what might be wrong?

Please reply with acomplete, simple, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

Tab Order (TabIndex)

Has anyone else noticed that in the PopupControlExtender example, if you use the mouse to click on a date, then press Tab thinking you're going to the next control in the TabIndex order, than in fact you start back at the top of the TabIndex order.

For example, I have a table with several TexBox controls on it. Half way across the table's columns, I have a date field that is hooked up to a popup calendar. If I type the date in, and Tab - I go to the next field as expected. If, however, I use the mouse to click on a date on the calendar popup - then press Tab, I'm taken to the start of the table's fields again.

Is there any way to have better control over the TabIndex order here?

Is the situation any better with the 60504 release of the PopupControl? I know Ted made some tabbing changes there so it was possible to tab into the popup...

You can now tab into a textbox and the control will pop up. When you tab out of the textbox, the popup control will not go away, unless you click with your mouse somewhere outside of the textbox/popup control. It would be useful if you could tab in and have the popup control appear, and tab out and have it disappear.


This stems from the inability to find out where focus has gone to in the browser. We can be notified of the lost focus (onblur) on the textbox, but there's no way of knowing where it's gone to. It could be another control on the page, it could be the popup itself, there's no way to tell. Unfortunately the focus management facilities of the DOM are a little lacking.

So that complicated doing this in a clean way. We talked about catching the onkeydown and looking specifically for tab on the textbox but it seemed hacky. If enough people complain, maybe we'll revisit it.


Hey sburke,

I realize this post is old, but I'm just wondering if enough people complained :P

I did use your onkeydown hack to fix the buggyness in the popupcontrolextender SampleWebSite that comes with the control toolkit. However, I also needed to create an onfocus event for the textboxes b/c after setting a Panels display=none when tabbing out, if I shift-tabbed back into the field the popup wouldn't show. This leaves the popupcontrolextender actually doing little more than setting some positional attributes, which I could easily add to my javascript function.

This may have been addressed elsewhere, but are there any new plans on "fixing" this? Or perhaps someone has come up with a better workaround than the onkeydown method... ??

Thanks.

--c--


sorry, make that [visibility=hidden], not [display=none]

Saturday, March 24, 2012

Tab Panel - How do I move to a different panel programatically

I have a page with a tab container and two tab panelsOn the first tab panel is a gridview contained within an update panelI want to be able to click on a link in the gridview and have the page display the second tab.Whilst the gridview's selectedindexchanged event is firing the line:tabsXMatchResultPage.ActiveTab = tabXmatchResult;doesn't do anything.I can move between the tabs by clicking on them but I need to be able to move to the second panel from a click in the gridview.I have tried this with the update panel's UpdateMode set to "Always" and "Conditional" and that made no difference.(On other pages I have used the tabContainer.ActiveTab=requiredtabpanel statement in the page load event to display a particular tab at that point and that has worked fine) Thoughts on this would be much appreciatedThanksNeil

Bumping this message up the list as this is becoming a real pain and I need to know why the line

tabsXMatchResultPage.ActiveTab = tabXmatchResult;

isn't resulting in the activetab becoming the one requested.

The gridview's selectedindexchanged event is definitely being fired but the code to change the Active Tab doesn't do what it should.



I've now gone back to basics and created a new Ajax enabled web site.

The aspx page is:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!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>Changing Tabs</title>
</head>
<body>
<form id="frmAccessAccordion" runat="server"
<script type="text/javascript" language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= MyTabs.ClientID %>', sender.get_activeTab().get_headerText());
}
</script
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></asp:ScriptManager>
<ajaxToolKit:TabContainer ID="MyTabs" runat="server" OnClientActiveTabChanged="ActiveTabChanged"
OnActiveTabChanged="ActiveTabChangedServer">
<ajaxToolKit:TabPanel runat="server" ID="tabOne" HeaderText="One">
<ContentTemplate>
Tab One
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel runat="server" ID="tabTwo" HeaderText="Two">
<ContentTemplate>
Tab Two
<asp:Button runat="server" ID="btnServer" Text="Submit" OnClick="changeTab" />
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel runat="server" ID="tabThree" HeaderText="Three">
<ContentTemplate>
Tab Three
</ContentTemplate>
</ajaxToolKit:TabPanel>
</ajaxToolKit:TabContainer>
</form>
</body>
</html>
 
The Code Behind file is: 
 using System;
using System.Data;
using System.Configuration;
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 partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(MyTabs);
}

protected void changeTab(object sender, EventArgs e)
{
MyTabs.ActiveTab = tabThree;
}

protected void ActiveTabChangedServer(object sender, EventArgs e)
{
if (MyTabs.ActiveTab == tabOne)
{

}

if (MyTabs.ActiveTab == tabTwo)
{

}

if (MyTabs.ActiveTab == tabThree)
{

}

}

}

 
From everything I have read the clicking of the button on tab two should result in the display of tab three... but it doesn't.
Can anyone else get this working successfully? 
 

Tab panel is not working properly in Firefox 1.5.0.10

Tab panel is not working properly in Firefox 1.5.0.10. When ever i click on the tab , the tab panel is getting disappeared.

If I refresh the page, then the tab panel is displayed with default tab container being selected.

It works properly in 1.5.0.12.

Does any one has faced this problem ?

Hi,

According to your description, it seems this may be a issue the that version of Firefox. Although I'm not 100% sure.

If that's the case, it's hard to expect everything runs fine with it. And it would be recommended to update if an older version has a issue.

Tab Problem

Iam listing some records in a datalist inside a tab control...when the page load all tab options working perfectly.when i click first tab "client records " listed and when iam click second tab "product records" listed...my problem is...i have placed a dropdown in first tab for search option .this dropdown is set "autopostback" =true.during page load all tab easily work..but when i selected dropdown for searching, the tab controls "borken"..how can i solve that problem.please help me.....

by anish

Hi Anish,

I don't quite understand what do you mean by "broken" ? Can you elaborate it?

It will be better if you can provide a simple repro that uses NorthWind database.

TabContainer & TabPanel bug?

On click of a tab, I validate the current tab. If the validation fails, is there a way to keep the current tab selected? I've tried using theActiveTabChangedfunction, but it never goes into the code.

Does anyone know how to select a tab with javascript?

One other thing, when you wrap a TabContainer in an UpdatePanel you get javascript error mesasge when use ajax call within the tab, so this seems to be an issue.

Hi,

Please try this to select a tab
function change() {
??????$find('TabContainer1').set_activeTabIndex(1);
}

Can you show me a small demo about?the?second question ?

TabContainer - UpdatePanel Trigger

Hi,

I have a TabContainer with two TabPanel's. In one TabPanel is a Button with a Click Event. My UpdatePanel is out of the TabContainer and has a Trigger with Event of the Button (inside my TabPanel)...But it doesn't work... Can't find the Button...

 <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel ID="TabPanel1" runat="server"> <HeaderTemplate>Tab Eins</HeaderTemplate> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate>Tab Zwei</HeaderTemplate> <ContentTemplate> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server" Text="Hallo!"/> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel>
 Why I can't use the Event of the Button inside the TabPanel? 

Hi,

I try to find out solution, but what i find in tabcontainer the name of control get changed thats why at the time of rendering it is not find by updatepanel

I found a workaround for time being

<Triggers>
<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$Button1" EventName="Click" />
</Triggers>

I will try to get the correct solution if possible.


Hi,

OK, the same solution I found at the moment... But now I have a TreeView in the TabPanel and the Event is SelectedNodeChanged and when I try this:

<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$TreeView1" EventName="TreeView1_SelectedNodeChanged" />

It doesn't work...

Any Idea

Edit: Here we go:

<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel2$TreeView1" EventName="SelectedNodeChanged" />

works fine!


Hi,

Please use the following code snippet to register it:

ScriptManager1.RegisterAsyncPostBackControl(TabPanel1.FindControl("Button1"));

Hi,

I also have this problem,I have added trigger as you write but control out TabPanel not only loaded when click button but also loaded when I click any control in TabPanel.


Can you create a simple example about this?


Oh,it's my mistake.Your code is right.Stick out tongue

TabContainer and ActiveTabChanged

Hi,

i have a problem with TabContainer.

The ActiveTabChanged server-side event doesn't fire when i click on tab.

Is this a bug?

Can anyone help me?

Thanks everbody!

I believe the server-side event will only fire when a postback occurs. Tabs doesn't use postbacks when simply switching between tabs. Maybe you'd like to use OnClientActiveTabChanged instead?

Sad

I ask this because I have this problem: I must load many data from database for each tab of tabcontainer.

So, I don't want to load all data from database only one time, but only if a user clicks on a tab.

I think there is no solution with this event (ActiveTabChanged).

Can you have some ideas to solve my problem with TabContainer?


Maybe with Webservice and pagemethods?
Can you please elaborate a bit on webservice and pagemethod. I have the same problem and need to finda solution asap.
Can you please elaborate a bit on webservice and pagemethod. I have the same problem and need to find a solution asap.

Here is what start working for me (sure it is a temp solution but still...) Sorry for detailed instructions, but I believe in "documenting" everything to make a life easy.Big Smile

1. Change javascript function to add a custom postback:

 function ActiveTabChanged(sender, e) { var CurrentTab = $get('<%=CurrentTab.ClientID%>'); CurrentTab.innerHTML = sender.get_activeTab().get_headerText(); //add a custom postback __doPostBack('Tabs', sender.get_activeTab().get_headerText()); Highlight(CurrentTab); }

2. In TabContainer add a method:

 <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="450px" OnClientActiveTabChanged="ActiveTabChanged"OnActiveTabChanged="ActiveTabChangedServer" >

3. Inside of TabPanels add an UpdatePanel wrapper and dont forget about trigger!

 <asp:UpdatePanel ID="upTab_List" runat="server" UpdateMode="Conditional"> <ContentTemplate> Datagrid, dynamic content etc </ContentTemplate> <Triggers><asp:AsyncPostBackTrigger ControlID="Tabs" EventName="ActiveTabChanged" /> </Triggers> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgressTabs" AssociatedUpdatePanelID="upTab_List" runat="server"> <ProgressTemplate> Refreshing Tabs...<img alt="" src="Images/loader.gif" /> </ProgressTemplate> </asp:UpdateProgress>
4. Register script in :
Protected Sub Page_Load ........ ScriptManager1.RegisterAsyncPostBackControl(Tabs)

5. Finally add the method you want:

 Public Sub ActiveTabChangedServer(ByVal sender As Object, ByVal e As System.EventArgs) lblTotalCount.Text = "Captured!!!!" End Sub

Outstanding! How about the use of a master page?

<script type="text/javascript"> function ActiveTabChanged(sender, e) { __doPostBack('TabsPublications', sender.get_activeTab().get_headerText()); }</script>

Then inside my content panel I have:

ajaxToolkit:TabContainer runat="server" ID="TabsPublications"OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="ActiveTabChangedServer"ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="All Publications"ContentTemplateasp:UpdatePanel ID="UpdatePanel1" runat="server"ContentTemplateasp:UpdatePanel ID="upTab_List" runat="server" UpdateMode="Conditional"ContentTemplateasp:GridView runat="server" ID="PubsGridView" AutoGenerateColumns="False" ShowHeader="False" CellSpacing="5" GridLines="None"Columnsasp:TemplateField ItemTemplateasp:HyperLink ID="HyperLink1" NavigateUrl='%# Bind("articleUrl") %' runat="server"asp:Label ID="Label1" runat="server" Text='%# Bind("articleName") %'/asp:Label/asp:HyperLinkasp:Label ID="Label2" runat="server" Text='%# Bind("Abstract") %'/asp:Label/ItemTemplate/asp:TemplateField/Columns/asp:GridViewasp:Label ID="lblTotalCount" runat="server" Text="Orig Load"/asp:Label/ContentTemplateTriggersasp:AsyncPostBackTrigger ControlID="TabsPublications" EventName="ActiveTabChanged" //Triggers/asp:UpdatePanel/ContentTemplate/asp:UpdatePanel/ContentTemplate/ajaxToolkit:TabPanelajaxToolkit:TabPanel runat="Server" ID="Panel3" HeaderText="Tab2" ContentTemplateDo Something.../ContentTemplate/ajaxToolkit:TabPanel/ajaxToolkit:TabContainer
Clicking a tab does a complete postback and does not save the tab state nor does it seem to executeActiveTabChangedServer.


I think you need this instead, to get the right client-side control ID:

__doPostBack('<%= TabsPublications.ClientID %>', sender.get_activeTab().get_headerText());


Dead on, however I now notice that if I have a datagrid that performs a postback it now longer works. Ideas?

yeap, worked for me with a CLIENT ID too. Excellent! Thanks for help.

You may avoid postbacks by adding javascript and modifying your Hyperlink to simple link. (just an idea ...)

/asp:GridView runat="server" ID="PubsGridView" AutoGenerateColumns="False" ShowHeader="False" CellSpacing="5" GridLines="None"
Columns
asp:TemplateField
ItemTemplate
asp:HyperLink ID="HyperLink1" NavigateUrl='%# Bind("articleUrl") %' runat="server"asp:Label ID="Label1" runat="server" Text='%# Bind("articleName") %'/asp:Label/asp:HyperLink
asp:Label ID="Label2" runat="server" Text='%# Bind("Abstract") %'/asp:Label
/ItemTemplate
/asp:TemplateField
/Columns
/asp:GridView


Anyone got this to work when the scriptmanager is on the master page?

Yeah, and how do you guys get javascript working?


I have been trying to figure out how to do postback from Tab Container and this thead have helped me out to resolve this. Thanks guys!!!!!!!!!


Hello, I want to do the same thing, be able to load data from server eachtime I click on a Tab.

I read this forum and try the code provided, and also the code from thispage : http://willys-web.blogspot.com/2007/02/aspnet-ajax-control-toolkit-tab-control.html

The code from willy-web does work when I run it separatly in a new web site,from Visual Studio 2005. Try it, it works. When I put a break point in the codeinside the function ''DoServerSideValidation", I have a break when I clickon the second tab.

Perfect, I said, just have to fit it in my code. But even by copying the codeI can not run my freaking ''DoServerSideValidation" function !

I know it is possible, take a lookhereandhere . But I'd like to do it myself...

Lets have a look to the javascript function :

functionActiveTabChanged(sender, e)
{
alert('Hi !');
__doPostBack('<%= tabs1.ClientID %>', sender.get_activeTab().get_headerText());
}

This code is called, as I see a winpopup "Hi !" displayedwhen I click on one of my tabs...

Here is my TabContainer properties :

<cc1:TabContainerrunat="server"ID="tabs1"
OnClientActiveTabChanged="ActiveTabChanged"
OnActiveTabChanged="DoServerSideValidation">

DoServerSideValidation is never triggered. If someone can help me tounderstand where is the link between " __doPostBack('<%= tabs1.ClientID%>', sender.get_activeTab().get_headerText()); "

and my function DoServerSideValidation...

And why the code from willy-web doesn't not work inside my web project. Isit because I use a control ascx ? so in the page load I do this ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(tabs1);

You know what is funny ? The code I search is used when you are editing apost, here in this forum. (Tabs "Compose", "Options","Related", "Preview").

Ok, if someone have an idea of how this TabContainer works ... It would beappraciated...

Thanks for your help.

Wednesday, March 21, 2012

TabContainer doesnt maintain active tab after click on TreeView node

Hello,

I've got a small probleme with TabContainer and a treeview. When I click on a TreeView node, the TabContainer doesn't maintain its active tab after postback.

Here is a test page. To reproduce the problem, select the second tab, then click on any of the node inside the Tree.

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %><!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"> </head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager> <asp:TreeView ID="treeview" runat="server"> <Nodes> <asp:TreeNode Text="root" Value="root"> <asp:TreeNode Text="item1" Value="item1"></asp:TreeNode> <asp:TreeNode Text="item2" Value="item2"></asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> <ajaxToolkit:TabContainer ID="container" runat="server"> <ajaxToolkit:TabPanel HeaderText="tab 1" runat="server" ID="tab1"></ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel HeaderText="tab 2" runat="server" ID="tab2"></ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </div> </form></body></html>

It doesn't work with LinkButton postbacks, too, and probably with everything that uses __doPostBack() calls...