处理剑道网格中的列模板

Question

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

未捕获的 ReferenceError：未定义 WEW6101

实际上，如果我检查 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 的评论，您缺少文本周围的引号，这是导致问题的原因，但以下答案可能有助于解决此问题以及您需要使用剑道网格的任何未来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 而不是 kendo 小部件必须使用 #= {some javascript in here} # 来解释突破

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

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

希望这会有所帮助，但如果您有任何更改/解释更好地告诉我，我会相应地更新我的答案。