Customizing the Appearance of Pager Buttons in Spread

Spread for ASP.Net displays data using the concept of Paging. When the sheet contains more rows than can be displayed in the component, Spread automatically creates pages and allows you to navigate between the pages of the sheet. For example, for a sheet that has 50 rows, you may want to display only 10 rows at a time, so each page would be a set of 10 rows. You can advance through these pages using the page navigation buttons that are available at the edge of the component. These include next (right arrow) and previous (left arrow) buttons as well as page numbers. These buttons can be of three types which include Link buttons, Image buttons and Push buttons. Please refer to the following link that describes the different types of available buttons: http://helpcentral.componentone.com/NetHelp/SpreadNet7/ASP2/FarPoint.Web.Spread~FarPoint.Web.Spread.PagerInfo~ButtonType.html Page navigation buttons can be customized so as to determine which of these buttons are displayed by the component and where on the component they are displayed. Customizing these page navigation buttons is done with the properties of the PagerInfo class and the Pager property of the FpSpread class. Please refer to the following link that describes the same: http://helpcentral.componentone.com/NetHelp/SpreadNet7/ASP2/spweb-pagenav-custom.html Apart from the customizations described above, one of our users requested to change the hover color of the ImageButtons being used as the navigation button. This blog explains how this can be achieved by using jQuery. All you need is to get the Image button in the pager using the specific id of the element. Later, alter the Background Color property of the element depending on whether the mouse is hovered over the button or not. Here is the script that accomplishes the same :

<script type="text/javascript">// <![CDATA[  
  function changehovercolor()  
  {  
    var td1 = $("#FpSpread1_pager1 table tr td:first img:first");  
    if (td1.attr('class') != 'aspNetDisabled')  
    {  
      td1.hover(function () { td1.css("background-color", "yellow !important"); }, function () { td1.css("background-color", "transparent !important"); });  
    }  
    var td2 = $("#FpSpread1_pager1 table tr td:first img:last");  
    if (td2.attr('class') != 'aspNetDisabled')  
    {  
      td2.hover(function () { td2.css("background-color", "yellow !important"); }, function () { td2.css("background-color", "transparent !important"); });  
    }  
    var td3 = $("#FpSpread1_pager1 table tr td:last img:first");  
    if (td3.attr('class') != 'aspNetDisabled')  
    {  
      td3.hover(function () { td3.css("background-color", "yellow !important"); }, function () { td3.css("background-color", "transparent !important"); });  
    }  
    var td4 = $("#FpSpread1_pager1 table tr td:last img:last");  
    if (td4.attr('class') != 'aspNetDisabled')  
    {  
      td4.hover(function () { td4.css("background-color", "yellow !important"); }, function () { td4.css("background-color", "transparent !important"); });  
    }  
  }  
// ]]></script>  

This script needs to be executed every time the page is loaded i.e. on initial load and when the user navigates between the pages. The client side CallBackStopped event is fired each time the user navigates between the pages. So, the script would be executed in Ready event for initial load and in CallBackStopped event during the page navigation. Refer to the script below that implements the same:

<script type="text/javascript">// <![CDATA[  
  $(document).ready(function () {  
             changehovercolor()  
         });  
// ]]></script>  
<script id="FpSpread1_Script17" type="text/javascript" language="javascript">// <![CDATA[  
  function FpSpread1_CallBackStopped(event)  
  {  
    changehovercolor();  
  }  
// ]]></script>  

Here is how the final output shows up: Refer to the attached samples for complete implementation: Download C# sample Download VB sample