Kendo Grid displaying a list with a client template

Question

I am trying to get a Kendo grid to display a list of values ​​using the for loop in the client template, except that it continues to break the grid when I try. The grid 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 the if statement, but as soon as I put it into the loop, it gives a double six and refuses. AssetSubType is an IEnumerable from a ViewModel.

I selected any sorting, filtering, etc. I am also new to Kendo.

Any help is much appreciated ...

Answer 1

I had the same problem and decided to do it 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)#"); 

Answer 2

You can also add a new field to your PersonnelIndexViewModel class and prepare the line that you want to display on the server side in your controller.

Controller:

 myViewModel.AssetSubTypeString = String.Join(", ", myAssetSubTypes); 

View:

 columns.Bound(o => o.AssetSubTypeString);