Dropdown Extender: content

Showing posts with label content. Show all posts

Wednesday, March 28, 2012

Dynamic content paired with a popupControlextender

Hi folks,

I have implemented a popup control exteder which works great, however I have to populate the content of the popup at page load. I would like the content of the popup to be dynamically generated at the time the popup is called with a server callback, kind of a PopupControlExtender meets DynamicPopulateExtender. I guess what i'm looking for is just an indication of the complexity of this task, and perhaps a pointer in the right direction.

Cheers,

Howard

Hi,

Actually, PopupControl has this functionality built in... you can set the DynamicServicePath, DynamicServiceMethod, DynamicContextKey, and DynamicControlID properties of PopupControlExtender and it will fetch dynamic content before it's shown.

Thanks,
Ted

Dynamic content made easy [How to: Use the new dynamic population support for Toolkit cont

Since the feature request has come up so many times here and since we now support the relevant scenario in the new 60914 release of the Toolkit, I've just blogged a little example of dynamically populating the content of a popup control (HoverMenu, ModalPopup, or PopupControl) as it's being displayed. You can find the blog post here:

http://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx

Hope this helps!

Hi David,

Thanks for this post. This does seem handy. However, what if the DataList in your example is programatically binded and we want it inside of an update panel? I modified your example to do this and I get an assertion failed error when I click my button to load the DataList. Any thoughts on how to accomplish this?

Thanks.

1<%@. Page Language="C#" %>2<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit"3 TagPrefix="atlasToolkit" %>4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"5 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">67<script runat="server">8 [System.Web.Services.WebMethod]9 public string GetContent(string contextKey)10 {11 // Create a random color12 string color = (new Random()).Next(0xffffff).ToString("x6");13 // Use the style specified by the page author14 string style = contextKey;15 // Display the current time16 string time = DateTime.Now.ToLongTimeString();17 // Compose the content to return18 return "<span style='color:#" + color + "; " + style + "'>" + time + "</span> ";19 }2021 protected void Button2_Click(object sender, EventArgs e)22 {23 DataList1.DataSourceID = "XmlDataSource1";24 DataList1.DataBind();25 }26</script>2728<html xmlns="http://www.w3.org/1999/xhtml">29<head id="Head1" runat="server">30 <title>Dynamic ModalPopup Demonstration</title>3132<%-- Style the page so it looks pretty --%>33 <style type="text/css">34 body { font-family:Verdana; font-size:10pt; }35 .background { background-color:Gray; }36 .popup { width:200px; padding:10px; background-color:White;37 border-style:solid; border-color:Black; border-width:2px;38 vertical-align: middle; text-align:center; }39 </style>40</head>41<body>42 <form id="form1" runat="server">4344<%-- Atlas pages need a ScriptManager --%>45 <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />4647<%-- A very simple data source to drive the demonstration --%>48 <asp:XmlDataSource ID="XmlDataSource1" runat="server">49 <Data>50 <items>51 <item style="font-weight:bold" />52 <item style="font-style:italic" />53 <item style="text-decoration:underline" />54 </items>55 </Data>56 </asp:XmlDataSource>57  <%-- A simple list of all the data items available --%>58 <atlas:UpdatePanel ID="UpdatePanel1" runat="server">59 <ContentTemplate>6061 <asp:DataList ID="DataList1" runat="server">6263 <HeaderTemplate>64 How would you like your dynamic content styled?65 </HeaderTemplate>6667 <ItemTemplate>68 • <asp:LinkButton ID="LinkButton" runat="server" Text='<%# Eval("style")%>' />6970<%-- The ModalPopupExtender, popping up Panel1 and dynamically populating Panel2 --%>71 <atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server">72 <atlasToolkit:ModalPopupProperties73 TargetControlID="LinkButton" PopupControlID="Panel1" OkControlID="Button1"74 BackgroundCssClass="background" DynamicControlID="Panel2"75 DynamicContextKey='<%# Eval("style")%>' DynamicServiceMethod="GetContent" />76 </atlasToolkit:ModalPopupExtender>77 </ItemTemplate>7879 </asp:DataList>80 <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />81 </ContentTemplate>82 </atlas:UpdatePanel>8384<%-- All ModalPopups share the same popup --%>85 <asp:Panel ID="Panel1" runat="server" CssClass="popup" style="display:none;">86 <p>This popup popped at <asp:Label ID="Panel2" runat="server" /> and all was well.</p>87 <p><asp:Button ID="Button1" runat="server" Text="OK" /></p>88 </asp:Panel>8990 </form>91</body>92</html>

Can this be done in a Web User Control for example? How?

Cheers

To avoid the asserts in the scenario above, just use the recommended "empty extender in the page body" workaround. Specifically, add the following line below Button2:

<atlasToolkit:ModalPopupExtender ID="PlaceholderModalPopupExtender" runat="server" />

Regarding doing this in a Web User Control, I expect it should work fine. What trouble are you having?

David,

I cannot get it to call the method in the web user control.

I have created a seprate thread:http://forums.asp.net/thread/1404652.aspx

Ziax

FYI: I've posted a new blog entry outlining the steps to update the sample to the new ASP.NET AJAX style used by Beta 1/2:

http://blogs.msdn.com/delay/archive/2006/11/17/dynamic-content-made-easy-redux-how-to-use-the-new-dynamic-population-support-for-toolkit-controls.aspx

First, thanks for the code. I have another question :What if I want to have DataGrid inside Panel1 which value depends on DynamicContextKey from ModalPopup

 <asp:Panel ID="Panel1" runat="server" CssClass="popup" style="display:none;"> <p>This popup popped at <asp:Label ID="Panel2" runat="server" /> and all was well.</p> <p><asp:Button ID="Button1" runat="server" Text="OK" /></p> <
asp:DataGridID="dgYesNo"runat="server"></asp:DataGrid> </asp:Panel>

You might consider something like this:http://weblogs.asp.net/scottgu/archive/2006/10/22/Tip_2F00_Trick_3A00_-Cool-UI-Templating-Technique-to-use-with-ASP.NET-AJAX-for-non_2D00_UpdatePanel-scenarios.aspx
what if I have an dropdownlist, how can I populate it?
what if I have a dropdownlist, how can I populate it?

Dynamic Content into ModalPopup

I've just started playing with the AJAX Toolkit. One thing I am stuck on, ishow to get dynamic content into the controls that are in the modalPopup PopupControlID?

A very simple example:

There is a textbox and a button. When you enter text then click the button, a modal popup appears saying "You entered..." and whatever you typed. Is there a way to do this in the codebehind? It dosen't seem like the button click event is firing since it is the "TargetControlID" of the modalPopup.

Thanks

Have a look at this bloghttp://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx. I did this my self the other day but I did it a slightly different way, when I get back to work I will post the code.

Thank you for the reply. I took a look at the article, and there is some good information there. I actually ended up accomplishing what I need by assigning the "TargetControlID" to a bogus control (using this example, it's a bummer this property cannot be null or empty) and using the ModalPopupExtender1.Show() method. This seems to be doing the trick. This way, I can use any event or condition to pop the ModalPopup, and all of the controls (including the panel i am using as the "PopupControlID". are accessable at design.

So, i have a button, on the click event i create all of the controls i need and add them to the panel, then call ModalPopup1.Show() and there it is.

Now the problem i'm facing is getting values from the ModalPopup back into the main screen. For example, if I have a textbox in the ModalPopup, when the user clicks OK on the modalpopup, how to i get that value? Remember that the TextBox and it's properties were generated at runtime, so after postback, they wont' exist. I guess I could try to use the Request.Form key values?

bortiquai:
I guess I could try to use the Request.Form key values?

This is a option.

Or you can use a HiddenField which will always be on the page to keep this value. The value of HiddenField can be set in onclick client side event handler of ok button.

Dynamic content for modal popup

Hi -

I want to change the contents of a modal popup dynamically through client side script. For that purpose, I've included a div element and change it's innerhtml property. When I test whether the change got done I can read the new value through javascript but the modal popup extender shows the old html (which loaded when the page was loaded). I think I may have to call a method to let the modal popup extender know I updated the content, but I don't know how to do that.

Any help is greatly appreciated!!

Oliver

I thought I'd add some code so you know what I am talking about.

Thanks,

Oliver

 function showpopup() { event.bubble = false; var d = document.getElementById("popupcontent"); d.innerhtml='<img src="images/spinner.gif" alt="Please wait ..." />'; var popup =$find('BMPNoShow'); popup.show(); alert(d.innerhtml); }<ajaxToolkit:ModalPopupExtender ID="MPNoShow" BehaviorID="BMPNoShow" runat="server" CancelControlID="BNoShowCancel" DropShadow="true" PopupControlID="PNoShow" PopupDragHandleControlID="PNoShow" TargetControlID="PNoShow"> </ajaxToolkit:ModalPopupExtender> <asp:Panel ID="PNoShow" runat="server" Style="background: white; border-color: Gray; border-style: solid; width: auto; padding: 10px" EnableViewState="false"> <div id="popupcontent"> </div> <br /> <asp:Button ID="BNoShowCancel" runat="server" Text="Cancel" UseSubmitBehavior="false" /> <asp:Button ID="BNoShowConfirm" runat="server" Text="Mark as no-show" UseSubmitBehavior="false" /> <asp:HiddenField ID="HFNoShowRequest" runat="server" /> </asp:Panel>

Take a look at the Dynamic* properties of the modalpopup, which allow you to load the content of a modalpopup dynamically using a web service. This will automatically load the content into the modalpopup when it is shown without you having to do anything.

Thanks - that's even better than what I was trying to do :)

Dynamic Content events needed as Trigger events

Is there a way to add triggers at runtime? I have a bunch of dynamic images that show that I want to add the click events as triggers to update a larger image. Thanks.

I don't think you can add triggers dynamically (maybe it's possible, I don't see a way however).

The best way to procede depends on your needs. If *all* you need is your UpdatePanel to update() when some image is clicked and you don't know what / how many images at runtime, you could just dynamically add the image controls to the UpdatePanel's container controls, and give each image an onclick attribute with a postback reference. Something like this:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %><!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><script runat="server"> protected void Page_Load(object sender, EventArgs e) { Image Image1 = new Image(); UpdatePanel1.ContentTemplateContainer.Controls.Add(Image1); Image1.ID = "Image1"; Image1.ImageUrl = "img.png"; Image1.Attributes.Add("onclick", ClientScript.GetPostBackClientHyperlink(Image1, "Image1PostBack")); }</script><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> asdf </ContentTemplate> </asp:UpdatePanel> </form></body></html>

If the dynamic images need to be outside the UpdatePanel you want to trigger - does it matter to your update which dynamic image was clicked? Depending on that, there are other possibillities.

Ben

Ben,

Thanks for the post. I figured it out. You can add triggers to the updatepanel.

Dim x As New AsyncPostBackTriggerx.ControlID = <name of control that will be doing the update>x.EventName = "Click"update.Triggers.Add(x)

Just make sure this runs even after a post back.

Monday, March 26, 2012

Dynamic Ajax Content rendering in a div tag

Hi All,

I had a requirement like, where i will do asynchrounous get of data, and load the data say 10 records in a div tag. if user scroll through the div and reaches teh end of the div tag, i will remove all conents from div and load fresh contents from 11-20 in div. Like this it goes...

Now my problem,

Step 1:- 1-10 records show in div (now user scroll to end of div)

Step 2:- Remove 1-10 records show 11-20 records in div. My Question is if user wants to see 1-10 records back, i am not able to take the user to the top since the first record is at the top of the div. I can't fire any event here.

Can anyone help on this?

Thanks in advance,

Karthikeyan.

Can you poste some code? I get the idea but I want to see what even handler you are using to track the scrolling in conjunction with the records being scrolled. Perhaps also you might want to use hidden fields that put the value of the previous set of pages (in your case 1-10).

Hi,

Thank you for your post!

I suggest you keep 20 records in the div, and just display half of them.

Then, when you want get the pre 10 records, just do it like you get the next 10 Records because you can fire some events of the scroll.

If you have further questions,let me know.

Best Regards,

Dynamic Accordion Content

Is there a way to dynamically add to the Content of an AccordionPane?Has anyone been able to do this?

mdenn:
Is there a way to dynamically add to the Content of an AccordionPane?

A short sample:

<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %><!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 id="Head1" runat="server">
 <title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
 <ajax:ScriptManager runat="server" ID="sm1" EnablePartialRendering="true"></ajax:ScriptManager>
 <act:Accordion runat="server" ID="Accordion1">
 <Panes>
 <act:AccordionPane runat="Server" ID="AccordionPane1" >
 <Header>
 <b>Pane one</b>
 </Header>
 <Content>
 <asp:Panel runat="Server" ID="panel1">
 Just some text here. <br />
 </asp:Panel>
 </Content>
 </act:AccordionPane>
 <act:AccordionPane runat="Server" ID="AccordionPane2">
 <Header>
 <b>Pane two</b>
 </Header>
 <Content>
 <asp:Label ID="Label1" runat="server" Text="First label"></asp:Label><br /><br />
 <asp:Label ID="Label2" runat="server" Text="Last label"></asp:Label>
 </Content>
 </act:AccordionPane>
 </Panes>
 </act:Accordion>
 </form>
</body>
</html>

PartialClass _Default
Inherits System.Web.UI.Page

Protected Sub Page_Init(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.Init
If Not Page.IsPostBackThen
Dim tmpLabelAs New Label
tmpLabel.Text ="Programmatically added label."Dim tmppanelAs Panel
tmppanel =Me.Accordion1.Panes(0).FindControl("Panel1")
If Not tmppanelIs Nothing Then tmppanel.Controls.Add(tmpLabel)End If
End If
End Sub

End Class

For some reason, adding the control directly to AccordionPane1.Controls caused the whole Accordion to crash and burn (both panes would stay open, can't manipulate them).
Do I need to do it on the Page_Init event? I tried it on the onLoad for the Accordion, and that didn't seem to work.

mdenn:
Do I need to do it on the Page_Init event? I tried it on the onLoad for the Accordion, and that didn't seem to work.

Works fine in Page_Load for me. What kind of errors or unexpected behavior are you getting?

I found out my problem... I had copied the code from our old accordion control that called another page to get the data to fill in the Pane, and I forgot to take that out.

Wednesday, March 21, 2012

DropDownExtender: Refresh content

I have a drop-down extender, where the control ID references a Panel, which contains a TreeView. When I update the contents of the TreeView, and hit the drop-down button, the treeview shown is not refreshed. Is there any way that I can force a refresh?

Thanks - Bennie

How are you updating the treeview?

Ron

I am adding/removing tree nodes in a public method of the treeview.

Is the TreeView in an UpdatePanel? I'm trying to determine how all of the controls in question are composed. Could you post a snippit of the aspx?

this is the DropDownExtender:

ajaxToolkit:DropDownExtenderrunat="server"ID="DDE"TargetControlID="bookmarksTextLabel"DropDownControlID="DropPanel"/>

This is the DropPanel:

<asp:PanelEnableViewState="false"ID="DropPanel"ForeColor="#747678"runat="server"Style="text-align:left;padding-bottom:0px;padding-top:0px;margin-bottom:0px;margin-top:0px;display:none;visibility:hidden;">

<divstyle="border-color:Blue; border-width: 1px; border-style:solid; padding: 1px,1px,1px,1px;">

<bmt:BookmarksTreeid="tvBookmarks"runat="server"/></div></asp:Panel>

I tried enabling/disabling ViewState, but to no avail.

Does it work without using the drop-down extender? Please verify that the tree is populating correctly without the extender on the page. Is all of this content within an UpdatePanel?

It does work without the DropDownExtenter. No, there is no outer UpdatePanel.