Jquery Telerik ASP.NET MVC网格-添加自定义删除按钮

目前正在使用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();

---

当我运行代码并选择“删除”按钮时，我在“grid.deleteRow”上得到一个“Object不支持此属性或方法”错误。如果不添加命令，telerik网格不会添加支持该操作的javascript，那么有人对为什么会发生这种情况有任何建议吗。您的删除链接是否需要转到控制器上的操作？为什么要使用javascript？

在2011年第三季度测试版中，提供了自定义列命令选项。请看演示

Html.Telerik（）.Grid（）
.姓名（“雇员”）
.HtmlAttributes（新的{style=“float:left；”}）
.列（列=>
{                
colums.Command（commands=>commands
.自定义（“编辑”）
.文本（“编辑”）
.SendState（错误）
.DataRouteValue（路由=>
{                        
route.Add（o=>o.EmployeeID）.RouteKey（“orderID”）；
})                    
.Ajax（真）
.Action（“actionresult”、“mycontroller”）；
colums.Command（commands=>commands
.自定义（“删除”）
.文本（“删除”）
.SendState（错误）
.DataRouteValue（路由=>
{
route.Add（o=>o.EmployeeID）.RouteKey（“orderID”）；
})
.Ajax（真）
.Action（“actionresult”、“mycontroller”）；
列绑定（o=>o.EmployeeID）；
列绑定（o=>o.EmployeeID）；
})
.Sortable（）
.可过滤（）
.PrefixUrlParameters（假）
.Render（）；

---

%>

我从未想到如何在命令列之外实现“命令”按钮。我能够使用2011年第三季度发行版（目前为beta版）中提供的新自定义命令将我的自定义编辑按钮实现为自定义命令

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

自定义编辑按钮定义：

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"))

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

客户端事件需要附加行特定的点击事件编辑按钮：

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"))

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

单击wireup：（从窗口URL的按钮定义中提取href）

弹出窗口启动器：

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"))

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

函数启动CommentEditWindow（editUrl）
{
var newWindow=$（“”）。tWindow(
{
标题：“编辑评论”，
contentUrl:editUrl，
莫代尔：是的，
可调整大小：false，
可滚动：false，
宽度：550，
身高：200，
onClose:function（e）{e.preventDefault（）；newWindow.data（'tWindow'）.destroy（）；}
});
newWindow.data（“tWindow”）.center（）.open（）；
返回false；
}

网格嵌入在一个选项卡中，该选项卡是较大显示屏的一部分。我更喜欢使用Ajax更新网格。javascript模拟了加载网格数据时删除按钮点击事件的连接。我见过该版本，但我不确定它是否是可用的免费版本之一。另外，我刚刚运行了演示，在单击“Customer Deatils”按钮时收到了这个javascript错误：“console”未定义”。看起来可能还有一些问题需要解决。是的，它是免费的，完整版本将在11月初发布。我运行了样本，它运行良好。只需在视图中添加代码，如演示页所示。自定义命令仍需在“命令”列中定义。我想在命令列之外创建一个“delete”命令。不过，我可以使用新的自定义命令功能将“编辑”按钮移动到“命令”列中。请看下面我的答案。我假设您需要自己的编辑和删除按钮，如果这种情况下您不需要使网格可编辑。看我更新的答案实际上你的例子不是我想要的。然而，您最初的回答让我想到了2011年第三季度的测试版，它允许我在“columns.command”中实现我的自定义编辑命令。请参见下面我的答案中的示例。现在，两个命令显示在网格上的同一列中。