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

[Solved] Change RadIconTile Cursor

2 Answers 186 Views

TileList

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

2 Answers, 1 is accepted

Accepted

answered on 04 Jun 2018, 06:50 AM

Recording-36.zip

Hello Valentin,

Here you are an example of how to change the cursor shape:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.RadTile .rtileTopContent .rtileIconImage {

cursor: copy !important;

}

.RadTile.RadIconTile .rtileTopContent {

cursor: crosshair !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" />

<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1">

<Groups>

<telerik:TileGroup>

<telerik:RadIconTile ImageUrl="icon_ajax.png" Shape="Wide" runat="server">

<Title Text="Telerik® UI for ASP.NET AJAX"></Title>

<PeekTemplate>

<div style="padding: 20px; width: 290px; height: 110px; background-color: #007D33; color: White; font-size: 18px;">

Cut your development time while building awesome apps with the performance you desire.

</div>

</PeekTemplate>

</telerik:RadIconTile>

</telerik:TileGroup>

</Groups>

</telerik:RadTileList>

</form>

</body>

</html>

I have also attached a video demonstrating the process of investigation and cursor change.

Regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 04 Jun 2018, 08:48 AM

Hello Rumen,

Thanks for this answer, is working find. For my case, I set the following code in my Master Page Header :

<style>

.RadTile.RadIconTile {

cursor: pointer !important;

}

.RadTile.RadIconTile .rtileTopContent {

cursor: pointer !important;

}

</style>

If I delete one of these parts, the Hand is working in only this part for the Tile (top or bottom).

Thank you !