处理 kendo 网格中列的模板

Question

我一直在尝试在 kendoGrid.I 中的一个字段的模板中使用 if 和 else 有两个字段 "StatusDesc" 和 "newStatusDesc"。我想将其中一个值显示为锚标记。这显示正常，但如果你注意到为锚标记定义的 onclick，它有一个来自网格本身的字段，因为它必须打开另一个页面但是当我点击锚标记时，我的浏览器控制台显示：

uncaught ReferenceError: WEW6101 is not defined

实际上，如果我检查 firebug，它会显示以下值设置为我的锚标记参数，这是正确的，但我无法调用函数 "WEW6101"

onclick='openStatusReload(WEW6101)

  $("#Grid").kendoGrid({
        dataSource: TUEDataSource,
        autoBind: false,
        scrollable: false,
        sortable: {
            allowUnsort: false
        },
        //filterable: { mode: "row", style: "max-width:100px;" },
        //groupable: true,
        pageable: {
            refresh: true,
            buttonCount: 5,
            pageSizes: 5
        },
        dataBound: gridDataBound,
        columns:
            [
                { field: "newStatusDesc", hidden: true },
            { field: "StatusDate", title: "Status Date", width: 200, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
            { field: "Status", title: "Status", width: 150, filterable: { cell: { showOperators: true } } },
            { field: "LimitedDate", title: "Expiration Date", format: "{0:MM/dd/yyyy}", width: 150, filterable: { cell: { showOperators: true } } },
            {
                field: "StatusDesc", title: "Comments", width: 150,
                template: "#if(StatusDesc == '' && newStatusDesc!='' && newStatusDesc!= null  ) {#<a href='javascript:void(0)' class='margin-right10' onclick='openStatusReload(#=newStatusDesc#)'> #:newStatusDesc#</a>#} else{##:StatusDesc##}#", filterable: { cell: { showOperators: true } }
                // template: "<a href='javascript:void(0)' class='margin-right10' onclick='openPlayerTUEStatusReload(#=Tue_StatusDesc#)'>#=TueStatusDesc#</a>", filterable: { cell: { showOperators: true } }
            },
            ]
    });

Answer 1

根据@Quantastical 的评论，您缺少文本周围的引号，这是导致问题的原因，但下面的答案可能有助于解决这个问题以及您需要使用 [=40] 做的任何未来 templating =] 网格。

我认为这个道场可以帮助你：http://dojo.telerik.com/AVeBU

我发现像这样进行内联模板可能很困难，所以更喜欢提取方法并使用像 kendo 提供的模板引擎或像您所做的那样制作 html。

根据您提供的内容，我对您的专栏进行了以下更改：

 { field: "StatusDesc", title: "Comment", width: "130px" ,
   template: "#=generateLink(data)#" }

在这里，我将行的 dataItem 传递给一个名为 generateLink 的函数，该函数调用以下代码：

function generateLink(data) {
  var ret = '';

  if (data.StatusDesc === '' && data.newStatusDesc !== '' && data.newStatusDesc !== null) {

    var linkElement = 'openStatusReload("' + data.newStatusDesc + '")';

    ret = "<a href='javascript:void(0)' class='margin-right10' onclick='" +
           linkElement + "'>" + data.newStatusDesc + '</a>';

    console.log(ret);

  } else {
    ret = data.StatusDesc;
  }

  return ret;
}

所有这一切都应用了与您相同的逻辑，但允许您使用 native javascript 而不是必须使用 [=34= 解释突破的 kendo 小部件]#= {这里有一些 javascript} #

这样，如果您需要修改代码，它更容易阅读和更改，而不必弄清楚可能缺少哪个 #。

在我的示例中，我的代码只是弹出一个警报框，其中包含传入的值并记录到控制台，以便您可以看到正在发生的 magic。

希望这对您有所帮助，但如果您有任何问题 changing/explaining 最好告诉我，我会相应地更新我的答案。

处理 kendo 网格中列的模板

Working on templates for columns in kendo grid

javascript

asp.net-mvc-3

kendo-ui

kendo-grid

kendo-asp.net-mvc