RadContentTemplateTile cursor

12 posts, 0 answers
  1. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 24 Apr 2014 Link to this post

    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.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Apr 2014 in reply to MBEN Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 25 Apr 2014 in reply to Shinu Link to this post

    That worked.
    Thanks!
  5. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 29 Apr 2014 in reply to MBEN Link to this post

    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?
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Apr 2014 in reply to MBEN Link to this post

    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.
  7. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 30 Apr 2014 in reply to MBEN Link to this post

    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?
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 May 2014 in reply to MBEN Link to this post

    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.
  9. Joana
    Admin
    Joana avatar
    70 posts

    Posted 02 May 2014 Link to this post

    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.

     
  10. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 02 May 2014 in reply to Joana Link to this post

    Thanks Joana,

    That works perfectly!
  11. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 05 May 2014 in reply to Joana Link to this post

    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
  12. Joana
    Admin
    Joana avatar
    70 posts

    Posted 07 May 2014 Link to this post

    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.

     
  13. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 07 May 2014 in reply to Joana Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017