[Solved] hierarchical grid Collaps/Expand Button not visible

[Harikrishnan]

I have created hierarchical grid and added a custom skin from telerik site name is

.RadGrid_MyCustomSkin   . After that the collaps/expand button is not visible..The css file attached below
Please see the attached image also . How can we resolve this issue.Its very urgent

.RadGrid_MyCustomSkin
{
    color: #333;
    border-top-color: #828282;
    border-right-color: #828282;
    border-bottom-color: #828282;
    border-left-color: #828282;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    background-image: none;
    background-attachment: scroll;
    background-repeat: repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: rgb(245, 245, 220);
}
.RadGrid_MyCustomSkin, .RadGrid_MyCustomSkin .rgMasterTable, .RadGrid_MyCustomSkin .rgDetailTable, .RadGrid_MyCustomSkin .rgGroupPanel table, .RadGrid_MyCustomSkin .rgCommandRow table, .RadGrid_MyCustomSkin .rgEditForm table, .GridToolTip_MyCustomSkin
{
    line-height: 16px;
    font-family: "segoe ui", arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size-adjust: none;
    font-stretch: normal;
}
.RadGrid_MyCustomSkin .rgMasterTable, .RadGrid_MyCustomSkin .rgDetailTable
{
    border-collapse: separate !important;
}
.RadGrid_MyCustomSkin .rgRow, .RadGrid_MyCustomSkin .rgAltRow, .RadGrid_MyCustomSkin .rgHeader, .RadGrid_MyCustomSkin .rgResizeCol, .RadGrid_MyCustomSkin .rgPager, .RadGrid_MyCustomSkin .rgGroupPanel
{
    cursor: default;
}
.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td
{
    padding-right: 0px;
    padding-left: 0px;
}
.RadGrid_MyCustomSkin .rgAdd, .RadGrid_MyCustomSkin .rgRefresh, .RadGrid_MyCustomSkin .rgEdit, .RadGrid_MyCustomSkin .rgDel, .RadGrid_MyCustomSkin .rgFilter, .RadGrid_MyCustomSkin .rgPagePrev, .RadGrid_MyCustomSkin .rgPageNext, .RadGrid_MyCustomSkin .rgPageFirst, .RadGrid_MyCustomSkin .rgPageLast, .RadGrid_MyCustomSkin .rgExpand, .RadGrid_MyCustomSkin .rgCollapse, .RadGrid_MyCustomSkin .rgSortAsc, .RadGrid_MyCustomSkin .rgSortDesc, .RadGrid_MyCustomSkin .rgUpdate, .RadGrid_MyCustomSkin .rgCancel
{
    width: 16px;
    height: 16px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    font-size: 1px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    vertical-align: middle;
    border-top-color: currentColor;
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    border-left-color: currentColor;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    cursor: pointer;
    background-image: url("Grid/sprite.gif");
    background-repeat: no-repeat;
    background-color: transparent;
}
.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td, .RadGrid_MyCustomSkin .rgEditRow td, .RadGrid_MyCustomSkin .rgFooter td
{
    padding-top: 4px;
    padding-bottom: 3px;
    border-top-color: currentColor;
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    border-left-color: currentColor;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
}
.RadGrid_MyCustomSkin .rgAltRow
{
    background-image: none;
    background-attachment: scroll;
    background-repeat: repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: rgb(242, 242, 242);
}
.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td
{
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff;
    border-left-color: #fff;
}
.RadGrid_MyCustomSkin .rgAltRow
{
    background-image: none;
    background-attachment: scroll;
    background-repeat: repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: rgb(255, 235, 205);
}
.RadGrid_MyCustomSkin .rgMasterTable td.rgGroupCol, .RadGrid_MyCustomSkin .rgMasterTable td.rgExpandCol
{
    border-top-color: #d9d9d9;
    border-right-color: #d9d9d9;
    border-bottom-color: #d9d9d9;
    border-left-color: #d9d9d9;
    background-image: none;
    background-attachment: scroll;
    background-repeat: repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: rgb(217, 217, 217);
}
.RadGrid_MyCustomSkin .rgExpand
{
    background-position-x: 5px;
    background-position-y: -496px;
}
.rfdTextbox.RadForm input, .rfdTextbox.RadForm button, .rfdTextbox.RadForm .RadComboBox input, .rfdTextbox.RadForm .RadComboBox input[type='text']
{
    border-top-color: currentColor;
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    border-left-color: currentColor;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: transparent;
}

 

 

[Maria Ilieva]

Hi,

By default, RadGrid expects the icons for its various action buttons to be part of the CSS skin's styles. Usually, all icons are part of a single sprite image, although this is not a requirement. However, you can also use separate icons, which are not part of the skin's styles. In order to set the filtering/sorting/paging/expand/collapse images and the data editing images (edit/update/delete/add record/refresh), you can create your own images and set the path to them through the ImagesPath property of RadGrid. Note that the names of these images should match those for the predefined skins in order to be referenced properly from the folder pointed through the ImagesPath property. The image names for the expand/collapse images are:

SinglePlus.gif
SingleMinus.gif

All the best,
Maria Ilieva
the Telerik team