[Solved] Confirmation box in Custom command

[Howard]

Dear Telerik Team,

I have a grid with custom command and I want to have a confirmation box after the user presses that button. This is the code I've written,  but its not working.

Controller:

public ActionResult BookingHistoryDriver()
        {
            return PartialView("_BookingHistoryDriver");
        }

        [GridAction]
        public ActionResult _BookingHistoryDriver()
        {
            //get the personnel id
            UserInfo ui = (UserInfo)Session["UserInfo"];

            SelectHire _selectHire = new SelectHire();
            var _bookingHistoryList = _selectHire.HireBookingHistory(ui.PersonnelId);
            return View(new GridModel { Data = _bookingHistoryList });
        }

        [GridAction]
        public ActionResult _BookingCancel()
        {
            //cancel booking to do

            //get data to bind grid again
            SelectHire _selectHire = new SelectHire();
            var _bookingHistoryList = _selectHire.HireBookingHistory(1);
            return View(new GridModel { Data = _bookingHistoryList });

        }

View:

@(Html.Telerik().Grid<HireBookingHistoryModel>()
                            .Name("BookingHistory")
                            .Sortable(sorting => sorting.Enabled(true))
                            .Pageable(paging => paging.Enabled(true).PageSize(18))
                            .Footer(true)
                            .DataKeys(keys => keys.Add(f => f.BOOKING_ID))
                            .DataBinding(dataBinding => dataBinding.Ajax().Select("_BookingHistoryDriver", "Hire"))
                            .Reorderable(reorder => reorder.Columns(true))
                            .Resizable(resize=>resize.Columns(true))
                            .Columns(columns =>
                                {
                                    columns.Bound(f => f.BOOKING_ID).Title("Booking");
                                    columns.Bound(f => f.FLEET_USER_CODE).Title("Fleet no");
                                    columns.Bound(f => f.REGISTRATION).Title("Registration");
                                    columns.Bound(f => f.START_END_DATE).Title("Dates");
                                    //columns.Bound(f => f.ORIGIN).Title("Origin");
                                    columns.Bound(f => f.DESTINATION).Title("Destination");
                                    columns.Bound(f => f.STATUS).Title("Status");
                                    columns.Command(commands => commands
                                                    .Custom("cancelBooking")
                                                    .Text("Cancel")
                                                    .DataRouteValues(route => route.Add(b => b.BOOKING_ID).RouteKey("bookingId"))
                                                    .Ajax(true)
                                                    .Action("_BookingCancel", "Hire"))
                                           .Title("Commands")
                                           .HtmlAttributes(new { style = "text-align:center" })
                                           .HeaderHtmlAttributes(new { @style = "font-weight:bolder" });
                                })
)

<script type="text/javascript">
    $(document).ready(function () {
        $("a.t-button.t-grid-cancelBooking.t-ajax").click(function (event) {
            debugger
            var link = $(this)[0];

            if (confirm("Are you sure you want to cancel?")) {
                $.post(link.href, function (data) {
                    var $grid = $("#Grid").data("tGrid");
                    $grid.rebind();
                });
            }

            return false;
        });
    });
</script>

When I click on the button, it is not triggering the javascript, but it goes to the action method.

Please let me know, what am I missing here?

Cheers

[Daniel]

Hi Niroj,

You should add a handler to the Grid's OnCommand client side event in order to be able to prevent it. For example:

function onCommand(e) {
    //if the custom command is triggered
    if (e.name == 'cancelBooking') {
        if (!confirm("Are you sure you want to cancel?")) {
            // prevent the request
            e.preventDefault();
        }
    }
}

If you need to perform some action after the command is complete, you should add a handler to the OnComplete event e.g.

function onComplete(e) {
    if (e.name == 'cancelBooking') {
        var data  = e.response;
        var $grid = $(this).data("tGrid");
        $grid.rebind();
    }
}

Regards,
Daniel
the Telerik team

[Howard]

Daniel,

Genius !!!

Cheers

[Howard]

Hi Daniel,

There's one more complexity. how do I manage that button according to a right? Lets say for example, I've a right in Session that I need to check for the user's to get that confirmation.

When the user clicks the button, it needs to check the right in Session, if the user has no right, it should popup with a message saying "you are not authorized" or something of that nature and if the user has right then it should come up with a popup saying "are you sure"?

One thing is that the button should not be ghosted or hidden, i.e. the user should be allowed to click on it.

Please let me know, how to accomplish this scenario.

Thank you

[Daniel]

Hello again Niroj,

You could add different commands based on the Session parameter if the button shouldn't be hidden e.g.

columns.Command(commands =>
   {
       if (hasRights)
       {
           commands.Custom("cancelBooking")
                   .Text("Cancel")
                   ........
       }
       else
       {
           commands.Custom("unauthorized")
                   .Text("Cancel")
                   ........
       }
   });

function onCommand(e) {
    if (e.name == 'cancelBooking') {
        if (!confirm("Are you sure you want to cancel?")) {
            e.preventDefault();
        }
    }
    if (e.name == 'unauthorized') {
        alert('you are not authorized');
        e.preventDefault();
    }
}

Another option is to make an Ajax request to determine if the user is authorized and take the appropriate action in the callback.

Greetings,
Daniel
the Telerik team