[Solved] Show confirm box on click of cancel button of the Grid edit pop-up

[Avishek]

Hi,
We have a Telerik MVC Grid with GridEditMode set to ‘PopUp’. We want to show a confirmation message to the user when he/she tries to close the edit pop-up without saving her changes.

The grid definition looks like:

    <%= Html.Telerik().Grid<CustomPopUpForm.Models.Customer>()

            .Name("Customers")

            .DataKeys(dataKeys => dataKeys.Add(c => c.CustomerID))

            .DataBinding(dataBinding => dataBinding.Ajax()

                .Select("_Select", "Home")

                .Update("_Update", "Home"))

            .Columns(columns =>

            {

                columns.Bound(c => c.CustomerID).Width(130);

                columns.Bound(c => c.CompanyName).Width(250);

                columns.Command(c => c.Edit()).Width(100);

            })

            .Editable(editing => editing.Mode(GridEditMode.PopUp))

            .Pageable()

            .Sortable()

            .ClientEvents(events => events.OnEdit("handlePopupOpen"))

    %>

And the client side event handler is:

        function handlePopupOpen(e) {

            $("#" + e.currentTarget.id + "PopUp").bind("close", function (event) {

 

                if (!confirm('Are you sure you want to close this form?')) {

                    event.stopPropagation();

                    event.preventDefault();

                }

            });

        }

 

Although this OnClose event handler is getting fired on closing of the edit pop-up and confirmation message gets displayed to the user, clicking ‘Cancel’ in the confirmation message does not prevent closing of the edit pop-up. On clicking ‘Cancel’, the edit pop-up gets closed but the overlay of the main view does not get removed.

We need to prevent closing of the edit pop-up and maintain the main view overlay if user clicks ‘Cancel’ in the confirmation message. We are using Telerik.Web.MVC version 2010.3.1110.235. Can anyone provide some help on this...

Thanks
Avishek