Using ModalPopupExtender within ListView Item with Manual DataSource Binding

I'm using the Ajax Control Toolkit to show a popup box triggered by a button embedded in an ItemTemplate of a ListView. I've wrapped up the entire modal popup in a feature rich usercontrol used many times throughout my website with no problems. The trigger button is part of my usercontrol, and is used as a rename button for each item displayed in my listview, so that when clicked, the modal box pops up with a textbox populated with the old name, allowing the user to type over this and click ok to submit the rename action.

This all works fine if I use an ObjectDataSource control linked to my listview to supply the data. However, when I remove the ObjectDataSource control, and replace it with a manual databind in the Page_Load event, it no longer works... the popup doesn't display when the trigger button is clicked.

I've created a much simlified example that demonstrates the problem. I've removed the user control for readability, as I can still replicate the problem without it.

Firstly, as a quick simple way to provide some data, I've created a simple class:

using System.Collections.Generic;

public class MyData {
    public int ID { get; set; }
    public string Stuff { get; set; }

    public MyData(int ID, string Stuff) {
        this.ID = ID;
        this.Stuff = Stuff;
    }

    public static List<MyData> Select() {
        List<MyData> x = new List<MyData>();
        x.Add(new MyData(1, "A"));
        x.Add(new MyData(2, "B"));
        x.Add(new MyData(3, "C"));
        return x;
    }
}

The code that works perfectly, using the ObjectDataSource, is this:

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" %>
<%@ 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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title>Untitled Page</title>
<script runat="server">
    protected void btnDisplay_Click(object sender, EventArgs e) {
        Button btn = (Button) sender;
        Control target = btn.Parent.FindControl("mdlPopup");
        AjaxControlToolkit.ModalPopupExtender mpe = (AjaxControlToolkit.ModalPopupExtender) target;
        mpe.Show();
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="smScriptManager" runat="server"  />
    <div>
        <asp:ObjectDataSource ID="ds" runat="server" TypeName="MyData" SelectMethod="Select" />
        <asp:ListView ID="lv" runat="server" DataSourceID="ds" ItemPlaceholderID="itemPH" >
        <LayoutTemplate>
            <div id="itemPH" runat="server" />
        </LayoutTemplate>
        <ItemTemplate>
            <div id="item" runat="server">
            <%# Eval("ID") %>:<%# Eval("Stuff") %>
            <ajaxToolKit:ModalPopupExtender 
                ID="mdlPopup" runat="server" TargetControlID="btnTrigger" PopupControlID="pnlPopup" 
                OKControlID="btnOK" />
            <asp:Panel ID="pnlPopup" runat="server" Width="100px" Height="100px" style="border: black solid 1px; display:none">
                <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Button ID="btnOK" runat="server" Text="OK" />
                    </ContentTemplate>                
                </asp:UpdatePanel>                             
            </asp:Panel>
            <asp:Button ID="btnTrigger" runat="server" Text="Trigger" style="display: none;" />
            <asp:Button ID="btnDisplay" runat="server" Text="Display" OnClick="btnDisplay_Click" />
            </div>
        </ItemTemplate>
        </asp:ListView>
    </div>
    </form>
</body>
</html>

The code that doesn't work, using manual databinding, is this:

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" %>
<%@ 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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e) {
        lv.DataSource = MyData.Select();
        lv.DataBind();
    }
    protected void btnDisplay_Click(object sender, EventArgs e) {
        Button btn = (Button) sender;
        Control target = btn.Parent.FindControl("mdlPopup");
        AjaxControlToolkit.ModalPopupExtender mpe = (AjaxControlToolkit.ModalPopupExtender) target;
        mpe.Show();
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="smScriptManager" runat="server"  />
    <div>
        <asp:ListView ID="lv" runat="server" DataSourceID="" ItemPlaceholderID="itemPH" >
        <LayoutTemplate>
            <div id="itemPH" runat="server" />
        </LayoutTemplate>
        <ItemTemplate>
            <div id="item" runat="server">
            <%# Eval("ID") %>:<%# Eval("Stuff") %>
            <ajaxToolKit:ModalPopupExtender 
                ID="mdlPopup" runat="server" TargetControlID="btnTrigger" PopupControlID="pnlPopup" 
                OKControlID="btnOK" />
            <asp:Panel ID="pnlPopup" runat="server" Width="100px" Height="100px" style="border: black solid 1px; display:none">
                <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Button ID="btnOK" runat="server" Text="OK" />
                    </ContentTemplate>                
                </asp:UpdatePanel>                             
            </asp:Panel>
            <asp:Button ID="btnTrigger" runat="server" Text="Trigger" style="display: none;" />
            <asp:Button ID="btnDisplay" runat="server" Text="Display" OnClick="btnDisplay_Click" />
            </div>
        </ItemTemplate>
        </asp:ListView>
    </div>
    </form>
</body>
</html>

Can anyone tell me why this doesn't work, yet the first example does, and suggest a way to make it work using manual databinding?

Thanks, Ben

ansaurus

tags:

views:

answers:

Using ModalPopupExtender within ListView Item with Manual DataSource Binding

related questions