Format webgrid column bound to collection?

Question

Here is my webgrid:

<div id="grid">
@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",

    columns: grid.Columns(
        grid.Column("FullName", "Name"),
        grid.Column("User.Email", "Email", format:@<a href="mailto:@item.User.Email">@item.User.Email</a>),
        grid.Column("User.PhoneExtension", "Extension"),
        grid.Column("ManagerName", "Manager"),
        grid.Column("User.Roles", "Roles"),
        grid.Column("", format: (item) => new HtmlString(Html.ActionLink("Edit", "Edit", new { userName = item.User.UserName } ).ToString() + "|" + Html.ActionLink("Details", "Details", new { userName = item.User.UserName }).ToString()))
    )
)

User.Roles is a collection of string. How can I use "format: " to output each role, then a linebreak in that cell? Thanks in advance.

danielQ · Accepted Answer · 2012-06-26T15:29:09.270

You can user html helpers to accomplish that:

...

    grid.Column(columnName: "User.Roles", header: "Roles", format: @<text>@Html.RenderUserRoles((List<String>)item.User.Roles)</text>)

...

The helper would be something like...

...
        public static string RenderUserRoles(this HtmlHelper helper, List<string> roles)
            {
                string result = string.Empty;

                foreach (var item in roles)
                {
                    result += item + " - ";
                }
                result += "<br>";

                return result;
            }
...

Not tested, but should be a guide to get to your own solution, since you can change the helper to render things the way you want.

Format webgrid column bound to collection?

1 Answers1