如何更改Kendo MVC网格的编辑命令模板？

Question

我正在使用Kendo UI for ASP.NET MVC。我有一个带编辑命令的网格。编辑命令的默认外观是“按钮”，我想将其更改为链接。但是，命令没有Template()方法。那么，我如何将编辑命令按钮更改为链接呢？

Telerik有选项可以创建自己的自定义命令，如此处所述。但我的网格配置为使用GridEditMode.Popup，它可以与内置的编辑命令很好地配合使用。如果我创建自定义命令，那么我想我必须连接弹出窗口和其他所有东西。

我只是想将“按钮”更改为链接？

 @(Html.Kendo().Grid<UI.Models.GridVM>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.CampaignID)                    
            columns.Bound(p => p.CampaignStatus);  
            columns.Command(command => command.Edit().Text("Edit Me")); // How do i change this to link??
        })            
        .Editable(editable => editable
            .Mode(GridEditMode.PopUp)
            .TemplateName("CampaignEdit")
            .Window(w =>
            {
                w.Width(400);
                w.Title("Edit Details");
            }))
        .Filterable()
        .Pageable()
        .Navigatable()
        .Sortable()                      
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .PageSize(20)
            .Model(model => model.Id(p => p.CampaignID))
            .Read(read => read.Action("GetCampaigns", "Home"))
            .Update(update => update.Action("UpdateCampaign", "Home"))
        )            
    )

更新1
@Steve Greene 谢谢。您的方法在主网格上确实有效。但是我还有一个包含编辑链接的子详细网格。该方法对于详细网格不起作用。Kendo抛出错误。
我认为我们必须转义模板表达式，以在子/详细上下文中进行评估。但我不确定语法是什么。

 @(Html.Kendo().Grid<UI.Models.GridVM>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.CampaignID)                    
        columns.Bound(p => p.CampaignStatus);  
        columns.Template(@<text></text>)
               .ClientTemplate(@"<a class=""k-grid-edit"" href=""\#"">Edit Master</a>"); 
        //Worked in master grid
    })            
    .Editable(editable => editable
        .Mode(GridEditMode.PopUp)
        .TemplateName("CampaignEdit")
        .Window(w =>
        {
            w.Width(400);
            w.Title("Edit Details");
        }))
    .Filterable()
    .Pageable()
    .Navigatable()
    .Sortable()                      
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .PageSize(20)
        .Model(model => model.Id(p => p.CampaignID))
        .Read(read => read.Action("GetCampaigns", "Home"))
        .Update(update => update.Action("UpdateCampaign", "Home"))
    )
    .ClientDetailTemplateId("detailtemplate")       
)
<script id="detailtemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<UI.Models.DetailGridVM>()
        .Name("detailgrid_#=CampaignID#")
        .Columns(columns =>
        {
            columns.Bound(o => o.CampaignDetailID);             
            columns.Bound(o => o.Notes);                
            columns.Bound(o => o.CreatedBy);
            columns.Template(@<text></text>)
                   .ClientTemplate(@"<a class=""k-grid-edit"" href=""\#"">Edit Detail</a>"); 
            // Does not work in detail grid
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(5)
            .Read(read => read.Action("GetCampaignDetails", "Home", new { campaignID = "#=CampaignID#" }))
            .Update(update => update.Action("UpdateCampaignDetails", "Home"))
            .Model(model => model.Id(m => m.CampaignDetailID))
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate())
 </script>

- LP13

Answer 1

使用具有k-grid-edit类的列模板（对于删除，请使用k-grid-delete）：

    .Columns(columns =>
    {
        columns.Bound(p => p.CampaignID)                    
        columns.Bound(p => p.CampaignStatus);  
        columns.Template(@<text></text>).ClientTemplate(@"<a class=""k-grid-edit"" href=""\#"">Edit</a>").Width(30);
        columns.Template(@<text></text>).ClientTemplate(@"<a class=""k-grid-delete"" href=""\#"">Delete</a>").Width(30);
    })   

或对于较小的按钮和Bootstrap：

    column.Template(@<text></text>).ClientTemplate(@"<a class=""btn btn-info btn-xs k-grid-edit"" href=""\#"">Edit</a>").Width(30);
    column.Template(@<text></text>).ClientTemplate(@"<a class=""btn btn-danger btn-xs k-grid-delete"" href=""\#"">Delete</a>").Width(30);

- Steve Greene

---

不确定嵌套会如何运作。可能需要检查渲染的内容或使用这种技术：http://www.telerik.com/forums/template-inside-template - Steve Greene

找到了。为了更改 Detailgrid 模板，我必须使用转义字符。.ClientTemplate(@"<a class=""k-grid-edit"" href=""\\\\#"">编辑详情</a>"); - LP13

你知道如何在按钮被点击时，网格如何改变文本或图标吗？谢谢。 - jjroman

尝试使用一些jQuery编辑事件。http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit - Steve Greene

@SteveGreene，感谢您的回答。如果我有一个网格列是模板，我如何在其中放置一个绑定数据（columns.Bound()…）和自定义命令（command.custom()…）？ - mars-o

@mars-o 你只是想显示其他字段吗？你可以添加一个 <span> <h1> 等等。哈希语法也可以使用：.ClientTemplate(@"<span>#= MyField #</span><a class=""btn btn-info btn-xs k-grid-edit"" href=""\#"">Edit</a>") - Steve Greene

Answer 2

例如，您可以仅使用 css 来实现这一点：

td[role=gridcell] > a.k-button.k-button-icontext.k-grid-edit :hover {
    cursor: pointer;
}
td[role=gridcell] > a.k-button.k-button-icontext.k-grid-edit {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: transparent;
    border: none;
}

- layonez