Change RadIconTile Cursor

3 posts, 1 answers
  1. Valentin
    Valentin avatar
    153 posts
    Member since:
    Mar 2016

    Posted 01 Jun 2018 Link to this post

    Hi Telerik,

     

    I want to know if is it possible to change the cursor when the mouse is over a RadIconTile object ?

    I tried to apply a CSS style, but the modification is not considered.

     

    Thank you.

  2. Answer
    Rumen
    Admin
    Rumen avatar
    14098 posts

    Posted 04 Jun 2018 Link to this post

    Hello Valentin,

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

    <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.
  3. Valentin
    Valentin avatar
    153 posts
    Member since:
    Mar 2016

    Posted 04 Jun 2018 in reply to Rumen Link to this post

    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 !

Back to Top