Showing posts with label panels. Show all posts
Showing posts with label panels. Show all posts

Wednesday, March 28, 2012

HOW DO I update a control from outside the updatepanel

i have an update panel with 4 panels. when the user select panel 2 i need a control outside the updatepanel to become visible. i can not put the hidden div inside the updatepanel because the contents of the div will not work. how do update the div control from panel 2?

To make visible the control outside updatepanel is not possible upto my knowledge. definitely you have to include that control into another udpatepanel or include it with your 1st updatepanel.


Hi CurlyFro,

Here is the sample to indicate how to show a hidden div, which is out of a UpdatePanel, from a panel click event or a button click event in UpdatePanel. Hope it helps.

<%@. 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) { } protected void Button2_Click(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "showDiv();", true); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <script language="javascript"> function showDiv(){ document.all.myDiv1.style.display=''; //do something here to update the hidden div } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><%=DateTime.Now.ToString()%> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="200px" onclick="showDiv()" BorderColor="AliceBlue" BorderWidth="1px"> <input id="Button1" type="button" value="button" /> </asp:Panel> <br/> <asp:Panel ID="Panel2" runat="server" Height="50px" Width="200px" BorderColor="Black" BorderWidth="1px" > <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="ServerSideButton" /> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <div id="myDiv1" style="width: 200px; height: 100px; display: none"> This is the hidden div </div> </form></body></html>

This sample contains two ways (server side and client side methods) to show the hidden div.

If i misunderstood you, please let me know!


i'm creating a registration form. panel1 is my license, panel2 is the registration form, panel3 is my confirmation. on panel2 i have form hints for specific textboxes. how do i get the form hints to be hidden then shown on panel2?

Since you have many steps, I suggesting to wrap these in an Asp.net Wizard Control then put the Wizard Control in an UpdatePanel.


Hi CurlyFro,

Would you please share your source code here ? It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Hi CurlyFro,

Has your problem been resolved yet?

How do I recognize dynamic buttons as triggers for updating updatepanels?

I have two updatepanels on a page each with a datagrid inside the panels. I need updatepanel B to update it's datagrid when a LinkButton is clicked inside udatepanel A's datagrid. The linkbuttons are dynamically generated for each row of the datagrid.

Thanks

Braden

Stripped Down Example:

<asp:UpdatePanel id="pnl1" runat="server">
<ContentTemplate>
<asp:datagrid id="dgA" runat="server" > ... <asp:LinkButton ID="lbtnSelect" CommandArgument=' ... ' runat="server">...</asp:LinkButton> ... </asp:datagrid>
</ContentTemplate>
</asp:UpdatePanel>

<!-- Next Panel -->

<asp:UpdatePanel id="pnl2" runat="server">
<ContentTemplate>
<asp:datagrid id="dgB" runat="server" > ... </asp:datagrid>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnSelect" EventName=" ... "/>
</Triggers>
</asp:UpdatePanel>

Unless I misread your post, I think that all you need to do is add the following line inside of your event handler for the link buttons (lbtnSelect_Click, or similar):

pnl2.update();

This should update your pnl1 because the linkbutton's click event fired inside of pnl1, andprogrammatically updating pnl2 with pnl2.update() should take care of updating the other datagrid (dgB). You can get rid of the <Triggers> definition too.

Monday, March 26, 2012

How Do I Dynamically Add Profile Properties

I am creating a series of panels of data (dynamically) that I want to have the user drag around with theDragOverlayExtender. The problem is that I need to save their position on the page so that the next time they load the page, their panels are right where they left them. I have added theProfileScriptService and for eachDragOverlayExtender that I am creating, I am setting theProfileProperty to a unique value. The problem is that there can be any number of panels, so I cannot present values in the config file.

How can I dynamically add profile properties?

Also, (as a side question) how can I read and set the relative positions of the panels that have been moved via theDragOverlayExtender?

Thanks!

- David E. Craig

I'm not sure about the addition of dynamic profile properties, but since the ProfileScriptService is a core Atlas control, you might considerposting the question in one of the dedicated Atlas forums. Regarding the panel position, it's looking to me like the Location/location property of the DragPanelExtender/Behavior should do what you need?

Sorry, but has the dragoverlayextender an Location property?

Thanks,

Rodrigo Sendin


It did before ASP.NET AJAX Beta 1 when I made the recommendation. :) It's been removed, but may be back soon as time/underlying framework permits.

How do I collapse collapsible panels in UpdatePanel from code-behind?

