Question

我试图在Kendo UI Grid的单元格内显示可折叠数据。在我的Kendo网格中，有一列为价格＆amp;每行，此价格列可能有多个值。为了显示特定单元格内的所有价格，我尝试了下面的模板。

 template : "<button type='button' class='btn btn-info' data-toggle='collapse' data-target='#demo'>Price</button>"
            + "<div id='demo' class='collapse'>"
            + "<ul>"
            + "#if (competitorPrice!=null){#"
            + " #for (var i=0,len=competitorPrice.length; i<len; i++){#"
            + " <li><b>#:competitorPrice[i].competitorName #:</b> #: kendo.toString(competitorPrice[i].price, 'n2')  #</li>"
            + "# } #"
            + "#}#"
            + "</ul>"
            + "</div>"

我只想折叠网格单元格中的数据。我正在使用bootstrap3＆amp; angularjs。

上面的代码在控制台中给出了以下错误消息。

angular.js:9778 Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td  role='gridcell'>#= kendo.toString(kendo.parseDate(date, 'yyyy-MM-dd'), 'dd-MM-yyyy') #</td><td  role='gridcell'>#:data.salesCount==null?'':data.salesCount#</td><td  role='gridcell'><button type='button' class='btn btn-info' data-toggle='collapse' data-target='#demo'></button><div id='demo' class='collapse'><ul>#if (competitorPrice!=null){# #for (var i=0,len=competitorPrice.length; i<len; i++){# <li><b>#:competitorPrice[i].competitorName #:</b> #: kendo.toString(competitorPrice[i].price, 'n2')  #</li># } ##}#</ul></div></td><td  role='gridcell'>#:data.availability==null?'':data.availability#</td><td  role='gridcell'>#:data.searchCount==null?'':data.searchCount#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td  role=\'gridcell\'>'+( kendo.toString(kendo.parseDate(date, 'yyyy-MM-dd'), 'dd-MM-yyyy') )+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.salesCount==null?'':data.salesCount)+'</td><td  role=\'gridcell\'><button type=\'button\' class=\'btn btn-info\' data-toggle=\'collapse\' data-target=\'';demo'></button><div id='demo' class='collapse'><ul>;$kendoOutput+='if (competitorPrice!=null){'; ;$kendoOutput+='for (var i=0,len=competitorPrice.length; i<len; i++){'; <li><b>;$kendoOutput+=':competitorPrice[i].competitorName '+$kendoHtmlEncode(</b> )+': kendo.toString(competitorPrice[i].price, \'n2\')  ';</li>;$kendoOutput+=' } ';;$kendoOutput+='}';</ul></div></td><td  role='gridcell'>;$kendoOutput+=':data.availability==null?\'\':data.availability';</td><td  role='gridcell'>;$kendoOutput+=':data.searchCount==null?\'\':data.searchCount';</td></tr>;$kendoOutput+=;}return $kendoOutput;'
at Error (native)
at Object.compile (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:25:7802)
at Object.d [as template] (http://kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js:2:3856)
at init._tmpl (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:50:16130)
at init._templates (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:50:17717)
at new init (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:48:16763)
at HTMLDivElement.<anonymous> (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:26:4091)
at Function.each (http://kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js:2:2881)
at n.each (http://kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js:2:846)
at n.e.fn.(anonymous function) [as kendoGrid] (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:26:4068)

任何建议都将受到高度赞赏。

谢谢

Answer 1

你忘了在 data-target =＆＃39; #demo＆＃39; 中转义特殊字符＃只需在前面添加\反斜杠＃characters。

Kendo Grid：显示Grid单元格内的可折叠数据

1 个答案: