This is a migrated thread and some comments may be shown as answers.

Display model image in detailTemplate

2 Answers 288 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tausif
Top achievements
Rank 1
Tausif asked on 27 Nov 2014, 03:57 PM
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();
}

2 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 01 Dec 2014, 09:51 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tausif
Top achievements
Rank 1
answered on 01 Dec 2014, 11:23 AM
Thank you. That has worked.
Tags
Grid
Asked by
Tausif
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Tausif
Top achievements
Rank 1
Share this question
or