Hi, all. There are quite a few posts about the collapsible panel here (some are my own), and I did a good amount of going through those, but they didn't seem to address my problem.

I have a master/detail setup in the form of a GridView in one collapsible panel and a FormView in another collapsible panel. The Grid- & FormViews work fine together. My problem lies in getting the collapsible panels to expand/collapse on a button clicked in the appropriate Grid/FormView. Actually, through much testing I found the problem lies in the fact that both the GridView and FormView are in their own UpdatePanels. When I comment those out, the code I have attached to the save button on the FormView does as it should: collapses the FormView panel and expands the GridView panel.

I tried using triggers for each of the UpdatePanels, setting the ControlID property to the FormView for the GridView's panel & vice versa for the FormView's panel. That didn't work...

Here's a code example to show you what I've got:

<asp:UpdatePanel ID="updPnlActCodeFmv" runat="server" UpdateMode="Conditional"><Triggers> <asp:AsyncPostBackTrigger ControlID="gvActCode" /></Triggers><ContentTemplate><asp:FormView ID="fmvActCode" runat="server" DefaultMode="Insert" DataSourceID="dsActCode"DataKeyNames="ActivityCodeID" BorderWidth="0px" Width="600px"> <InsertItemTemplate></InsertItemTemplate><EditItemTemplate> <asp:Button ID="btnSaveActCodeFmvChange" runat="server" CausesValidation="True" ValidationGroup="EditValidation"CommandName="Update" Text="Save Changes & Return to Table" Font-Bold="True" OnClick="btnSaveActCodeFmvChange_Click" /></EditItemTemplate></asp:FormView></ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="updPnlActCodeGv" runat="server" UpdateMode="Conditional"><Triggers><asp:AsyncPostBackTrigger ControlID="fmvActCode" /></Triggers><ContentTemplate><asp:GridView ID="gvActCode" runat="server"> <Columns> </Columns></asp:GridView></ContentTemplate></asp:UpdatePanel>

Here's the code for the click event of the save button in the FormView:

Protected Sub btnSaveActCodeFmvChange_Click(ByVal senderAs Object,ByVal eAs EventArgs)
Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeActCodeFmv
cpeFmv.Collapsed =True
cpeFmv.ClientState ="True"

Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeActCodeGv
cpeGv.Collapsed =False
cpeGv.ClientState ="False"

updPnlCpeActCode.Update()
End Sub

I'm not sure what else I can try - I need UpdatePanels around each of the View controls due to the amount of data being used in them, but with the UpdatePanels, I can't get the CollapsiblePanelExtenders to work they way I need them to!

Any help would be GREATLY appreciated!

Thanks

Anyone have any ideas on this?

Maybe my post was confusing.

In a nutshell, I need to expand & collapse Collapsible Panels via code-behind, while the controls (GridView & FormView) in each of the Collapsible Panels are all in Update Panels. The buttons the use clicks to do this are inside the Grid- & FormViews.

Using triggers doesn't work (at least the way I have them set up) and removing the UpdatePanels makes the collapse/expand code work.

HELP!


Man, Ihate talking to myself!

I was really hoping someone would post something over the weekend with some suggestion on how to deal with this!

Anyone?


Once again I would greatly appreciate it if someone could help me out on this. This is a feature I'm trying to implement on a site for a customer, so it is very important to me (and the customer) to be able to get this working!

PLEASE HELP!


[BUMP]

Eventually someone's GOT to have some clue!

Microsoft guys, where the heck are you?!?!??!


I suspect that is has to do with the conditional update. try always.

Not too sure how these things work with multiple update panels as it seems an event is being fired from one panel and you are trying to update another.


Hey, GSpies, thanks for the suggestion, but originally I didn't specify the UpdateMode and I found out that the UpdatePanles default to Always, which, in the case of my page, defeats the purpose of the UpdatePanels in the first place. As I mentioned in my original post, I have a lot of information being loaded on the page, so I need to control partial page postbacks based on certain events (GridView databinding, button clicks, dropdown selections, etc.). With the UpdateMode on Always, the UpdatePanel is, obviously, Always updated!

No, it's something else. I'm also dealing with trying to get a validation summary control and validatorcallout controls to work on the page within UpdatePanels and that endeavor isn't looking too good either.

Seems UpdatePanels, though very useful in and of themselves, really cause havoc with some other controls!


seeing as I am still stuck on the idea that it wont update if it is conditional, and the button you click is not one of the triggers, I wonder if using a behaviorid for the panel is appropriate and trying to fire that behavior from code-behind

