Collapse/Expand Images

[Rayne]

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.

[Shinu]

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.

[Rayne]

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?

[Shinu]

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.

[Rayne]

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.

[Rayne]

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.

[Gayathri]

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;
        }