Question

私は剣道UIグリッドのセル内に折り畳み可能なデータを表示しようとしています。私の剣道のグリッドにはの価格が &の列があり、この価格列には複数の値が存在する可能性があります。特定のセルの中のすべての価格を表示するために、私はテンプレートの下で試しました。

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 & 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

はありがとうございました。