Using PanelBar item as a delete button, need client side confirm

[drpcken]

Basically I have a RadPanel bar I want to use as a delete button.  I have the following PanelBar, take note of the onitemclick property:

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" AppendDataBoundItems="True"
                Skin="Web20" Width="198px" onitemclick="RadPanelBar1_ItemClick">
                <CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
                <Items>
                    <telerik:RadPanelItem runat="server" Expanded="True" Text="Employees" SelectedCssClass=""
                        ExpandedCssClass="" PreventCollapse="True" Value="Employees">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="Add" SelectedCssClass="" CssClass="thickbox"
                                NavigateUrl="CensusDetails.aspx?TB_iframe=true&height=550&width=600" title="Add New Employee">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Terminate" SelectedCssClass=""
                                Value="Terminate">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Import (coming soon)" SelectedCssClass="">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Company" Value="Company" PreventCollapse="True">
                    </telerik:RadPanelItem>
                </Items>
                <ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
            </telerik:RadPanelBar>

When any item is clicked, this server side code runs and checks the value of each item, if the value of the item is Terminate then it runs a delete method and deletes any items inside a radGrid on the same page:

    protected void RadPanelBar1_ItemClick(object sender, RadPanelBarEventArgs e)
    {
        switch (e.Item.Text)
        {
            case "Terminate":
                {
                    foreach (GridDataItem row in CenusGrid.SelectedItems)
                    {

                       TerminateEmployees(Convert.ToInt32(row.GetDataKeyValue("CensusID")));
                    }

                    break;
                }
        }

        CenusGrid.DataBind();
    }

This works really well.  I wanted to add a confirm dialog to the mix so when they press the Terminate link it will confirm that they will indeed want to delete the selected records from the grid.  Usually I just add a client onclick event to buttons or links but I didn't see anything like that for the individual panel items.  So I put this in my PageLoad to add the attribute:

RadPanelItem radTerminate = RadPanelBar1.Items.FindItemByValue("Employees");
            switch (radTerminate.Items.FindItemByValue("Terminate").Value)
            {
                case "Terminate":
                    {
                        radTerminate.Items.FindItemByValue("Terminate").Attributes.Add("onclick", "javascript:return confirm('Are you sure you want to delete this record?')");
                        break;
                    }
            }

This also works and I get a confirmation alert, however no matter what I press it still runs the serverside code and deletes the record.  Even if I press CANCEL it still deletes the record. 

Is there a way to get this to work with an alert even if I use the RadPanel?

[Princy]

Hi,

I hope the better way to achieve the scenario is attaching function to OnClientItemClicking of RadPanelBar, so that you can check whether the clicked item is "Terminate" or not and cancel the PostBack if confirm returns false. See the example:

ASPX:

<telerik:RadPanelBar ID="RadPanelBar2" runat="server" OnClientItemClicking="OnClientItemClicking" onitemclick="RadPanelBar2_ItemClick">
    <Items>
      . . .
    </Items>
</telerik:RadPanelBar>

JavaScript:

<script type="text/javascript">
function OnClientItemClicking(sender, eventArgs)
{
   var item = eventArgs.get_item();
   if (item.get_text()== 'Terminate')
   {
      var proceed = confirm("Do you want to delete the selected records?");
      if (!proceed)
      {
         eventArgs.set_cancel(true);
      }
      else
      {
         eventArgs.set_cancel(false);
      }
   }
}
</script>

Thanks,
Princy.

[drpcken]

Perfect!  Thank you so much!