This is a migrated thread and some comments may be shown as answers.

Collapse/Expand Images

6 Answers 51 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rayne
Top achievements
Rank 1
Rayne asked on 04 Apr 2011, 10:09 PM
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.

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 05 Apr 2011, 07:43 AM
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.
0
Rayne
Top achievements
Rank 1
answered on 05 Apr 2011, 03:03 PM
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?
0
Accepted
Shinu
Top achievements
Rank 1
answered on 06 Apr 2011, 09:20 AM
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.
0
Rayne
Top achievements
Rank 1
answered on 06 Apr 2011, 02:43 PM
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.
0
Rayne
Top achievements
Rank 1
answered on 06 Apr 2011, 08:53 PM
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.
0
Gayathri
Top achievements
Rank 1
answered on 27 Feb 2015, 07:15 AM
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;
        }
Tags
Grid
Asked by
Rayne
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Rayne
Top achievements
Rank 1
Gayathri
Top achievements
Rank 1
Share this question
or