Skinning RadButtons in Custom Paging Template

[ToltingColtAcres]

I need to implement a custom paging template in a radgrid.

Is there a way to skin radbuttons in the paging template w/ the "standard" icons which normally appear in the paging template?

something like

<telerik:RadButton runat="server" ID="RadGrid_Button_PageFirst" CssClass="rgPageFirst" />

doesn't seem to work.

[Doncho]

Hi Michael,

One option you can try is to use the font-icon from the built-in pager and apply them in a Template RadButton

<telerik:RadButton ID="RadButton1" runat="server" CommandName="Page" CausesValidation="false" CommandArgument="First" ButtonType="StandardButton">
    <ContentTemplate>
        <span class="customPageButton"></span>
    </ContentTemplate>
</telerik:RadButton>

CSS

.customPageButton {
    font: 16px/1 "WebComponentsIcons";
}

.customPageButton:before {
    content: "\e00b";
}

You can use the Browsers' DevTools to inspect a built-in Pager and find the codes of the font-icons used there.

Improve Your Debugging Skills with Chrome DevTools blog post may help with the inspecting HTML elements and their styles!

The suggested approach is similar to the one for using FontAwesome in RadButton, which you can check here: Using Font Awesome Icons with RadButton

I hope this will help.

Kind regards,
Doncho
Progress Telerik

[ToltingColtAcres]

absolutely perfect, thank you!
For others who may be seeking a similar solution, here's the code that works:

 

.customPagerButtonFirst {
 font: 16px/1 "WebComponentsIcons";
}

.customPagerButtonFirst:before {
 content: "\e00b";
}

.customPagerButtonPrev {
 font: 16px/1 "WebComponentsIcons";
}

.customPagerButtonPrev:before {
 content: "\e007";
}

.customPagerButtonNext {
 font: 16px/1 "WebComponentsIcons";
}

.customPagerButtonNext:before {
 content: "\e005";
}

.customPagerButtonLast {
 font: 16px/1 "WebComponentsIcons";
}

.customPagerButtonLast:before {
 content: "\e009";
}

<telerik:RadButton runat="server" ID="RadGrid_PagingFirst" AutoPostBack="False"
  OnClientClicked="RadGrid_Paging" Value="First">
  <ContentTemplate>
    <span class="customPagerButtonFirst"></span>
  </ContentTemplate>
</telerik:RadButton>
<telerik:RadButton runat="server" ID="RadGrid_PagingPrevious" AutoPostBack="False"
  OnClientClicked="RadGrid_Paging" Value="Prev">
  <ContentTemplate>
    <span class="customPagerButtonPrev"></span>
  </ContentTemplate>
</telerik:RadButton>
<telerik:RadButton runat="server" ID="RadGrid_PagingNext" AutoPostBack="False"
  OnClientClicked="RadGrid_Paging" Value="Next">
  <ContentTemplate>
    <span class="customPagerButtonNext"></span>
  </ContentTemplate>
</telerik:RadButton>
<telerik:RadButton runat="server" ID="RadGrid_PagingLast" AutoPostBack="False"
  OnClientClicked="RadGrid_Paging" Value="Last">
  <ContentTemplate>
    <span class="customPagerButtonLast"></span>
  </ContentTemplate>
</telerik:RadButton>

function RadGrid_Paging(button, eventArgs) {
   $find("<%= RadGrid1.ClientID %>").get_masterTableView().fireCommand("Page", button.get_value());
}

 

Ajaxifying the grid helps ensure you do not generate a full page postback.

[ToltingColtAcres]

I finally got around to deploying this application to a test IIS server for pre-production testing, and.... this didn't work.

The buttons, which appear okay when I run the application from Visual Studio, do not appear when the application is hosted from a test IIS server.

The CSS appears to be correct on the element when selected, but the button doesn't display.

See picture.

 

Any other thoughts?

[Doncho]

Hi Michael,

A possible cause for the described issue could be enabled Compatibility mode of Internet Explorer.

Therefore, please check out the following articles and try the suggestions to ensure the Compatibility mode is disabled:

• Disable the Compatibility View mode of Internet Explorer
• Different appearance or behavior in Internet Explorer on local and production servers

If this is not the case, I would suggest you use the DevTools of your Browser to monitor the Network tab while loading the page and inspect the network requests to see if the needed font is loaded, see Inspect Network Requests.

Kind regards,
Doncho
Progress Telerik