Kendo Grid: How display List<string> in one cell? - kendo-ui

Question

I tried to iterate through the list and display all elements into a cell in a column but I've having trouble getting it to work.
Here is what I have so far.
In Grid definition:
columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(x.locationList) #");
where x.locationList is a List<string> in the object passed in.
In <script>:
function iterate(object) {
var html = "<ul>";
for (var x = 0; x < object.length; x++) {
html += "<li>";
html += object[x];
html += "</li>";
}
html += "</ul>";
return html;
}
However, this causes all the records to disappear. What is the correct syntax to do this?
The documentations are confusing and most of the examples don't apply to what I'm trying to to.

Answer 1

You probably have your answer already but you aren't that far wrong with your implementation all you are forgetting is what happens if your list is either null or empty this is what is probably blowing out your gird.
So altering your code:
function iterate(object) {
var html = "<ul>";
for (var x = 0; x < object.length; x++) {
html += "<li>";
html += object[x];
html += "</li>";
}
html += "</ul>";
return html;
}
to
function iterate(object) {
var html = "<ul>";
if (object !== null && object.length > 0) {
for (var x = 0; x < object.length; x++) {
html += "<li>";
html += object[x];
html += "</li>";
}
} else {
html += "<li>-</li>";
}
html += "</ul>";
return html;
}
alternatively you could do this:
function iterate(object) {
var html = '<ul>';
if (object !== null && object.length > 0) {
object.forEach(function (data) {
html += '<li>' + data + '</li>';
});
} else {
html += '<li>-</li>';
}
html += '</ul>';
return html;
}
The last solution is my preferred (I just find it cleaner to read)
Obviously the other answers provide a solution for you if it is something a little more complex you want to show.
Well hope this helps anyway.

Answer 2

You were so close! You were literally one letter off where your Kendo Grid was defined. Just replace the x.locationList with locationList when passing to your iterate function and you're good to go! (Full line with fix below)
columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(locationList) #");

Answer 3

You need to make a column template for this purpose
please see this answer below
How to display formatted HTML data in kendo ui grid column
Jquery for calling template
var scriptTemplate = kendo.template($("#MessageBoxTemplate").html())
var scriptData = { stringList: yourListofString };
Foreach Loop inside Template
<script id="MessageBoxTemplate" type="text/x-kendo-template">
<div class="class1">
<div>This is <strong>bold </strong>text.</div>
<div> </div>
<div>This is <em>italics</em> text.</div>
<div> </div>
<div>This is a hyperlink.</div>
<div> </div>
<div>Bulleted list:</div>
<ul>
for(var item; item<=stringList.length;item++)
{
<li>#= item.Age#</li>
<li>#= item.Name#</li>
<li>#= item.Message#</li>
}
</ul>
</div>
</script>

Answer 4

Shaz's solution did not work for me. Not sure if I'm using a different version, but it's missing some hashes. They are needed to define what is javascript and what is not.
<script id="MessageBoxTemplate" type="text/x-kendo-template">
<div class="class1">
<div>This is <strong>bold </strong>text.</div>
<div> </div>
<div>This is <em>italics</em> text.</div>
<div> </div>
<div>This is a hyperlink.</div>
<div> </div>
<div>Bulleted list:</div>
<ul>
#for(var item; item<=stringList.length;item++)
{#
<li>#= item.Age#</li>
<li>#= item.Name#</li>
<li>#= item.Message#</li>
#}#
</ul>
</div>