jquery - Telerik ASP .NET MVC Grid - 添加自定义删除按钮

Question

当前使用 Telerik ASP .NET MVC 控件版本 2011.2.712

大家好，我正在尝试实现一个自定义删除按钮。原因是我的网格行上还有一些其他自定义命令，我想将它们全部放在一起。我还想指出，网格嵌入在包含其他可更新网格的较大显示屏上的选项卡中。我的网格定义如下:

Html.Telerik().Grid<CommentDto>()
    .Name("ReportCommentGrid")
    .DataKeys(keys => keys.Add(o => o.Id))
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Select("SelectReportComment", "DebtRisk", new { id = Model.ReportCommentId })
        .Delete("DeleteReportComment", "DebtRisk")
        )
    .Columns(columns =>
    {
        columns.Bound(o => o.AssetGroupTypeCode).Title("Group").Width("10em").ReadOnly();
        columns.Bound(o => o.Text).Title("Comment").Width("25em").ReadOnly();
        columns.Bound(o => o.Id).ClientTemplate(
                "<# if(CreatedBy != null) { #>"
                + "<a class='t-button' href='#' onclick=\"LaunchCommentEditWindow('/DebtRisk/EditReportComment/<#= Id #>')\">Edit</a>"
                + "<a class=\"t-button t-grid-delete\" href=\"#\">Delete</a>"
                + "<# }  #>"
        ).Width("15em").Title("Related Data").ReadOnly(true).HtmlAttributes(new { @class = "t-last"})
    })
    .ClientEvents(events => events.OnRowDataBound("ReportCommentGrid_onRowDataBound"))
    .Footer(false)
    .Render();

我在“ReportCommentGrid_onRowDataBound”事件处理程序上有以下 JavaScript:

function  ReportCommentGrid_onRowDataBound(e)
{
    $(e.row).find('.t-grid-delete').click(function (ev)
    {
        ev.stopPropagation();
        ev.stopImmediatePropagation();
        ev.preventDefault();
        var grid = $("#ReportCommentGrid").data('tGrid');
        grid.deleteRow($(this).closest('tr'));

        return false;
    });
}

当我运行代码并选择“删除”按钮时，我在“grid.deleteRow”上收到“对象不支持此属性或方法”错误。有谁对为什么会发生这种情况有任何建议

Answer 1

我从来不知道如何在命令列之外实现“命令”按钮。我能够使用 2011 年第三季度版本(当前为测试版)中提供的新自定义命令将我的自定义编辑按钮实现为自定义命令。

此自定义编辑按钮会启动一个弹出窗口，其中包含网格行数据的编辑表单。我无法让内置的弹出编辑器为我工作。下面是代码。

自定义编辑按钮定义:

commands.Custom("EditReportComment")
.Text("Edit")
.Ajax(true)
.Action("EditReportComment","DebtRisk")
.HtmlAttributes(new { @class="edit-report-comment" })
.DataRouteValues(route => route.Add(o => o.Id).RouteKey("id"))
;

将行特定单击事件附加到编辑按钮所需的客户端事件:

.ClientEvents(events => events.OnRowDataBound("ReportCommentGrid_onRowDataBound"))

点击连接:(从窗口 URL 的按钮定义中提取 href)

function ReportCommentGrid_onRowDataBound(e)
{
    var editLink = $(e.row).find('.edit-report-comment')
    editLink.click(function (ev)
    {
        ev.stopPropagation();
        ev.stopImmediatePropagation();
        ev.preventDefault();
        LaunchCommentEditWindow(editLink.attr("href"));
        return false;
    });
}

弹出窗口启动器:

function LaunchCommentEditWindow(editUrl)
{
    var newWindow = $("<div id='EditReportComment'></div>").tWindow(
        {
        title: 'Edit Comment',
        contentUrl: editUrl,
        modal: true,
        resizeable: false,
        scrollable: false,
        width: 550,
        height: 200,
        onClose: function (e){ e.preventDefault(); newWindow.data('tWindow').destroy(); }
    });
    newWindow.data("tWindow").center().open();
    return false;
}