RadListView ItemCommand not firing

I have a RadListView and also an event handler bound to lstGameWaypoints_ItemCommand as shown below. On First display of the grid clicking the delete button successfully triggers a postback and the ItemCommand firing.

Once the postback completes it appears that the event handlers are not being wired up again and clicking the delete button causes no action to occur.

Has anyone seen a similar issue before?

<telerik:RadListView runat="server" ID="RadListView1" 
DataSourceID="ObjectDataSource1" AllowPaging="true" 
OnDataBound="lstGameWaypoints_DataBound" 
OnItemCreated="lstGameWaypoints_ItemCreated" 
OnItemCommand="lstGameWaypoints_ItemCommand">
<EmptyDataTemplate>
    <div style="width: 100px;margin: 10px auto auto auto;"><button class="AddWaypoint">Add Waypoint</button></div>
</EmptyDataTemplate>
<ItemTemplate>
    <td>
        <table style="border:1px solid black;width: 232px;height: 70px;margin:auto;">
            <tr>
                <td>
                    Time:
                </td>
                <td>
                    <%# string.Format("{0:h:mm tt}", Eval("DateTime")) %>
                </td>
            </tr>
            <tr>
                <td>
                    Date:
                </td>
                <td>
                    <%# string.Format("{0:d}", Eval("DateTime")) %>
                </td>
            </tr>
            <tr>
                <td>
                    Chip Stack:
                </td>
                <td>
                    <%# string.Format("{0:C}", Eval("ChipStack")) %>
                </td>
            </tr>
            <tr>
                <td>
                    Notes:
                </td>
                <td>
                    <%# Eval("Notes") %>
                </td>
            </tr>
            <tr>    
                <td colspan="2" style="text-align:right;">
                    <asp:Button runat="server" ID="btnDelete" CssClass="deleteButton"  CommandArgument='<%# Eval("WaypointID") %>' CommandName="Delete" Text="X" OnClientClick="return confirm('Are you sure you want to delete this waypoint?');" />
                </td>
            </tr>
        </table>
    </td>
</ItemTemplate>
</telerik:RadListView>

protected void lstGameWaypoints_ItemCommand(object sender, Telerik.Web.UI.RadListViewCommandEventArgs e)
{
    if (e.CommandName == "Delete")
    {
        //Do stuff
    }
}

UPDATE:

It appears that this is a issue with the RadAjaxManager that I am using to host the panel for this control. If I disable ajax on the panel, everything works as expected.

This is a full code...

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="panGameWaypoints">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="panGameWaypoints" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="panGameDetails">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="panGameDetails" LoadingPanelID="Ra开发者_运维技巧dAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="RequestEnd" />
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="60">
        <div class="loading">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loading3.gif" AlternateText="loading" />
        </div>
    </telerik:RadAjaxLoadingPanel>

<asp:Panel runat="server" ID="panGameWaypoints" CssClass="GameWaypoints">
<table style="width:900px;margin:auto;">
        <tr>
            <telerik:RadListView runat="server" ID="lstGameWaypoints" AllowPaging="false" 
                OnDataBound="lstGameWaypoints_DataBound" 
                OnItemCreated="lstGameWaypoints_ItemCreated" 
                OnNeedDataSource="lstGameWaypoints_NeedDataSource">

                <EmptyDataTemplate>
                    <div style="width: 100px;margin: 10px auto auto auto;"><button class="AddWaypoint">Add Waypoint</button></div>
                </EmptyDataTemplate>
                <ItemTemplate>
                    <td>
                        <table style="border:1px solid black;width: 232px;height: 70px;margin:auto;">
                            <tr>
                                <td>
                                    Time:
                                </td>
                                <td>
                                    <%# string.Format("{0:h:mm tt}", Eval("DateTime")) %>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Date:
                                </td>
                                <td>
                                    <%# string.Format("{0:d}", Eval("DateTime")) %>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Chip Stack:
                                </td>
                                <td>
                                    <%# string.Format("{0:C}", Eval("ChipStack")) %>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Notes:
                                </td>
                                <td>
                                    <%# Eval("Notes") %>
                                </td>
                            </tr>
                            <tr>    
                                <td colspan="2" style="text-align:right;">
                                    <asp:Button runat="server" ID="btnDelete" CssClass="deleteButton" CommandArgument='<%# Eval("WaypointID") %>' CommandName="Delete" Text="X" OnClientClick="return confirm('Are you sure you want to delete this waypoint?');" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </ItemTemplate>
            </telerik:RadListView>
    </tr>
</table>
</asp:Panel>

I created a little test case (included below) to see if I could reproduce your issue, and there were three main differences between your implementation and mine:

