Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadContentTemplateTile cursor

10 Answers 177 Views
TileList
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 2
Veteran
MBEN asked on 24 Apr 2014, 09:36 PM
Hi,

I am using a RADContentTemplateTile on the home page on my website to provide snapshots. when the user clicks on them they navigate to the actual page.
I want to display a hand cursor when I hover over it so that the user knows that the tiles are clickable.

below is a declaration of my tile:
<telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Name="balancesTile"
                            Shape="Wide" NavigateUrl="~/balances/balancesummary.aspx?MenuID=2&id=0" Width="460px"
                            BorderStyle="None">
                            <ContentTemplate>
                                <b>Balances</b>
                                <p>
                                    <bal:ucBalance ID="balanceSummary" runat="server" />
                                </p>
                            </ContentTemplate>
                        </telerik:RadContentTemplateTile>


Please suggest.

10 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 25 Apr 2014, 07:18 AM
Hi MBEN,

Please try the following CSS to show the hand cursor in a RadContentTemplateTile.

CSS:
<style type="text/css">
    .rtileHovered
    {
        cursor: pointer !important;
    }
</style>

Thanks,
Shinu.
0
MBEN
Top achievements
Rank 2
Veteran
answered on 29 Apr 2014, 09:41 PM
Hi Shinu,

I am getting the hand cursor now. However, the cursor does not show over the controls that are inside the contentTemplate.
I want to show the cursor on mouse over of the entire area so that the user knows that any part of the tile is clickable to navigate him to the details. Is that possible?
0
Shinu
Top achievements
Rank 2
answered on 30 Apr 2014, 06:29 AM
Hi MBEN,

In order to achieve your scenario you have to mention the CSS for each control separately as follows.

ASPX:
<telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server">
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text="Demo">
        </asp:Label>
        <telerik:RadTextBox ID="RadTextBox1" runat="server">
        </telerik:RadTextBox>
    </ContentTemplate>
</telerik:RadContentTemplateTile>

CSS:
.rtileHovered, #RadContentTemplateTile1_Label1, #RadContentTemplateTile1_RadTextBox1
{
    cursor: pointer !important;
}

Thanks,
Shinu.
0
MBEN
Top achievements
Rank 2
Veteran
answered on 30 Apr 2014, 03:27 PM
Unfortunately this doesn't work for me.
I have a user control inside my content template and a gid on that user control. Does that make a difference?

Below is my code:
<div id="borderDiv">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" valign="bottom">
                    <asp:Panel ID="Panel1" runat="server" CssClass="panelLeft">
                        <telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Name="balancesTile"
                            Shape="Wide" NavigateUrl="~/balances/balancesummary.aspx?MenuID=2&id=0" Width="460px"
                            BorderStyle="None">
                            <ContentTemplate>
                                <b>Balances</b>
                                <p>
                                    <iSys:ucBalance ID="balanceSummary" runat="server" />
                                </p>
                            </ContentTemplate>
                        </telerik:RadContentTemplateTile>
                    </asp:Panel>
                </td>
            </tr>
        </table>
        <br />
    </div>
 
css I am using:
 
<style type="text/css">
        .rtileHovered, #RadContentTemplateTile1_balanceSummary, #RadContentTemplateTile1_balanceSummary_rgBalanceSummary
        {
            cursor: pointer !important;
        }
    </style>
 
If that's an issue is there some other control I can use?
0
Shinu
Top achievements
Rank 2
answered on 02 May 2014, 04:36 AM
Hi MBEN,

In your scenario you can add the CSS class to the ItemStyle of RadGrid as follows.

ASPX:
...
    <ItemStyle CssClass="UseHand" />
...

CSS:
.UseHand
{
    cursor: pointer !important;
}

Thanks,
Shinu.
0
Joana
Telerik team
answered on 02 May 2014, 09:19 AM
Hello,

You could try also the following approach and choose which one is the best for you:

<head runat="server">
    <title></title>
    <style>
        .RadTile:hover *,
        .rtileHovered *,
        .rtileHovered:hover,
        .rtileContent:hover *,
        .rtileHovered .rtileContent * {
            cursor: pointer !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Demo">
                </asp:Label>
                <telerik:RadTextBox ID="RadTextBox1" runat="server">
                </telerik:RadTextBox>
            </ContentTemplate>
        </telerik:RadContentTemplateTile>
    </form>
</body>
</html>


Regards,
Joana
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
MBEN
Top achievements
Rank 2
Veteran
answered on 02 May 2014, 05:42 PM
Thanks Joana,

That works perfectly!
0
MBEN
Top achievements
Rank 2
Veteran
answered on 05 May 2014, 07:11 PM
Hi Joana,

I was trying to add a border on hover over the tile like you have in your examples but I am not able to do so.
I am using custom skin.

Below are my control and css:

<telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Name="balancesTile"
                            Shape="Wide" NavigateUrl="~/balances/balancesummary.aspx?MenuID=2&id=0" Width="470px">
                            <ContentTemplate>
                                <b>Balances</b>
                                <p>
                                    <iSys:ucBalance ID="balanceSummary" runat="server" />
                                </p>
                            </ContentTemplate>
                        </telerik:RadContentTemplateTile>

css:

.RadTile_WebBlue
{
    font-family: "Segoe UI" , Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    background-color: rgb(238, 238, 238); /* Loading image */
}
  .RadTile_WebBlue.rtileSelected {
    border-color: #3d556c; }
  .RadTile_WebBlue.rtileSelected.rtileHovered {
    border: 1px solid #B1B1B1; }
 
  .RadTile_WebBlue div.rtileBadgeIcon {
    background-image: url('../Common/Tile/rtileBadgeIconsDark.png');
    _background-image: url('../Common/Tile/rtileBadgeIconsDarkIE6.png'); }
  html .RadTile_WebBlue.RadTile h6.rtileTitle {
    color: white; }
  .RadTile_WebBlue .rtilePeekContent {
    background-color: rgb(238, 238, 238); }
  .RadTile_WebBlue.rtileLoading,
  .RadTile_WebBlue .rtileLoading {
    background-image: url('Common/loading_small.gif'); }

What am i missing
0
Joana
Telerik team
answered on 07 May 2014, 08:50 AM
Hello,

You could set the border on hover via the approach I have sent you:

.RadTile:hover *,
.rtileHovered *,
.rtileHovered:hover,
.rtileContent:hover *,
.rtileHovered .rtileContent * {
    cursor: pointer !important;
    border-color: #000 !important;
}

or you could set the style on .RadTile_WebBlue.rtileHovered:
.RadTile_WebBlue.rtileHovered
{
  border-color: #000 !important;
}

If you wish, you could inspect the elements with FireBug or other DevTool to see their classes and how to customize them.

Regards,
Joana
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
MBEN
Top achievements
Rank 2
Veteran
answered on 07 May 2014, 05:18 PM
Thanks! I think I was missing the !important part in
.RadTile_WebBlue.rtileHovered
{
  border-color: #000 !important;
}


The other approach puts a border around every element in that tile.
Tags
TileList
Asked by
MBEN
Top achievements
Rank 2
Veteran
Answers by
Shinu
Top achievements
Rank 2
MBEN
Top achievements
Rank 2
Veteran
Joana
Telerik team
Share this question
or