Search code examples
javascriptasp.net-mvctelerik-gridtelerik-mvc

How to show confirmation box on delete in grid


When click on delete link, confirmation box has not been opened so please suggest me how to open confirmation box on delete?

On View page

@(Html.Telerik().Grid<QuoteModel>(Model.Quotes.Data)
                    .Name("quote-grid")
                    .Columns(columns =>
                    {
                        columns.Bound(x => x.QuoteSentence);
                        columns.Bound(x => x.Status)
                            .Width(100)
                       .Template(x => x.Status.ToString().ToLower())
                            .Centered();
                            columns.Bound(x => x.IsDelete)
                            .Template(x => Html.ActionLink(T("Admin.Common.Edit").Text, "Edit", new { id = x.Id }))
                            .ClientTemplate("<a href=\"Edit/<#= Id #>\">" + T("Admin.Common.Edit").Text + "</a>")
                            .Width(50)
                            .Centered()
                            .HeaderTemplate(T("Admin.Common.Edit").Text)
                            .Filterable(false);
                        columns.Bound(x => x.Id)
                             .Width(50)
                             .Centered()
                             .Template(x => Html.ActionLink(T("Admin.Common.Delete").Text, "Delete", new { id = x.Id }))
                             .ClientTemplate("<a href='' onclick='Deletemsg(#=Id#);return false;' id='#=Id#'>@T('Admin.Common.Delete')</a>")
                             .HeaderTemplate(T("Admin.Common.Delete").Text);

                    })
              .Pageable(settings => settings.Total(Model.Quotes.Total).PageSize(gridPageSize).Position(GridPagerPosition.Both))
                    .DataBinding(dataBinding => dataBinding.Ajax().Select("QuoteList", "Quote")
             )
                                            .ClientEvents(events => events.OnDataBinding("onDataBinding"))
                                            .EnableCustomBinding(true))

Java Script for delete

 function Deletemsg(id) {
        alert("hiiii");
        var ID = id;
        $("#dialog-confirm").dialog({
            resizable: true,
            height: 170,
            width: 400,
            modal: true,
            buttons: {
                '@T("Admin.Delete.Conform")': function () {
                    var id = ID;
                    window.location.href = 'Delete/' + id;
                },
                '@T("Admin.Delete.No")': function () {
                    $(this).dialog("close");
                }
            }
        });
    }

Dialog Box for confirmatio box

<div id="dialog-confirm" title='@T("admin.DeleteBox.Title")' style="display:none">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>"@T("Admin.Delete.Conform.Message") @T("Admin.Configuration.Catalog")"</p>
</div>

Solution

  •   .Template(x => Html.ActionLink(T("Admin.Common.Delete").Text, "Delete", new { id = x.Id }, new { onclick = "return confirm('Are you sure?');" }))