Display model image in detailTemplate

3 posts, 1 answers
  1. Tausif
    Tausif avatar
    10 posts
    Member since:
    Nov 2014

    Posted 27 Nov 2014 Link to this post

    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. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 01 Dec 2014 Link to this post

    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.

     
  3. Tausif
    Tausif avatar
    10 posts
    Member since:
    Nov 2014

    Posted 01 Dec 2014 in reply to Petur Subev Link to this post

    Thank you. That has worked.
Back to Top