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

Dynamically create tileLayoutItem from collection.

2 Answers 443 Views
TileLayout
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Iron
Iron
Jay asked on 28 Sep 2020, 06:18 PM

I'm trying to use the TileLayout to create a photo list viewer similar to your example on the TileLayout overview page. My list of photos is coming from a collection so the number of TileLayoutItem is variable. How would I do this? Here is the code I've  tried. Should i use your pager component?

 <TelerikTileLayout Columns="5" 
                       ColumnWidth="300px"
                       RowHeight="235px"
                       Reorderable="true">
        <TileLayoutItems>
            @foreach (var item in photoIdList)
            {
                <TileLayoutItem>
                    <content>
                        <div class="card">
                            <img card-img-top alt="Card image cap" src="https://myphotoapi/image/api/photo?pid=@item&w=167&h=125" />
                        </div>                     
                    </content>
                </TileLayoutItem>
            }
        </TileLayoutItems>     
    </TelerikTileLayout>

 

I keep getting this error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.TileLayoutItem' does not have a property matching the name 'ChildContent'.
System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TileLayoutItem' does not have a property matching the name 'ChildContent'.

2 Answers, 1 is accepted

Sort by
1
Accepted
Marin Bratanov
Telerik team
answered on 28 Sep 2020, 06:22 PM

Hi Jay,

The <Content> tag has an uppercase "C" and tags are case-sensitive so they compile properly.

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Jay
Top achievements
Rank 1
Iron
Iron
answered on 28 Sep 2020, 06:38 PM
Thanks for the quick reply. Yes that fixed it. I need to remember components should be capitalized by convention as compared to html tags.
Tags
TileLayout
Asked by
Jay
Top achievements
Rank 1
Iron
Iron
Answers by
Marin Bratanov
Telerik team
Jay
Top achievements
Rank 1
Iron
Iron
Share this question
or