Going For AJAX: clicking

Showing posts with label clicking. Show all posts

Wednesday, March 28, 2012

How do I reset a ModalPopup?

How do a reset the contents of a ModalPopup that has been closed (using the .Hide() method or by clicking the cancel button) to it's initial state (at page load)?

I am using a ModalPopup control that contains a UserControl that allows users to search for records in a database. If they find a match, they can click the 'Select' link in the GridView (where the subsequent event handler calls the ModalPopup.Hide() method). They can also click on the Cancel button to close the popup if they don't find what they are looking for.

Everything is working perfectly, except after the ModalPopup has been used once, subsequent use shows the ModalPopup in the exact state it was when it was closed, either by the .Hide() method or the cancel button.

Is there a way around this?

If its a usercontrol in the modalpopup why not create a public reset method in the usercontrol to set all the values back to "" or whatever needs to be done. You could call that right before your .hide(). It sounds like the viewstate of the controls are on. You may be able to kill viewstate on your usercontrol or set initial values, but that could potentially cause problems depending if your user control posts back a bunch of times.

HTH,

AjaxButter

I have started down the road of creating a .ResetForm() method for the user control and will see if that works.

I am hopeful that your suggestion about disabling the ViewState will work, since ideally the ModalPopup should be at it's initial state whenever it's loaded and this would involve the least amount of effort (and code to test). The only issue here might be the use of UpdatePanels for partial-page postbacks (both in the main page on in the popup), so it might not work as hoped.

I guess my best option will be to leave the ModalPopup.TargetID property blank (if it's not required) and handle showing the popup from a button Click() event that resets the UserControl first.

Thanks for the assistance.

Creating a reset event in the UserControl and calling it after certain events works for simple controls (manually created and handled forms). There are still some issues remaining...

Trapping the cancel button click event and performing a reset there causes a full page refresh since it's not wired up through the ModalPopupExtender control (and it can't be part of the UpdatePanel in the popup). Maybe I'm doing something wrong here?

If the ModalPopup contains a UserControl with a FormView (for inserting & updating), the data remains as is after the cancel button is clicked. I tried disabling the ViewState, but since the page has not been refreshed, the FormView stays the same. I also tried creating a _Click() method for the cancel button, but the event doesn't seem to get called for some reason.

Do I have to do some funky client-side scripting to get this to work?

Nevermind... I did some more playing and figured out what I was doing wrong. Staring at it for too long sometimes prevent you from seeing the forest through the trees! Wink

If I moved the cancel button into the UpdatePanel in the popup (and left the ModalPopupExtender.CancelControlID property blank), then this started to work as hoped (without the full page refreshes).

Resetting the FormView inside the UserControl turned out to be as simple as calling for the FormView.ChangeMode() method and setting it to the default mode (insert in this case) and then calling the DataBind() method (may not be needed?).

If anyone else agrees, please mark this post as an answer.

Saturday, March 24, 2012

How can retrieve data dynamically into the <content> tag of Accordion pane when clic

How can retrieve data dynamically into the <content> tag of <Accordion pane> when clicking a button which is in the <Header> tag of< Accordion pance>

Plase let me know if any possibility

Thanks,

Eswar

Hi,

I'm not sure if I understood you correctly. please try the sample below or feel free to let me know if I misunderstood you:

<%@. 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"> protected void Page_Load(object sender, EventArgs e) { } void btnCommand(object sender, CommandEventArgs e) { int index = int.Parse(e.CommandArgument.ToString()); AjaxControlToolkit.AccordionPane ap = accordion1.Panes[index]; TextBox tb = ap.ContentContainer.FindControl("TextBox" + (index+1).ToString()) as TextBox; tb.Text = DateTime.Now.ToString(); }</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><div> <input id="Button1" type="button" value="button" onclick="addTab();"/> <ajaxToolkit:Accordion runat="server" ID="accordion1"> <Panes> <ajaxToolkit:AccordionPane runat="server"> <Header> <asp:LinkButton ID="LinkButton1" runat="server" CommandArgument="0" OnCommand="btnCommand">LinkButton1</asp:LinkButton> </Header> <Content> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header> <asp:LinkButton ID="LinkButton2" runat="server" CommandArgument="1" OnCommand="btnCommand">LinkButton2</asp:LinkButton> </Header> <Content> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header> <asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="2" OnCommand="btnCommand">LinkButton3</asp:LinkButton> </Header> <Content> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> </div></form></body></html>

Wednesday, March 21, 2012

how can i make ajax work this way?

on my form, clicking on the navigation items on the left of screen will filter/refresh the gridview on the right hand side,

how can i achieve this using Ajax and not let the navigation items to reload themselves? (only the gridview refreshes)

Just make sure you only wrap the content you want to be dynamic with theUpdatePanel. That should be all you need. Start there and let us know if you're not getting what you want.

Thanks flanakin, in my applicaton, the dropdownlist has already been placed outside of UpdatePanel. the whole page reloads because the dropdownlist is "autopostback".

I found 3 lines of code that helped me to stop the whole page reload:

<asp:AsyncPostBackTriggerControlID="DropDownList1"EventName="SelectedIndexChanged"/></Triggers>

I put the code inside the code of UpdatePanel, it worked, This can also be achieved by setting "Triggers" property of the UpdatePanel in design view

How can I implement PopupControlExtender with Calendar in EditItemTemplate in GridView?

Hello,

I've to provide the user in my company with an editable gridview. When clicking on "edit" button there should be available a textbox with the ability to enter a date. This datevalue should come from a calendar.

I would like to have the calendar popuped at the bottom of the textbox.

I looked to the SampleWebsite of AtlasControlToolkit and had success to build a new aspx page with a textbox, a calendar and a PopupControlExtender.

For my question I also searched a lot in the internet and in this forum, but I didn't find the solution which works in my WebApplication.

I develop in VB with Visual Studio .NET 2005, SQL 2005 and have the newest Version of Atlas, AtlasControlTookit and AtlasControlExtender installed.

Could anybody help me?

Thanks a lot.

Paul
I'm not sure I understand your question, but generally you just put the Textbox and PopupControlExtender into the EditTemplate, and I think you can put the calendar control outside of the GridView and just reference it.
Hi, thanks for your advise.

Does this work equally well with a calender control in the footer? My code is as follows.

<asp:GridView ID="gvMisc" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="odsTrans" EmptyDataText="No data" ShowFooter="True" OnRowCommand="gvMisc_RowCommand" OnRowDataBound="gvMisc_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="From" SortExpression="dtFrom">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("dtFrom") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label33" runat="server" Text='<%# Bind("dtFrom", "{0:dd MMM yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtFrom" runat="server" CausesValidation="True" ValidationGroup="Validation_Footer"></asp:TextBox>
<atlas:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<atlasToolkit:PopupControlExtender ID="PopupControlExtenderFromDate" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="txtFrom" PopupControlID="calFrom" Position="Right" />
</atlasToolkit:PopupControlExtender>
</ContentTemplate>
</atlas:UpdatePanel>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Calendar ID="calFrom" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" OnSelectionChanged="calFrom_SelectionChanged" Width="160px">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>

and on the server

protected void calFrom_SelectionChanged(object sender, EventArgs e)
{
PopupControlExtender pce = (PopupControlExtender)gvMisc.FooterRow.FindControl("PopupControlExtenderFromDate");
pce.Commit(calFrom.SelectedDate.ToString("dd MMM yyyy"));
}