Customizing Page Navigation Buttons on the Client

If the command bar is displayed, you can customize the labels of the page navigation buttons, as well as other aspects of the button appearance by using the CreateButton event. Refer to the CreateButtonEventArgs class members for more details.

If the command bar is not displayed, there are no buttons being created so you cannot use the CreateButton event. But you can still customize the appearance using client code to achieve the same results. On the client side, the page navigation links are drawn in a table cell on the resulting HTML page. You can get access to that table cell and draw your own label instead.

Using Code

Here is the client code to display a version of the links to the next and previous pages by manipulating the table cells and creating buttons for these.

Client Code	Copy Code
function window.onload() { var pager=document.all("FpSpread1_Pager1"); for(var i=0;i<pager.childNodes.length;i++) { switch (pager.childNodes(i).nodeType) { case 1: switch (pager.childNodes(i).innerText) { case "<<": pager.childNodes(i).innerText = "<<Prev "; break; case ">>": pager.childNodes(i).innerText = " Next>>"; break; } case 3: switch (pager.childNodes(i).data) { case "<<": pager.childNodes(i).data = "<< Prev"; break; case ">>": pager.childNodes(i).data = " Next >>"; break; } } } }

Client Code

Copy Code

function window.onload()
   {
     var pager=document.all("FpSpread1_Pager1");
     for(var i=0;i&lt;pager.childNodes.length;i++) {
       switch (pager.childNodes(i).nodeType) {
        case 1:
         switch (pager.childNodes(i).innerText) {
          case "&lt;&lt;":
            pager.childNodes(i).innerText = "&lt;&lt;Prev ";
            break;
          case "&gt;&gt;":
            pager.childNodes(i).innerText = " Next&gt;&gt;";
            break; 
        }
      case 3:
        switch (pager.childNodes(i).data) {
          case "&lt;&lt;":
            pager.childNodes(i).data = "&lt;&lt; Prev";
            break;
          case "&gt;&gt;":
            pager.childNodes(i).data = " Next &gt;&gt;";
            break; 
         }
    }
  }
}