title: Kendo Grid: Display collapsible data inside Grid cells
body: <p>I am trying to show collapsible data inside a cell of Kendo UI Grid. In my Kendo grid there is a column as <strong>Prices</strong> &amp; per row, there may be multiple values for this price column. To display all prices inside the particular cell, I tried below template.</p>
  
  <pre><code> template : "&lt;button type='button' class='btn btn-info' data-toggle='collapse' data-target='#demo'&gt;Price&lt;/button&gt;"
              + "&lt;div id='demo' class='collapse'&gt;"
              + "&lt;ul&gt;"
              + "#if (competitorPrice!=null){#"
              + " #for (var i=0,len=competitorPrice.length; i&lt;len; i++){#"
              + " &lt;li&gt;&lt;b&gt;#:competitorPrice[i].competitorName #:&lt;/b&gt; #: kendo.toString(competitorPrice[i].price, 'n2')  #&lt;/li&gt;"
              + "# } #"
              + "#}#"
              + "&lt;/ul&gt;"
              + "&lt;/div&gt;"
  </code></pre>
  
  <p>I just want to collapse data inside grid cells. I am using bootstrap3 &amp; angularjs.</p>
  
  <p>Above code gives me following error message in the console.</p>
  
  <pre><code>angular.js:9778 Error: Invalid template:'&lt;tr data-uid="#=data.uid#" role='row'&gt;&lt;td  role='gridcell'&gt;#= kendo.toString(kendo.parseDate(date, 'yyyy-MM-dd'), 'dd-MM-yyyy') #&lt;/td&gt;&lt;td  role='gridcell'&gt;#:data.salesCount==null?'':data.salesCount#&lt;/td&gt;&lt;td  role='gridcell'&gt;&lt;button type='button' class='btn btn-info' data-toggle='collapse' data-target='#demo'&gt;&lt;/button&gt;&lt;div id='demo' class='collapse'&gt;&lt;ul&gt;#if (competitorPrice!=null){# #for (var i=0,len=competitorPrice.length; i&lt;len; i++){# &lt;li&gt;&lt;b&gt;#:competitorPrice[i].competitorName #:&lt;/b&gt; #: kendo.toString(competitorPrice[i].price, 'n2')  #&lt;/li&gt;# } ##}#&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td  role='gridcell'&gt;#:data.availability==null?'':data.availability#&lt;/td&gt;&lt;td  role='gridcell'&gt;#:data.searchCount==null?'':data.searchCount#&lt;/td&gt;&lt;/tr&gt;' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='&lt;tr data-uid="'+(data.uid)+'" role=\'row\'&gt;&lt;td  role=\'gridcell\'&gt;'+( kendo.toString(kendo.parseDate(date, 'yyyy-MM-dd'), 'dd-MM-yyyy') )+'&lt;/td&gt;&lt;td  role=\'gridcell\'&gt;'+$kendoHtmlEncode(data.salesCount==null?'':data.salesCount)+'&lt;/td&gt;&lt;td  role=\'gridcell\'&gt;&lt;button type=\'button\' class=\'btn btn-info\' data-toggle=\'collapse\' data-target=\'';demo'&gt;&lt;/button&gt;&lt;div id='demo' class='collapse'&gt;&lt;ul&gt;;$kendoOutput+='if (competitorPrice!=null){'; ;$kendoOutput+='for (var i=0,len=competitorPrice.length; i&lt;len; i++){'; &lt;li&gt;&lt;b&gt;;$kendoOutput+=':competitorPrice[i].competitorName '+$kendoHtmlEncode(&lt;/b&gt; )+': kendo.toString(competitorPrice[i].price, \'n2\')  ';&lt;/li&gt;;$kendoOutput+=' } ';;$kendoOutput+='}';&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td  role='gridcell'&gt;;$kendoOutput+=':data.availability==null?\'\':data.availability';&lt;/td&gt;&lt;td  role='gridcell'&gt;;$kendoOutput+=':data.searchCount==null?\'\':data.searchCount';&lt;/td&gt;&lt;/tr&gt;;$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.&lt;anonymous&gt; (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)
  </code></pre>
  
  <p>Any suggestions would be highly appreciated.</p>
  
  <p>Thank You</p>