Riz
Riz

Reputation: 6676

binding a collection/list to a kendo mvc grid column

I am trying to bind a list of comments to a column, but it doesn't display anything. I am using an inline Client Template to quickly test it, but no luck. I know for sure there are Comments in the model, but it seems to think that the Comments is undefined or null. Below is my code:

    @{
    var grid = Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(l => l.Name);
            columns.Bound(l => l.Description);
            columns.Bound(l => l.Comments).ClientTemplate("# if(Comments) { for(var i=0; i<Comments.length; i++) {# #=Comments[i].Comment# #}}# ").Title("Comments");

        })
        .HtmlAttributes(new { style = "height: 850px;" })
        .Sortable()
        .Scrollable(scr => scr.Height(430))
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
         );
    grid.Render();
}

Upvotes: 2

Views: 2168

Answers (1)

Martin D.
Martin D.

Reputation: 2090

I suggest creating a JavaScript function and calling it in your client template. Also, it will be easier to debug.

function displayComments(data) {
    return $.map(data.Comments, function (e) { return e.Comment; }).join(", ");
}

In your Grid:

columns.Bound(l => l.Comments).ClientTemplate("#= displayComments(data) #").Title("Comments");

Upvotes: 2

Related Questions