Kendo Grid, displaying a list with client template

Question

I am trying to get a Kendo grid to display a list of values using a for loop in the client template except it keeps crashing the grid when I try it. The grid is below:

@( Html.Kendo().Grid<ProjectXMVC3.ViewModel.PersonnelIndexViewModel>()
    .Name("Personnel")
    .Columns(columns =>
    {
        columns.Bound(o => o.AssetId).Hidden();
        columns.Bound(o => o.Num).Hidden();
        columns.Bound(o => o.Name).Width(150);
        columns.Bound(o => o.Email).Width(200);
        columns.Bound(o => o.AssetSubType).ClientTemplate("# var j = AssetSubType.length; for(var i = 0; i < j; i++){# #: AssetSubType[i] #  #}#"  );
        columns.Bound(o => o.DateBirth).Format("{0:d}").Width(100);
        columns.Bound(o => o.Country).Title("Nationality").Width(200);
        columns.Command(com => {
            com.Custom("Details").Click("onPersonSelected");
            com.Custom("Block").Click("onBlocked");
        });
    })
    .DataSource(d => d
        .Ajax()
        .Model(model => model.Id(p => p.AssetId))
        .Read(read => read.Action("Read_Personnel", "Personnel"))
    )

)

I can get an individual AssetSubType to display using an if statement but as soon as I put in the loop it throws a double six and gives up. AssetSubType is an IEnumerable of the ViewModel.

I've taken out any sorting, filtering etc. I'm new to Kendo as well.

Any assistance is much appreciated...

Answer 1

I had the same problem, and solved it with something like this:

first add a new script and move the for loop inside it:

<script type="text/javascript">
    function printAssetSubType(AssetSubType) {
        var result = "";
        var j = AssetSubType.length; 
        for(var i = 0; i < j; i++) {
            result += AssetSubType[i];
        }
        return result;
    }
</script>

then refer to this script from the column itself:

columns.Bound(o => o.AssetSubType).ClientTemplate("#=printAssetSubType(AssetSubType)#");