1. I didn't specify a RadAjaxLoadingPanel
2. I didn't specify any ClientEvents (i.e. RequestStart, RequestEnd)
3. I didn't use an OnClientClick confirm dialog

Solution #1

After going through and adding each of these to my test case, I discovered that there was an issue using a confirm dialog with the RadAjaxManager. A little research provided the following solution:

Change your OnClientClick code to the following:

OnClientClick="if(!confirm('Are you sure you want delete this?')) return false;"

Does this fix your issue?

Here's some documentation on the issue:
www.telerik.com/help/aspnet-ajax/ajax-confirmation.html

The above should fix your problem, but if not try temporarily removing the RequestStart and RequestEnd client events, and continue to peel "extras" until you find the problem.

Here is a test case that works as expected:

ASPX:

<telerik:RadAjaxManager ID="rda" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="pnlTest">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlTest" />
            </UpdatedControls>              
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:Panel ID="pnlTest" runat="server">
    <telerik:RadListView ID="lst" runat="server" OnItemCommand="lst_Command" OnNeedDataSource="lst_NeedDataSource">
        <ItemTemplate>
            <%#Eval("Test")%>
            <asp:Button ID="btnDelete" runat="server" CommandArgument='<%#Eval("Test")%>' OnClientClick="if(!confirm('Are you sure you want delete this?')) return false;" CommandName="Delete" Text="Test" />
        </ItemTemplate>
    </telerik:RadListView>
    <asp:Label ID="lblCommandArg" runat="server"></asp:Label>
</asp:Panel>

Code-behind:

protected void lst_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("Test", typeof(string));

    DataRow row = table.NewRow();
    row.SetField<string>("Test", "Testing");
    table.Rows.Add(row);

    row = table.NewRow();
    row.SetField<string>("Test", "Testing again");
    table.Rows.Add(row);

    lst.DataSource = table;
}

protected void lst_Command(object sender, RadListViewCommandEventArgs e)
{
    lblCommandArg.Text = e.CommandArgument.ToString();
}

Using RadAjaxPanel instead of RadAjaxManager

Looking at your code, it looks like the easiest solution might be to use the RadAjaxPanel instead of the RadAjaxManager. I'm not sure if this is an option for you, but that's probably the easiest way to get your code working.

Use a RadAjaxPanel for panGameWaypoints instead of a regular Panel, which will ensure that everything contained within will use AJAX:

<telerik:RadAjaxPanel ID="panGameWaypoints" runat="server">
    <telerik:RadListView ID="RadListView1" runat="server" ... >
</telerik:RadAjaxPanel>

Did you try to add following code to Page_Init event ?

RadListView1.OnDataBound += new EventHandler(lstGameWaypoints_DataBound);
RadListView1.OnItemCreated += new EventHandler(lstGameWaypoints_ItemCreated);
RadListView1.OnItemCommand += new EventHandler(lstGameWaypoints_ItemCommand);

This should hook your events on each postback.

I think you need to tell RadAjaxManager to update the list from itself...? That makes no sense but try adding this to your RadAjaxManager:

<telerik:AjaxSetting AjaxControlID="lstGameWaypoints">
   <UpdatedControls>
      <telerik:AjaxUpdatedControl ControlID="lstGameWaypoints" LoadingPanelID="RadAjaxLoadingPanel1" />
   </UpdatedControls>
</telerik:AjaxSetting>

That way the RadListView will rewire it's events.

I don't thing you need to add

<telerik:AjaxSetting AjaxControlID="panGameWaypoints">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="panGameWaypoints" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>

Use this instead of above

<telerik:AjaxSetting AjaxControlID="lstGameWaypoints">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lstGameWaypoints" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>

and i don't see lstGameWaypoints ItemCommand event is wired and you also can use OnItemDeleting event insted of itemcommand.

I think the problem is on the OnClientClick event you attached on the btnDelete.

I tried to simulate your situation, and I've replaced the Button with a RadButton (you're in a Telerik environment, right?), that expose the event OnClientClicking. So I've created a js function:

function RadConfirm_Delete(sender, args)
{
    var callBackFunction = Function.createDelegate(sender, function (shouldSubmit)
    {
        if (shouldSubmit)
        {
            this.click();
        }
    });

    radconfirm("Are you sure you want to delete this waypoint?", callBackFunction, 350, 100, null, "Confirm delete");
    args.set_cancel(true);
}

and I've setted the RadButton like:

<telerik:RadButton runat="server" ID="btnDelete" CssClass="deleteButton" CommandArgument='<%# Eval("WaypointID") %>' CommandName="Delete" Text="X" OnClientClicking="RadConfirm_Delete" />

All seems to work right.

Let me know!