在Kendo网格中处理列模板 [英] Working on templates for columns in kendo grid

问题描述

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

I have been trying to use if and else in a template of one of the field in kendoGrid.I have two fields "StatusDesc" and "newStatusDesc". I want show one of the value as an anchor tag. That is displaying fine but if you notice onclick defined for anchor tag,it has one of the field from the grid itself because it has to open a another page but when i click on the anchor tag, console of my browser shows:

未捕获的ReferenceError:未定义WEW6101

uncaught ReferenceError: WEW6101 is not defined

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

Actually if I check firebug, it shows below value set to my anchor tag parameter which is correct but I am not able to call the function "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 } }
            },
            ]
    });

推荐答案

根据@Quantastical的评论，您缺少引起问题的文字周围的引号，但以下答案可能对此有所帮助>您需要使用剑道网格.

As per @Quantastical's comment you are missing the quotes around your text which is what is causing the issue but the below answer may help with this and any future templating you need to do with the kendo grids.

我认为本dojo可以为您提供帮助: http://dojo.telerik.com/AVeBU

I think this dojo may help you out: http://dojo.telerik.com/AVeBU

我发现很难像这样进行内联模板化，因此更喜欢提取方法并使用像kendo提供的模板引擎或像完成的那样制作html.

I find doing inline templating like this can be difficult so prefer to extract the method out and either use a templating engine like kendo provides or craft the html like you have done.

根据您提供的信息，我对您的列进行了以下更改:

I have made the following changes to your column so from what you have provided to:

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

在这里，我将该行的dataItem传递到一个名为generateLink的函数中，该函数调用此代码:

Here I am passing the dataItem for the row into a function called generateLink which calls this code:

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小部件，必须使用#= {此处有一些javascript}#解释突破.

all this does is applies the same logic you had but allows you to use native javascript rather than the kendo widgets having to interpret the breakouts with the #= {some javascript in here} #

这样，如果您需要修改代码，则更容易阅读和更改，而不必弄清楚可能缺少的#号.

this way if you need to modify the code it is easier to read and change rather than having to figure out which # may be missing.

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

In my example I have the code just popping up an alert box with the value passed in and logging to console so you can see the magic that is occurring.

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

Hope this helps but if you anything changing/explaining better let me know and I will update my answer accordingly.

这篇关于在Kendo网格中处理列模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！