Ich versuche, kollabierbare Daten in einer Zelle von Kendo UI Grid anzuzeigen. In meinem Kendo Raster gibt es eine Spalte als Preise & pro Zeile, es kann mehrere Werte für diese Preisspalte geben. Um alle Preise innerhalb der bestimmten Zelle anzuzeigen, habe ich unter Vorlage versucht.Kendo-Grid: Anzeige kollabierbarer Daten in Grid-Zellen
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>"
Ich möchte nur Daten in Rasterzellen zusammenfassen. Ich verwende bootstrap3 & angularjs.
Der obige Code gibt mir folgende Fehlermeldung in der Konsole.
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)
Alle Vorschläge würden sehr geschätzt werden.
Danke