Display model image in detailTemplate

[Tausif]

Hi,

I'm trying to bind to a model image in the DetailTemplate but am unable to, I receive the following error Inline markup blocks (@<p>Content</p>) cannot be nested. Only one level of inline markup is allowed.

I could use a helper function as described in the link below:

http://stackoverflow.com/questions/10684025/inline-markup-blocks-cannot-be-nested-only-one-level-of-inline-markup-is-allowe

But unsure of how to set the @item.Orders I have tried a local variable as a ICollection but this doesn't work.

Any idea how I can get the code below to work?

@model IEnumerable<GridScenario.Models.Employee>

@{ Html.Kendo().Grid(Model)
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.CountryFlag)
            .Template(@<text><img alt="Static Image Alt Text" src="@Url.Content(@item.CountryFlag) " />
            </text>);

        @*.Template(@<text>
        <img alt="Static Image Alt Text" src="@Url.Content("~/Images/usa.png") " />
        </text>);*@
        
        columns.Bound(e => e.City);
    
    })
    .DetailTemplate(
    @<text>
        
        @(Html.Kendo().Grid(item.Orders)
                    .Name("Orders_" + item.EmployeeID)
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.OrderID).Width(101);
                        columns.Bound(o => o.ShipCountry).Width(140);
                        columns.Bound(o => o.ShipAddress).Width(200);
                        columns.Bound(o => o.ShipName).Width(200);
                        columns.Bound(o => o.ShippedDate).Format("{0:d}");
                        columns.Bound(o => o.CountryFlag).Template(@<text><img alt="Static Image Alt Text" src="@Url.Content(@item.CountryFlag) " />
                        </text>);

             
                    })
                    .DataSource(dataSource => dataSource.Server())
                    .Pageable()
                    .Sortable()
                    .Filterable()
        )
    </text>
)
    .RowAction(row =>
    {
        if (row.Index == 0)
        {
            row.DetailRow.Expanded = true;
        }
        else
        {
            var requestKeys = Request.QueryString.Keys.Cast<string>();
            var expanded = requestKeys.Any(key => key.StartsWith("Orders_" + row.DataItem.EmployeeID) ||
                key.StartsWith("OrderDetails_" + row.DataItem.EmployeeID));
            row.DetailRow.Expanded = expanded;
        }
    })
    .Pageable()
    .DataSource(dataSource => dataSource.Server().PageSize(5))
    .Sortable()
    .Render();
}

[Petur Subev]

Hello Tausif,

The following blogpost explains in details why this happens and provides a way how to resolve when such nesting is required.

No matter it is for the old extensions that are not longer supported. The approach remains the same and it is still valid when using server binding like in your case.

http://blogs.telerik.com/aspnetmvcteam/Posts/11-01-27/mvc3-and-grid-hierarchy.aspx

I hope this helps.

Kind Regards,
Petur Subev
Telerik

 

 

[Tausif]

Thank you. That has worked.