[Solved] Change Expand / Collapse Arrow image

[Ashok]

Is there a way to customize Panel bar Expand / Collapse Arrow image? Here is what we want:
1) Hide Expand / Collapse arrow image which is on Right Hand side of Panel bar
2) Put our own custom image on Left hand side of the panel bar.

I saw one of the thread indicated css for hiding expand / collapse image

.t-panelbar .t-arrow-up
{
    display: none;
}
 
.t-panelbar .t-arrow-down
{
    display: none;
}

Let me know how we can display custom expand/collapse image on left hand side.

[Dimo]

Hello Tejas,

It will be a lot easier for you to just move the default expand/collapse buttons from the right side to the left side. In this way you will be able to use the existing click handlers of the buttons. Here is how to move the buttons:

.t-panelbar-expand,
.t-panelbar-collapse
{
    right: auto; /* override the skin positioning */
    left: 2px; /* set new positioning */
}

.t-panelbar  .t-link
{
    padding: 0 2em; /* increase the side padding according to your preference */
}

The original side padding of the PanelBar items is 1em. You will have to increase this to a value of your choice.

In order to change the button icons, you should set new background image styles to the t-panelbar-expand and t-panelbar-collapse CSS classes, and reset the background position styles to "0 0" or "center center" (unless you are using a custom sprite image):

.t-panelbar-expand
{
    background: no-repeat 0 0 url('...expand icon image url...');
}

.t-panelbar-collapse
{
    background: no-repeat 0 0 url('...collapse icon image url...');
}

Make sure you register the above CSS code after telerik.common.css and telerik.skinname.css.

Regards,
Dimo
the Telerik team

[Ashok]

Awesome.. works like charm.. there is a minor glitch I think...

On panelbar hover over expand/collapse image disappers. Is there a way to retain the image on hover?

[Dimo]

Hi Tejas,

Well, you also have to redefine the background styles for hover state:

.t-state-hover .t-panelbar-expand { ... }
.t-state-hover .t-panelbar-collapse { ... }

If you want to use the same icons, then set this explicitly:

.t-panelbar-expand,
.t-state-hover .t-panelbar-expand
{
    background: no-repeat 0 0 url('...expand icon image url...');
}

.t-panelbar-collapse,
.t-state-hover .t-panelbar-collapse
{
    background: no-repeat 0 0 url('...collapse icon image url...');
}

Greetings,
Dimo
the Telerik team

[Ashok]

Awesome !!!

Thanks. Works perfect.

Out of context question: Is there any guide/url to learn telerik mvc control css file?

[Dimo]

Hi Tejas,

I am afraid currently there is no documentation for the Telerik MVC extensions' skinning mechanism, however, we intend to produce such in the foreseeable future.

All the best,
Dimo
the Telerik team

[Harinder]

I have inserted Rad grid. I shows Expand Column button on Kentico page but not on postback page. Not have any groups. How to Remove that  ">" expand button from main page.

 <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"
            AllowSorting="True" AutoGenerateColumns="False"
            AllowFilteringByColumn="True" CellSpacing="0" 
            GridLines="None" PageSize="200">
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView>
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="false" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="name"  DataField="name" 
                        HeaderText="Name" SortExpression="name" AutoPostBackOnFilter="true" 
                        CurrentFilterFunction="Contains"  ShowFilterIcon="false" ShowSortIcon="False">
                        <ItemTemplate>
                                <a href='<%# Eval("relativePath")%>' target='_blank'><%# Eval("name")%></a>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn UniqueName="client" DataField="client" HeaderText="Client" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"  ShowFilterIcon="false">

                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="type" DataField="type" HeaderText="Type" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"  ShowFilterIcon="false">

                    </telerik:GridBoundColumn>

                </Columns>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>

            </MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="True" />
</ClientSettings>

<FilterMenu EnableImageSprites="False"></FilterMenu>
        </telerik:RadGrid>

[Dimo]

Hello Harinder,

Please post your question again in the correct forum.

Regards,
Dimo
Telerik