How to implement javascript confirmation on a context menu of a grid control

[Joy]

Hi,

I have a context menu of 2 actions, create success message and create faliled message.  I want to add javascript confirmation to ask the user "are you sure you want to create success message for this Item <item name>?".  If the user answers Yes, the request will be posted back to the server, if the user answers No, I want to cancel the postback.  Can you provide code snippet how to do this? 

If I implement this code, will it be an issue in the future if your product is upgraded?  meaning that this is too much a custom code that depends on specific version?

Thanks.

[Veli]

Hi Joy,

Implementing this functionality is straightforward using RadGrid and RadContextMenu. The javascript is only a couple of lines and it uses only public client APIs, so you can be safe it will be forward compatible. You can use RadContextMenu.OnClientItemClicking event for that purpose:

<telerik:RadContextMenu ID="RadContextMenu1" runat="server"
    OnClientItemClicking="confirmMenuAction"
    OnItemClick="RadContextMenu1_ItemClick">
    <Items>
        <telerik:RadMenuItem Text="Create Success message" Value="Success">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Create Failure message" Value="Failure">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadContextMenu>

And the javascript:

function confirmMenuAction(sender, args)
{
    //the target is an element inside a grid row
    var target = args.get_targetElement();
    //we need to find the row element
    var row = Telerik.Web.UI.Grid.GetFirstParentByTagName(target, "tr");
    //have the table view client object in RadGrid generate its items
    $find(row.id.split("__")[0]).get_dataItems();
    //and retrieve the GridDataItem client object
    var dataItem = $find(row.id);

    //the row ID is retrieved from the ClientDataKeyNames of the master table.
    var rowId = dataItem.getDataKeyValue("ID");

    var msg = String.format("Are you sure you want to delete item with ID: {0}", rowId);
    //the confirmation result decides whether the current clicking event is canceled
    args.set_cancel(!confirm(msg));

    //if the event is canceled, no postback will be performed and we can close the menu
    if (args.get_cancel())
    {
        sender.hide();
    }
}

Test page is attached.

Veli
the Telerik team