CSS Sprites for RadToolBarButton in RadGrid CommandItemTemplate

[Ali]

CSS Sprites for RadToolBarButton in RadGrid CommandItemTemplate

Hi,
I am using RadToolBarButton in RadGrid CommandItemTemplate. But I have over 15 buttons and each button has corresponding normal and hovered images. I want to use only one CSS sprites image for all the [image only] RadToolBarButtons to reduce http requests.

<telerik:RadToolBarButton CommandName="InitInsert" ToolTip="Add Item"

    ImageUrl="~/Img/addN.png" HoveredImageUrl="~/Img/addH.png">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton CommandName="EditSelected" ToolTip="Edit Item"

    ImageUrl="~/Img/editN.png" HoveredImageUrl="~/Img/editH.png">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton CommandName="DeleteSelected" ToolTip="Delete Item"

    ImageUrl="~/Img/deleteN.png" HoveredImageUrl="~/Img/deleteH.png">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton>
<ItemTemplate>
        <telerik:RadButton ID="BtnToggle" runat="server" ButtonType="ToggleButton" 
        ToggleType="CustomToggle" AutoPostBack="false" Checked="true" BackColor="White"
        ToolTip="Toogle Folders" OnClientClicked="jsToggleGroup">
            <ToggleStates>
                <telerik:RadButtonToggleState Text="Collapse" Selected="true">
                </telerik:RadButtonToggleState>
                <telerik:RadButtonToggleState Text="Expand" >
                </telerik:RadButtonToggleState>
            </ToggleStates>
        </telerik:RadButton>
</ItemTemplate>
</telerik:RadToolBarButton>

and so on ...

What's the best way to do that? I noticed that RadToolBar has "EnableImageSprites" option. Does anyone have some sample code to enable sprites in RadToolBar?

Thanks.

The team,
http://www.megasearches.com/

[Kate]

Hello,

A very similar approach that you can use as a base and further extend it as desired can be found in this help article - Using Sprite Images in RadToolBarSplitButton

All the best,
Kate
the Telerik team