× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Kendo UI Grid handling missing values in column templates

OnaBai
Jun 28, 2015
<p>Instead of:</p> <pre><code>template: '&lt;b&gt;#=a || ""#&lt;/b&gt;' </code></pre> <p>You should use:</p> <pre><code>template: '&lt;b&gt;#=data.a || ""#&lt;/b&gt;' </code></pre> <p>Where <code>data</code> is predefined by KendoUI and is equal to the row data. Otherwise JavaScript doesn't know that <code>a</code> should be part of the <code>data</code> and thinks that it is a variable per-se throwing the error.</p> <p>You can see it running in the following snippet</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() { var arr = [{b: "b1"}, {a: "a2", b: "b2"}]; $("#grid").kendoGrid({ dataSource: arr, columns: [ { title: "The A column", template: '&lt;b&gt;#= data.a || ""#&lt;/b&gt;' }, { title: "The B column", template: '&lt;i&gt;#=b#&lt;/i&gt;' }] }); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css"&gt; &lt;link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css"&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"&gt;&lt;/script&gt; &lt;div id="grid"&gt;&lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/30994500/Kendo%20UI%20Grid%20handling%20missing%20values%20in%20column%20templates/30995312">Stack Overflow</a>.</p>
comments powered by Disqus