Not having any direct experience in this problem, but sort of understanding how these things work, I would investigate.

Hope this helps


Hey, GSpies

Here's some info on UpdatePanels from the ASP.NET Documentation at:http://www.asp.net/AJAX/Documentation/Live/mref/P_System_Web_UI_UpdatePanel_UpdateMode.aspx

"The content of anUpdatePanel control is updated in the following circumstances:

If theUpdateMode property is set toAlways, theUpdatePanel control's content is updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside otherUpdatePanel controls and postbacks from controls that are not insideUpdatePanel controls.

If theUpdatePanel control is nested inside anotherUpdatePanel control and the parent update panel is updated.

If theUpdateMode property is set toConditional, and one of the following conditions occurs:

You call theUpdate() method of theUpdatePanel control explicitly.

The postback is caused by a control that is defined as a trigger by using theTriggers property of theUpdatePanel control. In this scenario, the control explicitly triggers an update of the panel content. The control can be either inside or outside theUpdatePanel control that defines the trigger.

TheChildrenAsTriggers property is set totrue and a child control of theUpdatePanel control causes a postback. A child control of a nestedUpdatePanel control does not cause an update to the outerUpdatePanel control unless it is explicitly defined as a trigger."


GOT IT!!

Okay, the gist of it was, I had to include the collapsiblepanel controlsinside an updatepanel as well, setting the ChildrenAsTriggers property as true, and then explicitly using the update method from the code-behind:

aspx example:

<ajaxToolkit:TabContainer ID="tabcont1" runat="server"><ajaxToolkit:TabPanel ID="tabPersonnel" runat="server"><ContentTemplate><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"><ContentTemplate><ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="server" /><asp:Panel ID="Panel1" runat="server"><asp:Label ID="Label1" runat="server" /></asp:Panel><asp:Panel ID="Panel2" runat="server"><asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel3" runat="server"><ProgressTemplate></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:FormView ID="FormView1" runat="server"></asp:FormView></ContentTemplate></asp:UpdatePanel></asp:Panel><br /></ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"><ContentTemplate><ajaxToolkit:CollapsiblePanelExtender ID="cpe2" runat="server" /><asp:Panel ID="Panel3" runat="server"><asp:Label ID="Label2" runat="server" /></asp:Panel><asp:Panel ID="Panel4" runat="server"><asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel4" runat="server"><ProgressTemplate></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="conditional" ChildrenAsTriggers="True"><ContentTemplate><asp:GridView ID="GridView1" runat="server"><Columns></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel></asp:Panel></ContentTemplate></asp:UpdatePanel></ContentTemplate></ajaxToolkit:TabPanel></ajaxToolkit:TabContainer>

And in the code-behind:

Protected Sub btnSaveClose_collapseCpeFormView(ByVal senderAs Object,ByVal eAs EventArgs)Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeFormViewcpeFmv.Collapsed =TruecpeFmv.ClientState ="True"Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeGridViewcpeGv.Collapsed =FalsecpeGv .ClientState ="False"updPnlPersGvOuter.Update()updPnlPersFmvOuter.Update()End SubProtected Sub btnEditMore_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeFormViewcpeFmv .Collapsed =FalsecpeFmv .ClientState ="False"Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeGridViewcpeGv.Collapsed =TruecpeGv.ClientState ="True"updPnlPersGvOuter.Update()updPnlPersFmvOuter.Update()End Sub

In the GridView there is a button (btnEditMore) to click which populates the FormView with the selected record. That collapses the GV panel & expands the FV panel.

Conversely, when the "btnSaveClose" button is clicked in the FormView, the FV panel is collapsed and the GV panel is expanded.

Hope that info save someone else from the hassel I went through getting this to work!

Saturday, March 24, 2012

How do add a click handler to a Button in Beta 1?

Hi All,

I must say I'm finding the move to Beta 1 frustrating.. Love to see documentation for something other than update panels :)

Can someone give me a hand with a simple UI event handler?

My Script Manager declaration looks like this:

<asp:ScriptManagerID="ScriptManager1"runat="server">

<Scripts>

<asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js"/>

<asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js"/>

<asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js"/>

</Scripts>

</asp:ScriptManager>

Problem code :

findButton =new Sys.Preview.UI.Button($get('FindButton'));

findButton.click.add(onFindLocation); // this line fails

Cheers!

Tim

Hi,

findButton.add_click(onFindLocation);