Hi all, I have a problem with the Ajax Accordion. Basiclly I use the Accordion to create to pane where the top pane is a submit form, and the bottom pane contains a grid view to view the results of the submitted data from an Access database.
Here is the front-end code:
1 <form id="form1" runat="server">2 <asp:ScriptManager ID="ScriptManager1" runat="server" />3 <div>4 <asp:UpdatePanel ID="UpdatePanel" runat="server">5 <ContentTemplate>6 <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"7 HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"8 FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250"9 AutoSize="None" RequireOpenedPane="true" SuppressHeaderPostbacks="true">10 <Panes>11 <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">12 <Header><a href="http://links.10026.com/?link=" class="accordionLink">Insert New Task</a></Header>13 <Content>14 <asp:Label runat="server" ID="lblName" Text="Name"></asp:Label>15 <asp:TextBox runat="server" ID="txtName"></asp:TextBox>16 <asp:Button runat="server" ID="btnSubmit" Text="Submit!" OnClick="OnSubmit"/>17 </Content>18 </ajaxToolkit:AccordionPane>19 <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">20 <Header><a href="http://links.10026.com/?link=" class="accordionLink">Display Task</a></Header>21 <Content>2223 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true">24 <EmptyDataTemplate>25 <asp:Label runat="server" ID="lblBlank" Text="No Data!"></asp:Label>26 </EmptyDataTemplate>27 </asp:GridView>2829 </Content>30 </ajaxToolkit:AccordionPane>31 </Panes>32 </ajaxToolkit:Accordion>33 </ContentTemplate>34 </asp:UpdatePanel>35 </div>36 </form>
Here is my code-behind:
1public partialclass _Default : System.Web.UI.Page2{34protected void Page_Load(object sender, EventArgs e)5 {6if (!Page.IsPostBack)7 BindGrid();89 }1011protected void OnSubmit(object sender, EventArgs e)12 {13 TextBox ctrl = (TextBox)this.FindControl("UpdatePanel").FindControl("MyAccordion").FindControl("AccordionPane1").FindControl("txtName");14//TextBox ctrl = (TextBox)this.FindControl("UpdatePanel").FindControl("txtName");15string connectionString ="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";16string dataBase = @dotnet.itags.org."C:\Projects\Intnet Inc\ASP.NET\Experiment\App_Data\Enterprise.mdb";17using (OleDbConnection conn =new OleDbConnection(connectionString + dataBase))18 {1920string sqltext ="INSERT INTO NameTable(Name) VALUES(?)";21 OleDbCommand cmd =new OleDbCommand(sqltext, conn);22 cmd.Parameters.Add("@dotnet.itags.org.Name", OleDbType.VarChar, 255).Value = ctrl.Text;2324 conn.Open();25 cmd.ExecuteNonQuery();26 conn.Close();2728 BindGrid();29 }30 }3132protected void BindGrid()33 {34 GridView ctrl = (GridView)this.FindControl("UpdatePanel").FindControl("MyAccordion").FindControl("AccordionPane2").FindControl("GridView1");35//GridView ctrl = (GridView)this.FindControl("UpdatePanel").FindControl("GridView1");36string connectionString ="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";37string dataBase = @dotnet.itags.org."C:\Projects\Intnet Inc\ASP.NET\Experiment\App_Data\Enterprise.mdb";38using (OleDbConnection conn =new OleDbConnection(connectionString + dataBase))39 {40 DataSet ds =new DataSet();4142string sqltext ="SELECT * FROM NameTable";43 OleDbCommand cmd =new OleDbCommand(sqltext, conn);44 OleDbDataAdapter adapter =new OleDbDataAdapter(sqltext, conn);4546 adapter.Fill(ds,"Name");4748if (ctrl !=null)49 {50 ctrl.DataSource = ds.Tables["Name"].DefaultView;51 ctrl.DataBind();52 }53 }54 }55}
The problem is that when i submit my data to the database, the OnSubmit event handler is never excuted after the postback. When I click it again, then the OnSubmit event handler occurs during post back. However, the problem disappear when i remove line 6 and 7 from code behind. But I need it to load the data to be display for the first time. Pretty much when i run this app, when i click the submit button, the value inside the textbox will disappear... it seems it never got the data from the LoadPostBack phase of the life cycle, and also when i set up break point, the OnSubmit was never run. So I don't get it why I have to click 2nd time before OnSubmit actually work?
Hi,
The cause is that the clientID of the btnSubmit is different between the initial reuqest(ctl06_) and the subsequent partial request(ctl04_) .
So that the event handler can't be attached to it correctly.
I'm trying to find a workaround, or please share with us if you have got any.
Hi,jyu111
The Complete solution to your scenario is posted here..
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<%@. 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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None" RequireOpenedPane="true" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<a href="http://links.10026.com/?link=" class="accordionLink">Insert New Task</a></Header>
<Content>
<asp:Label runat="server" ID="lblName" Text="Name"></asp:Label>
<asp:TextBox runat="server" ID="txtName"></asp:TextBox>
<asp:Button runat="server" ID="btnSubmit" Text="Submit!" />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<a href="http://links.10026.com/?link=" class="accordionLink">Display Task</a></Header>
<Content>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true">
<EmptyDataTemplate>
<asp:Label runat="server" ID="lblBlank" Text="No Data!"></asp:Label>
</EmptyDataTemplate>
</asp:GridView>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Data.OleDb;
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 Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Button btn = (Button)this.FindControl("UpdatePanel").FindControl("MyAccordion").FindControl("AccordionPane1").FindControl("btnSubmit");
btn.Click += new EventHandler(OnSubmit);
if (!Page.IsPostBack)
{
BindGrid();
}
}protected void OnSubmit(object sender, EventArgs e)
{
TextBox ctrl = (TextBox)this.FindControl("UpdatePanel").FindControl("MyAccordion").FindControl("AccordionPane1").FindControl("txtName");
string connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";
string dataBase = @."C:\Projects\Intnet Inc\ASP.NET\Experiment\App_Data\Enterprise.mdb";
using (OleDbConnection conn = new OleDbConnection(connectionString + dataBase))
{string sqltext = "INSERT INTO NameTable(Name) VALUES(?)";
OleDbCommand cmd = new OleDbCommand(sqltext, conn);
cmd.Parameters.Add("@.Name", OleDbType.VarChar, 255).Value = ctrl.Text;conn.Open();
cmd.ExecuteNonQuery();
conn.Close();BindGrid();
ctrl.Text = "";
}
}protected void BindGrid()
{
GridView ctrl = (GridView)this.FindControl("UpdatePanel").FindControl("MyAccordion").FindControl("AccordionPane2").FindControl("GridView1");
string connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";
string dataBase = @."C:\Projects\Intnet Inc\ASP.NET\Experiment\App_Data\Enterprise.mdb";
using (OleDbConnection conn = new OleDbConnection(connectionString + dataBase))
{
DataSet ds = new DataSet();string sqltext = "SELECT * FROM NameTable";
OleDbCommand cmd = new OleDbCommand(sqltext, conn);
OleDbDataAdapter adapter = new OleDbDataAdapter(sqltext, conn);adapter.Fill(ds, "Name");
if (ctrl != null)
{
ctrl.DataSource = ds.Tables["Name"].DefaultView;
ctrl.DataBind();
}
}
}
}
If this help you,don't forget mark it as a answer.Thanks!
Let me know if you need more info.
Hi,
I think my issue is pretty closely related to jyu111's problem but I'm not sure how to work the above solution into my specific situation.
I recently implemented an accordion in to my page to accomplish essentially what jyu111 was trying to do. I have a DetailsView control on my top pane for inserts and the bottom pane has a GridView. My setup is also different in that my accordion is inside one of four tab containers as well.
What's happening is, whenany link is clicked on either accordion pane (insert or cancel in the detailsview, or a column header for sorting or edit link in the gridview), the pane goes blank (the detailsview and gridview disappear). The only way I can bring them back is to either click on the tab header again, or refresh the whole page.
Here is the relevant code:
ASPX:
<form id="frmPersonnelAdmin" runat="Server" style="font-family: Verdana; font-size: 10px;"><div style="background-color: #FFFFBB; height: 800px; padding: 5px;"><asp:ScriptManager ID="ScriptManager1" runat="Server" /><div><ajaxToolkit:TabContainer ID="tabContPersonnelAdmin" runat="Server" CssClass="active_tab inactive_tab hover_tab"><ajaxToolkit:TabPanel ID="tabPayrollCompany" runat="Server" HeaderText="Payroll Company"><ContentTemplate><asp:UpdatePanel runat="server"><ContentTemplate><ajaxToolkit:Accordion ID="PersTypeAccordion" runat="server" SelectedIndex="1" RequireOpenedPane="True"SuppressHeaderPostbacks="False" FadeTransitions="True" HeaderCssClass="accordionHeader"ContentCssClass="accordionContent"><Panes><ajaxToolkit:AccordionPane runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"><Header><asp:Label ID="lblInsertPersonnelTypeDetailsView" runat="Server" Text="Insert a new personnel type."Font-Bold="True" Height="30px"></asp:Label></Header><Content><asp:DetailsView ID="dvPersonnelTypeInsert" runat="server" AutoGenerateRows="False"InsertRowStyle-Font-Size="10px" DataKeyNames="PersonnelTypeID" DefaultMode="Insert"DataSourceID="SqlDataSourceDvInsertPersonnelType" BorderWidth="0px" BorderStyle="None"><Fields><asp:BoundField DataField="Description" HeaderText="Description" ControlStyle-Font-Size="10px" /><asp:TemplateField HeaderText="Personnel Category"><InsertItemTemplate><asp:DropDownList ID="ddlInsertPersCat" runat="Server" DataValueField="PersonnelCategoryID"DataTextField="ShortName" DataSourceID="SqlDataSourcePersonnelCategory" Font-Size="10px"SelectedValue='<%# Bind("PersonnelCategoryID")%>'></asp:DropDownList></InsertItemTemplate><HeaderStyle Width="140px" /></asp:TemplateField><asp:BoundField DataField="Markup" HeaderText="Markup" ControlStyle-Font-Size="10px" /><asp:CommandField ShowInsertButton="True" /></Fields></asp:DetailsView><br /></Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPane runat="server"><Header><asp:Label ID="lblPersonnelType" runat="Server" Text="List of personnel types." Font-Bold="True"Height="30px"></asp:Label></Header><Content><asp:GridView ID="gvPersonnelType" runat="server" AllowPaging="True" PageSize="20"AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="PersonnelTypeID"DataSourceID="SqlDataSourcePersonnelTypeGv" BorderWidth="0px" BorderStyle="None"RowStyle-Height="30px" RowStyle-BackColor="whitesmoke" AlternatingRowStyle-BackColor="#FFFFBB"PagerStyle-HorizontalAlign="Center" PagerStyle-BackColor="#CCCC99" HeaderStyle-BackColor="#CCCC99"><Columns><asp:CommandField ShowDeleteButton="True" ShowEditButton="True"><ControlStyle Width="50px" /></asp:CommandField><asp:TemplateField HeaderText="Labor Force Type" HeaderStyle-HorizontalAlign="center"HeaderStyle-Width="110px" SortExpression="LaborForceTypeID"><ItemTemplate><asp:Label ID="Label2" runat="server" Text='<%# Bind("LaborForceType")%>'></asp:Label></ItemTemplate><EditItemTemplate><asp:DropDownList ID="ddlEditLaborForceType" runat="server" DataValueField="LaborForceTypeID"DataTextField="DisplayName" DataSourceID="SqlDataSourceLaborForceType" Font-Size="10px"SelectedValue='<%# Bind("LaborForceTypeID")%>'></asp:DropDownList></EditItemTemplate><HeaderStyle Width="80px" /></asp:TemplateField><asp:BoundField DataField="Rebill" HeaderText="Rebill" SortExpression="Rebill" DataFormatString="{0:c}"HtmlEncode="False"><ControlStyle Font-Size="10px" Width="50px" /><HeaderStyle HorizontalAlign="Center" Width="60px" /></asp:BoundField><asp:BoundField DataField="Markup" HeaderText="Markup" SortExpression="Markup"><ControlStyle Font-Size="10px" Width="50px" /><HeaderStyle HorizontalAlign="Center" Width="60px" /></asp:BoundField></Columns><RowStyle BackColor="WhiteSmoke" Height="20px" /><PagerStyle BackColor="#CCCC99" HorizontalAlign="Center" /><HeaderStyle BackColor="#CCCC99" /><AlternatingRowStyle BackColor="#FFFFBB" /></asp:GridView><br /><br /><%-- --%></Content></ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion></ContentTemplate></asp:UpdatePanel></ContentTemplate></ajaxToolkit:TabPanel><ajaxToolkit:TabPanel ID="tabPersonnelCategory" runat="Server" HeaderText="Personnel Categories"><ContentTemplate>Anothertab</ContentTemplate></ajaxToolkit:TabPanel><ajaxToolkit:TabPanel ID="tabPersonnel" runat="Server" HeaderText="Personnel"><ContentTemplate><asp:UpdatePanel ID="updPnlPersonnel" runat="Server"><ContentTemplate>Another tab</ContentTemplate></asp:UpdatePanel></ContentTemplate></ajaxToolkit:TabPanel></ajaxToolkit:TabContainer></div></div></form>And a couple of code-behind lines that are relevant to the controls in the accordion/tab in question:
Protected Sub dvPersonnelTypeInsert_ItemInserted(ByVal senderAs Object,ByVal eAs System.Web.UI.WebControls.DetailsViewInsertedEventArgs)Handles dvPersonnelTypeInsert.ItemInserted'Commit detailsview insertgvPersonnelType.DataBind()End SubProtected Sub tabContPersonnelAdmin_ActiveTabChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles tabContPersonnelAdmin.ActiveTabChangedgvPersonnelType.EditIndex = -1End Sub
It should be noted that the detailsview and gridview do successfully execute thier inserts and edits/deletes, respectively.
While I'm at it, I'm wondering if someone could tell me how to change the header background color and font attributes for the accordion control.
Thanks!
This is the exact problem I am having, only my link buttons are in a repeater, this solution doesn't seem to work with or without the repeater, has anyone found a workaround for this?
Here's my code:
Repeater rptPhotos = (Repeater)accMorningShow.Panes[3].FindControl("rptPhotos");foreach (RepeaterItem itmin rptPhotos.Items){
LinkButton btn = (LinkButton)itm.FindControl("lnbChangeCategory");
btn.Command +=newCommandEventHandler(lnbChangeCategory_Command);btn.Click +=newEventHandler(lnbChangeCategory_Click);
//btn.ClientID = btn.ClientID.Replace("ctl05", "ctl07");
}
This is the exact problem I am having, only my link buttons are in a repeater, this solution doesn't seem to work with or without the repeater, has anyone found a workaround for this?
Here's my code:
Repeater rptPhotos = (Repeater)accMorningShow.Panes[3].FindControl("rptPhotos");foreach (RepeaterItem itmin rptPhotos.Items){
LinkButton btn = (LinkButton)itm.FindControl("lnbChangeCategory");
btn.Command +=newCommandEventHandler(lnbChangeCategory_Command); btn.Click +=newEventHandler(lnbChangeCategory_Click);//btn.ClientID = btn.ClientID.Replace("ctl05", "ctl07");
}
This is the exact problem I am having, only my link buttons are in a repeater, this solution doesn't seem to work with or without the repeater, has anyone found a workaround for this?
Here's my code:
Repeater rptPhotos = (Repeater)accMorningShow.Panes[3].FindControl("rptPhotos");foreach (RepeaterItem itmin rptPhotos.Items){
LinkButton btn = (LinkButton)itm.FindControl("lnbChangeCategory");
btn.Command +=newCommandEventHandler(lnbChangeCategory_Command); btn.Click +=newEventHandler(lnbChangeCategory_Click);//btn.ClientID = btn.ClientID.Replace("ctl05", "ctl07");
}
This is the exact problem I am having, only my link buttons are in a repeater, this solution doesn't seem to work with or without the repeater, has anyone found a workaround for this?
Here's my code:
Repeater rptPhotos = (Repeater)accMorningShow.Panes[3].FindControl("rptPhotos");foreach (RepeaterItem itmin rptPhotos.Items){
LinkButton btn = (LinkButton)itm.FindControl("lnbChangeCategory");
btn.Command +=newCommandEventHandler(lnbChangeCategory_Command); btn.Click +=newEventHandler(lnbChangeCategory_Click);//btn.ClientID = btn.ClientID.Replace("ctl05", "ctl07");
}
This is the exact problem I am having, only my link buttons are in a repeater, this solution doesn't seem to work with or without the repeater, has anyone found a workaround for this?
Here's my code:
Repeater rptPhotos = (Repeater)accMorningShow.Panes[3].FindControl("rptPhotos");foreach (RepeaterItem itmin rptPhotos.Items){
LinkButton btn = (LinkButton)itm.FindControl("lnbChangeCategory");
btn.Command +=newCommandEventHandler(lnbChangeCategory_Command); btn.Click +=newEventHandler(lnbChangeCategory_Click);//btn.ClientID = btn.ClientID.Replace("ctl05", "ctl07");
}
This is the exact problem I am having, only my link buttons are in a repeater, this solution doesn't seem to work with or without the repeater, has anyone found a workaround for this?
Here's my code:
Repeater rptPhotos = (Repeater)accMorningShow.Panes[3].FindControl("rptPhotos");foreach (RepeaterItem itmin rptPhotos.Items){
LinkButton btn = (LinkButton)itm.FindControl("lnbChangeCategory");
btn.Command +=newCommandEventHandler(lnbChangeCategory_Command);btn.Click +=newEventHandler(lnbChangeCategory_Click);
//btn.ClientID = btn.ClientID.Replace("ctl05", "ctl07");
}
This is the exact problem I am having, only my link buttons are in a repeater, this solution doesn't seem to work with or without the repeater, has anyone found a workaround for this?
This is the exact problem I am having, only my link buttons are in a repeater, this solution doesn't seem to work with or without the repeater, has anyone found a workaround for this?
Here's my code:
Repeater rptPhotos = (Repeater)accMorningShow.Panes[3].FindControl("rptPhotos");foreach (RepeaterItem itmin rptPhotos.Items){
LinkButton btn = (LinkButton)itm.FindControl("lnbChangeCategory");
btn.Command +=newCommandEventHandler(lnbChangeCategory_Command); btn.Click +=newEventHandler(lnbChangeCategory_Click);//btn.ClientID = btn.ClientID.Replace("ctl05", "ctl07");
}
GridView andDetailsView controlsare not compatible with partial-page updates when their EnableSortingAndPagingCallbacks property is set totrue(The default isfalse) , and is therefore not supported inside anUpdatePanel control.
Hi,smcefee
Give me more info about your codes. I'll test it^^^
Thanks.
Dear Sir, that is the solution! I Thank you!
Sir, my next question would be what if my text box and button are wrap inside a user control and i put a user control into a accordion pane? Because I tried using the same approach and it didn't work with user control.
Say I use a user control like: <test:user runat="server" id="UserControl" />
So something like:
Button btn = (Button)this.FindControl("UpdatePanel").FindControl("MyAccordion").FindControl("AccordionPane1").FindControl("UserControl").FindControl("btnSubmit");
it doesnt' work for my side... or I am making a typo mistake or something? But definately the code above works for the case if the "insert form" is inside the accordion pane.
Sir, can you explain why I cannot use a simple OnClick on the design but have to use findcontrol and set up event handling from code behind?
No comments:
Post a Comment