Question

我正在使用Kendo UI网格，我想更改用户单击“删除”按钮从网格中删除行时显示的对话框。我不想使用默认的浏览器确认对话框，而是使用Kendo Window作为确认对话框。有没有办法使用MVC包装器提供我自己的对话框？

我发现以下example显示了如何直接使用JavaScript完成此操作。我需要使用Kendo UI for MVC的相同功能。

我正在使用Kendo UI的2012.3.1114版本，以防万一。

Answer 1

这是一个使用带有MVC助手的kendo网格，弹出窗口的kendo窗口和javascript将它们绑定在一起的示例：

网格的MVC助手：

<div class="kendo-grid">
        @(Html.Kendo().Grid<WidgetsViewModel>()
              .Name("gridWidgets")
              .Sortable(s => s.Enabled(true))
              .DataSource(ds => ds
                  .Ajax()
                  .ServerOperation(true)
                  .Read(read => read.Action("GetWidgets", "Widget",
                      new { widgetID = Model })))
              .Columns(columns =>
              {
                  columns.Bound(m => m.WidgetID)
                      .Sortable(false)
                      .Hidden();
                  columns.Bound(m => m.WidgetDescription)
                      .Title("Description");
                  columns.Bound(m => m.WidgetStatus)
                      .ClientTemplate("<a style='cursor:pointer' onclick='removeWidget(#= WidgetID #);'><img src='" + Url.Content("~/Images/deleteSmall.png") + 
                                      "' height='20px' width='20px' /></a>")
                      .Title("Delete");

              })
             .Scrollable(o => o.Height(450))
         )
</div>

使用Javascript：

function removeWidget(widgetID) {
    var deleteFunction = function () {
        $.ajax({
        url: '@Url.Action("RemoveWidget", "Widget")',
        type: 'POST',
        data: {
            widgetID: widgetID,
        },
        success: function (data) {
            var grid = $("#gridWidgets").data("kendoGrid");
            grid.dataSource.page(1);
            grid.dataSource.read();
        },
        error: function (request, status, err) {
            alert(err);
        }
        });
    }
    return confirmDialogYesNo("Are you sure you want to delete this widget?", "Please Confirm", deleteFunction);
}

function confirmDialog(message, title, buttons) {

    var index;
    var contentHTML = "<div style='text-align: center;'>" + message + "<br/>&nbsp;<br/>";

    for (index = 0; index < buttons.length; ++index) {
        contentHTML += "<button class='btn-class-confirm-" + index + "' style='min-width:50px;'>" + buttons[index].text + "</button>";
    }
    contentHTML += "</div>";

    var kendoWindow = $("<div />").kendoWindow({
        title: title,
        resizable: false,
        modal: true,
        width: 280
    });

    kendoWindow.data("kendoWindow")
        .content(contentHTML)
        .center().open();

    for (index = 0; index < buttons.length; ++index) {
        var b = buttons[index];
        kendoWindow
            .find('.btn-class-confirm-' + index)
            .click(b, function (e) {
                //console.log(e.data.text);
                if (e.data.onClick != null) {
                    if (e.data.argument == null)
                        e.data.onClick();
                    else
                        e.data.onClick(e.data.argument);
                }
                kendoWindow.data("kendoWindow").close();
            })
            .end();
    }
    return false;
}

function confirmDialogYesNo(message, title, onClickYes, yesText, noText) {
    yesText = (yesText == null) ? "Yes" : yesText;
    noText = (noText == null) ? "No" : noText;
    confirmDialog(message, title, [{ text: yesText, onClick: onClickYes }, { text: noText }]);
}

如何使用ASP.NET MVC包装器自定义Kendo UI网格删除确认对话框？

1 个答案: