Collapse/Expand Images

7 posts, 1 answers
  1. Rayne
    Rayne avatar
    241 posts
    Member since:
    Sep 2010

    Posted 04 Apr 2011 Link to this post

    I've got a grid that has EnableEmbeddedSkins=False because I'm trying to get it match the existing website's style using the CssClass property.

    My grid has master and detail info, but I can't seem to figure out how to get the expand/collapse images to show up. When I hover over where they should be, I can expand/collapse the child records, but all I get is an outline where the image should be.

    I defined the ExpandCollapseColumn-ExpandImageUrl and the CollapseImageUrl for the MasterTableView, but this isn't working. Where else do I need to define those images so that they show up?

    Again, I don't have a custom skin, I'm just defining a few needed styles.

    Thanks.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Apr 2011 Link to this post

    Hello Rayne,

    You can try overriding the Default CSS for the Expand/Collapse and set the desired BackGroundImage.
    Css:
    .rgExpandCol
       {
           background-image:url(../Images/calender_left_arrow.jpg) !important;
       }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rayne
    Rayne avatar
    241 posts
    Member since:
    Sep 2010

    Posted 05 Apr 2011 Link to this post

    THis worked sort of.

    I can now see the image, but when I expand the row, the image repeats for the child grid (even though it does not have any records).
     Also, how do I change it so that it shows the collapse image instead of the expand image when it's expanded?
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Apr 2011 Link to this post

    Hello,
    Try to override the default CSS like below.
    CSS:
    <style type="text/css">
    .rgExpandCol
    {
        background-image:url(../Images/Expand.jpg) !important;
    }
    .rgCollapse 
        background-image:url(../Images/Collapse.jpg) !important;
    }
    </style>

    If you want to hide the expand/collapse images when no records, check out the following documentation.
    Hiding expand/collapse images when no records

    Thanks,
    Shinu.
  6. Rayne
    Rayne avatar
    241 posts
    Member since:
    Sep 2010

    Posted 06 Apr 2011 Link to this post

    That did the trick, but my expand image seems to repeat down to my child items when I expand the row. You can see what I mean in the attached image.
  7. Rayne
    Rayne avatar
    241 posts
    Member since:
    Sep 2010

    Posted 06 Apr 2011 Link to this post

    I just wanted to reply that I resolved this issue on my own. I found the setting that makes the row expand by default, then removed the expand/collapse column by using a style of display:none; for both .rgExpandCol and .rgCollapse. So my rows are always expanded and cannot collapse.

    Thanks for the help.
  8. Gayathri
    Gayathri avatar
    25 posts
    Member since:
    Oct 2014

    Posted 27 Feb 2015 in reply to Shinu Link to this post

    Hi Shinu,

    I am having a different problem connected to this issue. 
    The hover image for expand collapse column appears but at the back of original image.
    please help.
    here is my code:
                .RadGrid_Standard .rgMasterTable td.rgExpandCol
            {
               
                background-image: url('Images/singleplus1.gif') no-repeat;
                background-position: center;
                
            }
            .RadGrid_Standard .rgMasterTable td.rgExpandCol:hover {
                       
                background-image: url('Images/singleplus.gif') !important;
                background-repeat:no-repeat;
                background-position: center;
                visibility:visible;
                top:auto;
                 
            
                
            }
            
            .RadGrid_Standard .rgMasterTable td.rgCollapse
            {
               
                background-image: url('Images/singleminus1.gif') no-repeat;
            }
            .RadGrid_Standard .rgMasterTable td.rgCollapse:hover
            {
               
                background-image: url('Images/singleminus.gif') !important;
                background-repeat: no-repeat;
            }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017