JQuery UI Dialog, C# DataList and ImageButton ItemCommand
.NET - 2008 3.5
Jquery - 1.4.2.js
Summary:
When I launch my DIV in a modal jquery dialog the button inside my Datalist stops firing the ItemCommand. It works if I use the control outside of the modal dialog. I would like to capture the click event from an imagebutton in each row of my DataList in order to remove that element from my list.
Details:
I have a page that contains a DIV with a display set to none. I attach a JQuery dialog to the DIV to display my
data when a button is clicked on the page. We'll call the DIV that is being displayed in a JQuery modal dialog 'dialog-verify'.
The dialog-verify referenced above contains an update panel 'upVerify' that contains a DataList. This datalist is one of three datalists inside the dialog-verify, each is wrapped in their own scrollable DIV. The DataList I am having an issue with is called dlFromTrade. dlFromTrade contains a header, itemtemplate and footer. Inside the itemtemplate is a second list named dltoTrade. These datalists have a parent, child relationship. I am using the dlFromTrade ItemDataBound event to wire up a
client side event (toggle collapse) to an image button inside my dlFromTrade control. In this manner I have created a master/detail record with an expand/collapse toggle. All of this works as expected, but now for the fun part.
In addition to the expand/collapse ImageButton each master row in my dlFromTrade also contains a second 'Delete' ImageButton that should remove the record from the DataList when clicked. I have given my button a CommandName of DeleteFromExchange. I have also assigned my dlFromTrades OnItemCommand event to dlFromTrades_ItemCommand. Unfortunately, when I click on the ImageButton to Delete the record nothing happens. However, if I place my controls directly on the page as they are, removing the jquery modal dialog (dialog-verify) from the equation, I am receiving the ItemCommand event as expected. The second I launch my code in a modal jquery dialog it stops working...
At the end of the day what I am attempting to accomplish is simple:
1. I need a jquery modal dialog that contains a Master/Detail DataList
2. Each row of my DataList should contain one or more buttons
3. I need to handle the click event for each of these buttons
Here is the relevant front end code that I am working with:
$("#<%=btnVerify.ClientID%>").click(function() { $('#dialog-verify').dialog({ modal: true, width: 800, buttons: { Ok: function() { $(this).dialog('close'); } } }); return false; });<div id="dialog-verify" title="Verify Trades"> <asp:UpdatePanel ID="upVerify" UpdateMode="Always" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="dlFromTrades" EventName="ItemCommand"/> </Triggers> <ContentTemplate> <div style="overflow:auto; height:125px;"> <asp:DataList ID="dlFromTrades" OnItemCommand="dlFromTrades_ItemCommand" OnItemDataBound="dlFromTrades_ItemDataBound" runat="server"> <HeaderStyle /> <HeaderTemplate> <table style="padding:2px" cellpadding="0" cellspacing="0" id="tblReviewTrades"> <tr class="MenuBarImage"> <th> </th> <th style="width:153px" align="left">Account</th> <th style="width:50px" align="left">%</th> <th style="width:175px" align="left">$ Amount</th> <th style="width:43px" align="left">Shares</th> <th style="width:30px" align="left">Fund</th> <th style="width:64px" align="left">Trade Date</th> <th style="width:64px" align="left">Settle Date</th> <th> </th> </tr> </HeaderTemplate> <ItemTemplate> <tr class="ui-widget-header"> <td style="margin:10px;" class="exchangeCol"> <asp:ImageButton ID="imgCollapse" ImageUrl="~/Images/minus.png" runat="server" /> </td> <td> <%# Eval("Account")%> </td> <td> <%# Eval("Percent")%> </td> <td> <%# Eval("Amount")%> </td> <td> <%# Eval("Shares")%> </td> <td> <%# Eval("Fund")%> </td> <td> <%# Eval("TradeDate")%> </td> <td> <%# Eval("SettleDate")%> </td> <td> <asp:ImageButton ID="imgbDeleteFromExchange" CommandName="DeleteFromExchange" ImageUrl="~/Images/delete.png" runat="server" /> </td> </tr> <tr id="trToTrades" style="border:solid 1px black;" runat="server"> <td> </td> <td colspan="8"> <asp:DataList BorderColor="Black" Width="100%" ID="dlToTrades" runat="server"> <HeaderStyle BackColor="AliceBlue" /> <HeaderTemplate> <table style="padding:2px"> <tr> <th align="left">Account</th> <th align="left">%</th> <th align="left">$ Amount</th> <th align="left">Shares</th> <th align="left">Fund</th> <th align="left">Trade Date</th> <th align="left">Settle Date</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td> <%# Eval("Account")%> </td> <td> <%# Eval("Percent")%> </td> <td> <%# Eval("Amount")%> </td> <td> <%# Eval("Shares")%> </td> <td> <%# Eval("Fund")%> </td> <td> <%# Eval("TradeDate")%> </td> <td> <%# Eval("SettleDate")%> </td> <td> <asp:ImageButton ID="imgEditToExchange" ImageUrl="~/Images/table_edit.png" runat="server" /> </td> <td> <asp:ImageButton ID="imgDeleteToExchange" ImageUrl="~/Images/table_delete.png" runat="server" /> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:DataList> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:DataList> </div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
If anyone can please help point me in the right direction it would be greatly appreciated. I've been struggling on and off with this issue for over a week and have been unable to discover a
solution. I really need to be able to capture the click event of a button inside of a datalist, in an update panel being displayed in a jquery modal dialog.
Please let me know if there are any questions, I am more than willing to do my best to answer them...
Here are some things I've tried that
did not work:
1. Adding an AsyncPostBackTrigger to the update panel. I feel this is unnecessary since my button is inside of my update panel, but I tried it anyway.
2. Adding/wiring the 'OnClick' event pragmatically inside of the dlFromTrades_ItemDataBound event.
3. Handling the buttons 'OnClick' event directly.
Thanks in advance for your support, I'm really stuck...
Topic Participants
just.andrews