Question

Kendo MVC 从模板调用 javascript

2018-06-01

1040

model-view-controller kendo-ui

我有一个 telerik mvc 网格（不是 JAVASCRIPT），其中启用了 groupable()。我要分组的列中有一个链接。没什么大不了的，因为这在列模板上很容易。但是，标题模板不允许访问与分组设置不同的列中的数据，并且我们的链接都基于“ID”列（隐藏），而分组位于“名称”列上。
我可以从标题模板调用 javascript 来获取我需要的数据吗？这是一个有效的示例

    .Groupable()
                .Selectable()
                .Columns(columns =>
                {
                columns.Template(@<text></text>).ClientTemplate("#= rowCommandsUndelete(data, false, true) #").Title("&nbsp;").Width(100);
                    columns.Bound(m => m.Active)
                        .Title("Active?")
                        .ClientTemplate("#= ActiveState(data.Active) #")
                        .Width(85);
                    columns.Bound(m => m.Origin.Name)
                        .ClientGroupHeaderTemplate("<a href='www.google.com'>link </a>")
                        .ClientTemplate("<div id='#=data.ID#'></div><a href='/Origins?id=#=data.Origin.ID#'>#=data.Origin.Name#</a>")  //Empty div with "data.ID" is required (see JavaScript section below)
                        .Width(300);

这不起作用并给出错误：未捕获的类型错误：无法读取未定义的属性“ID”

     columns.Bound(m => m.Origin.Name)
                        .ClientGroupHeaderTemplate("<a href='www.google.com'> #=data.Origin.ID#</a>")

Answer 1

最终答案要感谢 sandro。在 ajax 页面上，在列上使用 clientgroupheadertemplate，如下所示：

     columns.Bound(m => m.Origin.Name)
                        .ClientGroupHeaderTemplate("#=buildHeader( value )#")

buildheader 是一个 javascript 函数，value 是标题中的内置值。这是 javascript 函数：

  function buildHeader(value) {
    return "<h4><u><a href='\origins?OriginName=" + encodeURIComponent(value) + "'>" + value + "</a></u></h4>";
}

value 包含来自列的字符串，我能够通过这种方式创建链接并将其设置为列标题。我还成功地从页脚调用了 javascript，以在计算后触发某些操作。

Answer 2

这是 groupHeaderTemplate 配置。

示例：

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "link",
      groupHeaderTemplate: "<a href=#=value# target='_blank'>google.com</a>"
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", link: "https://google.com" },
      { name: "John Doe", link: "https://google.com" }
    ],
    group: { field: "link" }
  }
});