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 Q3 版本（当前为测试版）中提供的新自定义命令将自定义编辑按钮实现为自定义命令。

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

自定义编辑按钮定义：

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;
}

Answer 2

在 2011 年第三季度测试版自定义列命令选项可用。看演示here

Html.Telerik().Grid<UserManagement.Models.vmmodel>()
    .Name("setupEmployees")
   .HtmlAttributes(new { style = "float:left;" })
        .Columns(colums =>
        {                
                colums.Command(commands => commands
                .Custom("Edit")
                .Text("Edit")
                .SendState(false)  
                .DataRouteValues(route =>
                {                        
                    route.Add(o => o.EmployeeID).RouteKey("orderID");                        
                })                    
                  .Ajax(true)
                .Action("actionresult", "mycontroller"));

                colums.Command(commands => commands
                    .Custom("delete")
                    .Text("delete")
                    .SendState(false)
                    .DataRouteValues(route =>
                    {
                        route.Add(o => o.EmployeeID).RouteKey("orderID");
                    })
                      .Ajax(true)
                    .Action("actionresult", "mycontroller"));

            colums.Bound(o => o.EmployeeID);
            colums.Bound(o => o.EmployeeID);

        })

    .Sortable()
    .Filterable()        
    .PrefixUrlParameters(false)

    .Render(); 

%>

Answer 3

如果您不添加命令，telerik 网格将不会添加支持该操作的 javascript。无论如何，您的删除链接是否不仅需要在您的控制器上执行操作吗？为什么要使用 javascript？