Multiline cell in Telerik grid (MVC3)

Question

Using Telerik MVC3 grid, C#, .Net 2010;

I have a grid in my razor view:

@(Html.Telerik().Grid<ProductListItem>()
.Name("Grid")
.Columns(columns =>
{
       columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
       columns.Bound(o => o.Categories).Sortable(true).Filterable(false).Width(200);
       //other column bindings...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.Filterable()

What i want to do is setting Category column of grid as multiline.

There may be many Category for a Product so the Category cells in grid should be like;

Category0
Category1
Category2

I tried to Join category values with System.NewLine and
and assign this values to ProductListItem.Categories property. It does not change. The text is still single line.

Thanks in advance.

Osteen

Answer 1

Thank you @nekno. I came up with this solution in my case. Sorry to not respond in a while.

in view model:

this.Categories = String.Join("<br>", entity.Categories.Select(o => o.Current.Name));

in view: columns.Bound(o => o.Categories).ClientTemplate("<#= Categories #>")

Osteen

Answer 2

If it's easy where you tried to do the join with NewLine, try "<br />" instead of System.NewLine.

Otherwise, what is the data type of your ProductListItem.Categories property? If it's a List<String> or some other IEnumerable, you could use a template column instead of a bound column. You use item to reference the current ProductListItem in the template:

@(Html.Telerik().Grid<ProductListItem>()
.Name("Grid")
.Columns(columns =>
{
       columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
       columns.Template(
            @<text>
                @String.Join("<br />", item.Categories)
            </text>)
            .Sortable(true).Filterable(false).Width(200);
       //other column bindings...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.Filterable()

---

Another option might be to make a table in the template column, and leave your ProductListItem.Categories as a List, e.g., this.Categories = entity.Categories.Select(o => o.Current.Name).ToList();

@(Html.Telerik().Grid<ProductListItem>()
    .Name("Grid")
    .Columns(columns =>
    {
           columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
           columns.Template(
                @<text>
                    <table border=0>
                         @foreach(var category in item.Categories){
                             <tr><td>@category</td></tr>
                         }
                    </table>
                </text>)
                .Sortable(true).Filterable(false).Width(200);
           //other column bindings...
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
    .Pageable(settings => settings.Total(Model.TotalRow))
    .EnableCustomBinding(true)
    .Sortable()
    .Filterable()

Prieto

ProductListItem.Categories property is coming as joined string; this.Categories = String.Join( "<br />", entity.Categories.Select(o => o.Current.Name)); I tried this and your advice to using Template advice but it still the same :/. – Osteen

@Osteen - Can you view the HTML source in your browser and paste here what it shows for that table cell with multiple Categories? – Prieto