Question

我正在使用以下代码在Kendo Grid中显示来自服务器的数据。

工作正常。

我想在每行的最后一个单元格中放置两个超链接，但只能使用一个。

我希望EDIT和DELETE链接在同一个单元格中。

我怎样才能做到这一点？

CODE

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(u => u.USERNAME);
    columns.Bound(u => u.PASSWORD);
    columns.Bound(u => u.ROLE);
    columns.Bound(u => u.STATUS);
    columns.Template(c => Html.ActionLink("Edit", "Edit", new { id = c.ID }));

}
)
.Pageable()

）

Answer 1

有几种方法可以做到这一点。

首先，您可以使用网格配置中的内置编辑/删除选项

像这样：

 columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();                         
                });

然后只需连接编辑配置并适当地销毁delete命令。

或者，您可以使用以下两种方法之一来模拟这些：

第一个内联模板：

columns.Bound(c => c.ID).ClientTemplate("<a href='Edit/#=data.ID#'>Edit Link #=data.ID#</a> 
<a href='Delete/#=data.ID#'>Delete Link #=data.ID#</a>")

所以这只是绑定到一个列，并根据您的要求使用标准的html和javascript添加模板（如果需要）。这对于简单的事情来说很好，但是如果你有更复杂的templates然后导致第二种方法创建一个模板并调用它，那么它可以非常笨重：

columns.Bound(c => c.ID).ClientTemplate("#=getButtonTemplate(data,'buttonsTemplate')#")

然后像这样创建你的模板：

<script id="buttonsTemplate" type="text/x-kendo-template">
<div class='btn-group'>
<a class="btn btn-primary" href='@Url.Action("{edit action}", "controller")/#=ID#'>Edit Link #=ID#</a> 
<a class="btn btn-danger" href='@Url.Action("{delete action}", "controller")/#=ID#'>Delete Link #=ID#</a> 
<div> 

</script>

然后是getButtonTemplate函数：

function getButtonTemplate(data, templateName) {
    var templateObj = $("#" + templateName).html();
    var template = kendo.template(templateObj);
    return template(data); 
}

因此，让我用第二种方法解释这里发生了什么。

我没有将列中的html模板化，而是将其提取为两个components，以获得更好的单词。

我们使用 getButtonTemplate 函数在数据项和模板的id中传递2个参数。此函数只是将传递的数据对象加载到模板中，并且kendo magic渲染html并根据需要注入值。有关此主题的更多信息，请查看kendo演示站点。

模板元素可以是html和javascript的混合，所以如果你需要在模板中应用一些逻辑，可以在这里完成。有关此主题的更多信息，请再次参阅kendo网站。

我个人更喜欢使用第二种方法进行此客户端模板操作，因为它更容易管理和更改，而不会使用流氓哈希或括号中断代码。

如果您需要更多信息，请告诉我，我会为您更新答案。

单列中的Kendo Grid多个超链接

1 个答案: