How to set cssclass for selected tiles in code-behind

7 posts, 0 answers
  1. Josh
    Josh avatar
    4 posts
    Member since:
    Dec 2012

    Posted 21 Jun 2013 Link to this post

    Hello,
    I have a TileList with several Tiles. Its skin is Black. I also have a Save button. I have a cssclass that changes the background image of selected tiles as following:

    .RadTileList_Black .rtlistSelectedTile .rtlistSelectedIcon {
        background-image: url('Images/rtlistSpriteRed.png') !important;
    }

    This works fine for all the tiles. However, in my situation, I only need the set specific selected tiles to have that kind of style. For example, if only I need to change the style for tile 1 and 3 when they are selected. The others' style still has the original style. How can I do that in the code behind.

    Thank you!

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 25 Jun 2013 Link to this post

    Hi Josh,

    The usual way to do this would be to apply a custom CssClass to the desired tiles and cascade through it to change the icon only for a selected tile with the custom class by also modifying the selector. The problem is that currently the CssClass property of the tile is not applied in the rendered HTML markup even when set. This is a known problem with the beta version of the control. You can follow its progress here. When it gets fixed your CSS would look like:
    .RadTileList_Black .myCustomCssClass.rtlistSelectedTile .rtlistSelectedIcon {
    background-image: url('Images/rtlistSpriteRed.png') !important;
    }

    and you could set the CssClass property of the desired tile. You can get all tiles with the server-side API of the control and loop through them. The tilelist offers the GetAllTiles and GetSelectedTiles methods that return lists of RadBaseTile objects.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. dhlennon
    dhlennon avatar
    32 posts
    Member since:
    Oct 2006

    Posted 28 Jun 2013 Link to this post

    Does this explain why I cannot change the mousepointer from css too?
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 28 Jun 2013 Link to this post

    Hello,

    It depends on how you try to do it. If you use one of the CSS classed the control already has you will be able to change the pointer over, let's say, selected icon tiles:
    .rtlistIconTile.rtlistSelectedTile
    {
        cursor: crosshair !important;
    }



    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. dhlennon
    dhlennon avatar
    32 posts
    Member since:
    Oct 2006

    Posted 28 Jun 2013 Link to this post

    Thanks for answering.

    I merely want to change the mouse cursor to "pointer" when over the tile, regardless of selected/unselected or whether in normal or "peek" view. (basically to indicate it is akin to a hyperlink).

    No problems at all if not possible in this build, don't want to waste time experimenting.

    Thanks as always.
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 28 Jun 2013 Link to this post

    Hello,

    Here are several selectors that match the main elements of the tiles:
    .rtlistSquareTile,
    .rtlistWideTile,
    .rtlistContent,
    .rtlistTopContent,
    .rtlistPeekContent
    {
        cursor: pointer !important;
    }

    Note that the cursor property is not inherited from the parent element and any element that is lower in the hierarchy will show its own cursor. So, the peekTemplate, being defined by the developer must be taken care of separately. The .rtlistPeekContent selector will select the main div we add, but further content down is the responsibility of the developer.

    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Josh
    Josh avatar
    4 posts
    Member since:
    Dec 2012

    Posted 28 Jun 2013 Link to this post

    Thank you!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017