Format webgrid column bound to collection? - webgrid

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:##item.User.Email),
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.

Answer 1

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.