Modal Popup inside DataList?

Hey guys,
Has anyone ever tried using the Modal Popup Extender inside the DataList? If want to create something similar to Netflix. When you click a button inside a DataList, a modal popup shows up and allows the user to perform certain operations.

I tried doing so but it kept on throwing JavaScript errors. I was just wondering if anyone tried the same.

Thanks
Anup
Hi,

what kind of JavaScript errors are you getting?

I'm interested in this as well, not because I'm getting javascript errors, but because I'm getting multiple modal popup windows when clicking on a single button. I assume that I need to pass an ID to only open a single modal, but I'm not sure how to go about it. Once I'm able to get the number of popups down to one per person (this is a roster page), I'm planning on populating it with database driven content for each person in the list. Does anyone have ideas on how to go about this?

Source code:

1 <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="1"2 RepeatDirection="Horizontal" OnSelectedIndexChanged="DataList1_SelectedIndexChanged">3 <ItemTemplate>4 <div class="membercard2">5 <table width="100%">6 <tr>7 <td valign="top" width="30%" align="center">8 <asp:Image ID="RankImage" runat="server" ImageUrl='<%# "~/images/t_" & Cstr(Eval("Rank")) & ".gif"%>' />9 </td>10 <td width="70%">11 <h3>12 <asp:HyperLink ID="emailLink" runat="server" NavigateUrl='<%# "mailto:" & Cstr( Eval("Email"))%>'13 Text='<%# Cstr(Eval("FirstName")) & " " & """" & Cstr(Eval("Callsign")) & """" & " " &Cstr(Eval("LastName")) %>' />14 </h3>15 <asp:Panel runat="server" ID="panel1" CssClass="actionbuttons" Visible='<%# User.IsInRole("Administrators") %>'>16 <Club:RolloverLink ID="editbtn2" runat="server" Text="Edit" NavigateURL='<%# "Roster_edit.aspx?Action=Edit&PilotID=" & Cstr(Eval("PilotID"))%>' />17 </asp:Panel>18 <asp:Panel runat="server" ID="panel2" CssClass="actionbuttons" Visible='<%# User.IsInRole("Administrators") %>'>19 <Club:RolloverLink ID="RolloverLink1" runat="server" Text="Remove" NavigateURL='<%# "Roster_edit.aspx?Action=Remove&PilotID=" & Cstr(Eval("PilotID"))%>' />20 </asp:Panel>21 <h3>22 <asp:Label ID="TitleLabel" runat="server" Text='<%# Cstr(Eval("Title"))%>' />23 </h3>24 <h3>25    ICQ:26 <asp:Label ID="ICQLabel" runat="server" Text='<%# Cstr(Eval("ICQNum")) %>' />27 </h3>28 <h3>29    Location:30 <asp:Label ID="LocationLabel" runat="server" Text='<%# Cstr(Eval("Location"))%>' />31<br /><br />32<center>33<Club:RolloverLink ID="Button1" runat="server" Text="View Profile" />34</center>353637 </h3>38 <div class="dashedline">39  </div>40 </td>41 </tr>42 <div class="clearcard">43 </div>44 </table>45 </div>46<AjaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server"47TargetControlID="Button1" PopupControlID="ModalPanelOuter1" CancelControlID="Cancel"48OkControlID="OK" DropShadow="False" BackgroundCssClass ="modalBackground" />4950<AjaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"51TargetControlID="ModalPanelInner1" BorderColor="black" Radius="6" />52 </ItemTemplate>5354 </asp:DataList>5556<asp:Panel ID="ModalPanelOuter1" runat="server" CssClass="modalPopupOuter" Style="display:none;">5758 <asp:Panel ID="ModalPanelInner1"59 runat="server" DefaultButton="Ok" ScrollBars="Auto" Height="150px" Width="350px"60 CssClass="modalPopup">Text goes here!<br /><br />61 <asp:Button ID="Ok" runat="server" Style="position: static" Text="Ok" />62 <asp:Button ID="Cancel" runat="server" Style="position: static" Text="Cancel" />63 </asp:Panel>6465</asp:Panel>

Bump. Anyone have ideas?

Here how i did it.

Add the following to the item that will popup the modal popup for each item dataitem:

onclientclick='$find('Details').show();' where Details is the name of your modal popup extender. This will open the popup in javascript.

If you require server processing also wire up the event and in the commandarguments pass the following:

<%# DataBinder.Eval(Container, "ItemIndex") %>

This is pass the current row index to the server side event. From there you can pass the row index to get the row that fired the event.

To avoid postback on clicks make sure the control opening the popup is in an update panel.

The completed item should look similar to this:

<asp:LinkButtonID="CourseLink"runat="server"Text='your button text'

OnClick="TestLink_Click"OnClientClick="$find('[Your modal popup extender id]').show();"

CommandArgument='<%# DataBinder.Eval(Container, "ItemIndex") %>'>

</asp:LinkButton>

One final thing is to remove the modal popup extenders and panel to outside the datalist and bind the targetcontrolid to a hidden dummy button.

Have a look at this article. Hope you might get better idea. the url ishttp://www.aspdotnetcodes.com/Ajax_ModalPopup_PostBack_GridView.aspx

Thanks for the great info! I'll check it out and see if I can figure it out.

Kevin

ameenkpn -

With the exception of the update function (I don't really need to do that right now), that looks exactly like what I'm trying to do. Now, one problem. That article seems to use a mix of C and Javascript (right?), and my app is written in VB (I'm using the clubsite starter kit - YES, I'm new and NOT a developer!). I *think* I have the web service built in my app, but I'm struggling with the DisplayResult section. Is that javascript or C? Does it go in the script section of my page, or somewhere else? I assume I need to convert it to VB, but not sure where to start. Thanks again for the link, I think I'm close on getting it where I want it.

Kevin

The article i suggest you is not mix of C and JavaScript. Its purely C# and JavaScript. There is many tools availbele to convert C# code to VB.NET. Or else you go to microsoft site, they the keyword you want to convert to VB, you can see the equivalent VB code also in the code section.

Please Mark the Post as 'Answered' if you got solution.

I'm still working on this problem. I haven't been able to get it to work yet, and I don't think I'm close yet. I just can't figure out exactly where everything needs to go yet, and would love to see the actual aspx code implemented that he's got in his article. That would definitely help more than seeing code snippets. I saw a comment on the article asking for the same thing, so hopefully someone can supply it!

Kevin

Hi Kevin,

When i read that artcile i dont really find any problem. I try to implement it the same way it explained. It works well for me. Where is your problem in implementing the code snippet? hope atleast i can help you.

Thanks

The problem is that I really have no idea what I'm doing. If you could take a look at my page and see where I'm missing it, that would be helpful. I've uploaded it to my site, you can grab it here: http://www.308thvfs.com/files/roster_view.zip

That contains the page that I'm attempting to add the modal to, as well as the web service. Again, I don't want to do the update talked about in the article, I'm just trying to get the modal to popup "read only" to view a database field associated with the selected member. I'm not exactly clear what goes where, that's where I'm having the trouble. For example, you see that I don't have the "function DisplayResult" called anywhere, because I really have no idea where to put it.

My site is built in VB, and I've gotten a C# to VB converter tool (from herehttp://labs.developerfusion.co.uk/convert/csharp-to-vb.aspx).

Any help you can give would be appreciated. I'm NOT a developer, I'm just trying to use starter kits and code samples to make my way through this site, and trying to pick things up as I go...

Thanks,
Kevin