Repeater with Tiles

[moegal]

I am trying to use a RadContentTemplateTile in an asp:Repeater but the bindings are blank?  Any ideas?

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    <telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server"
                        Skin="Telerik">
                        <ContentTemplate>
                            <div>
                                Name:<%# Eval("Name")%>
                            </div>

                        </ContentTemplate>
                        <PeekTemplate>
                            <div>
                                peek here
                                <telerik:RadButton ID="RadButton2" runat="server" Text="RadButton"></telerik:RadButton>
                            </div>
                        </PeekTemplate>
                        <PeekTemplateSettings Animation="Slide" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                    </telerik:RadContentTemplateTile>
                </ItemTemplate>

            </asp:Repeater>

Marty

[Shinu]

Hi Marty,

You must use the <DataBindings> tag to data bind the RadTile. Please have a look into the following sample code I tried for your scenario.

ASPX:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT top 4 [CustomerID], [ContactName] FROM [Customers]">
</asp:SqlDataSource>
<telerik:RadTileList runat="server" DataSourceID="SqlDataSource1" ID="RadTileList1"
    OnTileCreated="RadTileList1_TileCreated">
    <DataBindings>
        <CommonTileBinding TileType="RadContentTemplateTile" />
        <ContentTemplateTileBinding>
            <ContentTemplate>
                <div style="padding-top: 45px">
                    <strong>CustomerID:</strong>
                    <%#DataBinder.Eval(Container.DataItem, "CustomerID")%>
                    <br />
                    <strong>ContactName:</strong>
                    <%#DataBinder.Eval(Container.DataItem, "ContactName")%>
                </div>
            </ContentTemplate>
        </ContentTemplateTileBinding>
        <TilePeekTemplate>
            <div>
                peek here
                <telerik:RadButton ID="RadButton2" runat="server" Text="RadButton">
                </telerik:RadButton>
            </div>
        </TilePeekTemplate>
    </DataBindings>
</telerik:RadTileList>

C#:

protected void RadTileList1_TileCreated(object sender, Telerik.Web.UI.TileListEventArgs e)
{
    e.Tile.PeekTemplateSettings.ShowInterval = 0;
    e.Tile.PeekTemplateSettings.CloseDelay = 0;
    e.Tile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
    e.Tile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
    e.Tile.PeekTemplateSettings.AnimationDuration = 800;
}

Thanks,
Shinu.

[moegal]

Shinu,

Thanks, but I don't want a tilelist.  I just want to use the Tiles standalone in a repeater. Get the benefit of peek templates.

Marty

[Marin Bratanov]

Hello Marty,

Indeed, databinding expressions are not evaluated in this case. I am logging this for improvement and I have also updated your Telerik points for your report.

In the meantime I can suggest the following workaround:

protected void Repeater1_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    RadContentTemplateTile tile = e.Item.FindControl("RadContentTemplateTile1") as RadContentTemplateTile;
    if(tile != null)
    {
        Label literal = tile.ContentContainer.FindControl("Label1") as Label;
        if(literal != null)
        {
            literal.Text = (e.Item.DataItem as DataRowView)["Name"].ToString();
        }
    }
}

<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_OnItemDataBound">
    <ItemTemplate>
        <telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Skin="Telerik">
            <ContentTemplate>
                <div>
                    Name: <asp:Label ID="Label1" Text="" runat="server" />
                </div>
            </ContentTemplate>
            <PeekTemplate>
                <div>
                    peek here
                    <telerik:RadButton ID="RadButton2" runat="server" Text="RadButton">
                    </telerik:RadButton>
                </div>
            </PeekTemplate>
            <PeekTemplateSettings Animation="Slide" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
        </telerik:RadContentTemplateTile>
    </ItemTemplate>
</asp:Repeater>

Regards,
Marin Bratanov
Telerik

[moegal]

Marin,

Thanks.  I figured this was the direction I needed to go but did not know where to start.

Marty