Examples for dynamic RadCard

[Alan]

Hello:

I am looking for some examples that show how I can create a set of cards (RadCards) dynamically.

Any pointer would be appreciated.

 

Thanks

 

 

[Peter Milchev]

Hello Alan,

The idea behind the RadCard is to mainly facilitate the creation of the appearance of a card, and provide the developer with the flexibility of reordering the items in the most convenient for the requirements way.

With that said, the Card control does not have data binding functionality. Nevertheless, the card components are server-side controls also, so you can access them either via the Controls collection of the card or directly by using the .FindControl() method of the card. Then, you can set the desired values to the needed elements. 

Depending on your case, you can place the Card in a template of another control and use DataBinder to set the text of the element. 

Here is a simple example with an asp:Repeater: 

<asp:Repeater runat="server" ID="Repeater1">
    <ItemTemplate>
        <telerik:RadCard runat="server" ID="RadCard1" Width="200px">
            <telerik:CardHeaderComponent runat="server">
                <telerik:CardTitleComponent runat="server">
                    <%# Eval("Title") %>
                </telerik:CardTitleComponent>
                <telerik:CardSubtitleComponent runat="server">
                    <%# Eval("Subtitle") %>
                </telerik:CardSubtitleComponent>
            </telerik:CardHeaderComponent>
            <telerik:CardBodyComponent runat="server">
                <p><%# Eval("Description") %></p>
                <telerik:CardImageComponent runat="server" src='<%# Eval("ImageUrl") %>'></telerik:CardImageComponent>
            </telerik:CardBodyComponent>
            <telerik:CardFooterComponent runat="server">
                <p>Footer text</p>
            </telerik:CardFooterComponent>
        </telerik:RadCard>
    </ItemTemplate>
</asp:Repeater>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Repeater1.DataSource = Enumerable.Range(1, 5).Select(x => new CardData()
        {
            Title = "Title " + x,
            Subtitle= "Subtitle "+x,
            Description= "Description " + x,
            ImageUrl= "http://via.placeholder.com/72x35" ,
        });
        Repeater1.DataBind();
    }
}

public class CardData
{
    public string Title { get; set; }
    public string Subtitle { get; set; }
    public string Description { get; set; }
    public string ImageUrl { get; set; }
}

Let me know if you have any other use cases or any possible use cases that could benefit the community. We will review them and try to either document them with examples or improve the Card control itself.

Regards,
Peter Milchev
Progress Telerik

[Alan]

Thanks ... that sounds good