CODEWITHSUNDEEP
asp.net-mvc-3kendo-grid
user2083536
user2083536

Reputation: 105

Kendo Grid, displaying a list with client template

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...

Upvotes: 7

Views: 6997

Answers (2)

Vincent V.
Vincent V.

Reputation: 776

You can also add a new field in your PersonnelIndexViewModel class, and prepare the string you want to display server-side, in your controller.

Controller:

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

View:

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

Upvotes: 0

edvella
edvella

Reputation: 126

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)#");

Upvotes: 11

Related Questions