TelerikCard Click

[Igor]

Hi there,

Is there a way to handle  the click anywhere on TelerikCard without wrapping it with a div and handling div.onclick?

 

Regards,

Igor

[Svetoslav Dimitrov]

Hello Igor,

I can confirm that wrapping the TelerikCard in a <div> with an onclick event is the best way to achieve the desired behavior. 

Regards,
Svetoslav Dimitrov
Progress Telerik

[Igor]

Can we have a way to handle OnClick out of the box in the future releases? (w/o wrapping manually)

[Svetoslav Dimitrov]

Hello Igor,

What do you expect an OnClick on the <TelerikCard> to do more than what you can already achieve by wrapping the <TelerikCard> in a <div @onclick>?

[Igor]

Hello Svetoslav,

I don't expect anything more. I just want to avoid wrapping it manually every time I need it. It's much simpler and more readable, convenient to have <TelerikCard OnClick="@..."> rather than <div @onclick="@..."><TelerikCard> ........

[Svetoslav Dimitrov]

Hello Igor,

You can wrap the TelerikCard, wrapped in a <div @onclick> in a custom component and expose parameters to make an easily reusable component (extract more parameters as needed):

<div @onclick="@OnCardClick">
    <TelerikCard Width="@CardWidth">
        <CardHeader>
            <CardTitle>@CardHeaderTitle</CardTitle>
        </CardHeader>
        <CardImage Src="@CardImgSrc"></CardImage>
        <CardBody>
            <CardTitle>Rome</CardTitle>
            <CardSubTitle>Capital of Italy</CardSubTitle>
            <CardSeparator></CardSeparator>
            <p>
                Rome is a sprawling, cosmopolitan city with nearly 3,000 years of globally influential art, architecture and culture on display.

                Ancient ruins such as the Forum and the Colosseum evoke the power of the former Roman Empire.
            </p>
        </CardBody>
        <CardActions Layout="@CardActionsLayout.Stretch">
            <TelerikButton Class="k-flat" Icon="@SvgIcon.HeartOutline" Title="Like"></TelerikButton>
            <TelerikButton Class="k-flat" Icon="@SvgIcon.Comment" Title="Comment"></TelerikButton>
            <TelerikButton Class="k-flat">Read More</TelerikButton>
        </CardActions>
        <CardFooter>
            <span style="float:left">Created by @@john</span>
            <span style="float:right">March 05, 2021</span>
        </CardFooter>
    </TelerikCard>
</div>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnCardClick { get; set; }
    [Parameter]
    public string CardWidth { get; set; }
    [Parameter]
    public string CardHeaderTitle { get; set; }
    [Parameter]
    public string CardImgSrc { get; set; }
}

I can confirm that we have no intention of adding an OnClick event to the whole Card.