I'm having a problem with Tab Panels jumping around that I need a little help with. I have 4 Tab Panels in which each Tab Panel contains a DataGrid Control with paging and 1 Tab Panel with a FormView Control also with paging enabled. Here is what happens, when I first enter the web page if I'm on say Tab Panel 2 which contains a DataGrid with paging enabled and then click Tab Panel 1 which also contains a DataGrid with paging enabled and click 2 to go to the next page of data in the DataGrid it jumps back over to Tab Panel 2 which is the first Tab I started out on when the page displayed.
I'm not sure why or how to correct this issue of the DataGrid/FormView paging causing the Tab Panels to jump instead of staying on that Tab Panel as I page through the data until I actually click on a different Tab Panel.
ASP.NET AJAX Control Toolkit - Tab Control - Postback on tab switch
Thanks, that works fine.
Hi Lspence,
I want to design a Tab control with 5 tabs based on userId.. and each tab will be populated with a datagrid... based on the UserId clicked.. so do i need to have different Datagrids for each tab.. or can i just have one datagrid in the first tab and then call the same Datagrid based on the UserId given..
any help will be appreciated on this,,
Regards
Karen
I maybe wrong, but I think you can use a single DataGrid and just change your DataSource to a different one on each Tab. I have not tried doing something as you are doing, so someone else might be able to chime in on this approach.
Lspence,
in your post u have mentioned
"I have 4 Tab Panels in which each Tab Panel contains a DataGrid Control with paging and 1 Tab Panel with a FormView Control also with paging enabled. Here is what happens, when I first enter the web page if I'm on say Tab Panel 2 which contains a DataGrid with paging enabled and then click Tab Panel 1 which also contains a DataGrid with paging enabled and click 2 to go to the next page of data in the DataGrid it jumps back over to Tab Panel 2 which is the first Tab I started out on when the page displayed."
did u use a seperate datagrid for your panels...and how did u handle it... pls give me ideas.
Regards
Karen
Sorry, yes you are correct in my previous post. I have a different DataGrid for each Tab Panel except for the last one which uses a FormView. I basically followed information provided by the previous poster. I used the following javascript.
<script type="text/javascript" language="javascript">
function ActiveTabChanged(sender, e)
{
// Use the client side active tab changed event to trigger a callback thereby triggering the server side event.
__doPostBack('<%= TabContainer1.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
I then put my entire TabContainer inside of an UpdatePanel and added the following to the TabContainer tag.<cc1:TabContainer ID="TabContainer1" runat="server" TabIndex="0" ActiveTabIndex="3" OnClientActiveTabChanged="ActiveTabChanged" >I finally added the following in the Page_Load method.ScriptManager.RegisterAsyncPostBackControl(TabContainer1);That's all.
Thanks for your answer... can u please give some code of your..tab panel.. cause i am creating a datagrid inside the panel in the .aspx page and then i am hooking the datasource and everything else at the code behind.. so just wanted to check if whatever i am doing is right or not...
Is it also possible to have get header text automatically populated based on the userId's for the particular client..
any help will be appreciated.
Regards
Karen
No problem this example sets the DataGrid's DataSource in Design Mode.
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="true" %
<%@. 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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /
<script type="text/javascript" language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= SampleTabContainer.ClientID %>', sender.get_activeTab().get_headerText());
}
</script
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:TabContainer ID="SampleTabContainer" runat="server" ActiveTabIndex="1" TabIndex="0" OnClientActiveTabChanged="ActiveTabChanged">
<cc1:TabPanel ID="Panel1" runat="server" HeaderText="Panel1" >
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" InsertVisible="False" ReadOnly="True" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
<asp:BoundField DataField="ZipCode" HeaderText="Zip Code" SortExpression="ZipCode" />
</Columns>
<PagerSettings Mode="NextPrevious" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=TestDB;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Customer]">
</asp:SqlDataSource>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="Panel2" runat="server" HeaderText="Panel2">
<ContentTemplate>
Different content. Could be another DataGrid.
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SampleTabContainer" EventName="ActiveTabChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(SampleTabContainer);
}
Spence,
Thanks for the code.. I am dynamically adding the Tab Panels using my code behind...
i have a datagrid in a user control which has pagin and sorting enabled and the data loads fine.. I am calling this UserControl in a tab panel using Ajax.. But when I Try to sort and page in my tab Panel...i get an error saying
specified argument was out of the range of valid values. Parameter name: Value
Hope u can help me solve it.. I am dynamically generating the Tabpanel and passing the valid values to load the user control.. but when i try to page and sort i get a popup with the above error..
Any help will be appreicated.
Regards
Karen
No comments:
Post a Comment