Hello Edward,

You may access the grid pager through it's jQuery id selector and append the desired html to it, for example: $("#grid_pager").append("<button>Click</button>"). Attached is a sample for your reference.

If you have further questions, please let me know.

Regards,
Tsanna

I modified Tsanna`s sample in order to match your requirement. I am handling rendered event of igGrid to move the pager label from the footer to the header using appendChild and replaceChild in order to keep all of the attached JavaScript objects and events attached to those elements. There are two things that you have to keep in mind for this approach:

1. You have to ensure that the page header is rendered.  rendered event can help you with this one. This event is fired after the whole grid widget has been rendered(including headers, footers, etc.)

    //Bind after initialization
    $(document).delegate(".selector", "iggridrendered", function (evt, ui) {
      var waitForPageHeader = setInterval(function() {
       $(".ui-iggrid-pagesizedropdowncontainerabove")[0].appendChild($("#grid_pager_label")[0]);
       $("#grid_pager_label").css("float","left");
       $("#grid_pager_label").append("Click");
       if($(".ui-iggrid-pagesizedropdowncontainerabove").length > 0) {
        clearInterval(waitForPageHeader);
       }
      }, 10);
     });

2. The pager is re-rendered every time the page size or page index is changed so the logic should be applied each time any of these events are fired.

       //Bind after initialization
      $(document).delegate(".selector", "iggridpagingpagesizechanged", function (evt, ui) {
        $(".ui-iggrid-pagesizedropdowncontainerabove")[0].replaceChild($(".ui-iggrid-pager >.ui-iggrid-pagerrecordslabel")[0], 
        $(".ui-iggrid-pagesizedropdowncontainerabove>.ui-iggrid-pagerrecordslabel.ui-iggrid-results")[0]);
        $("#grid_pager_label").css("float","left");
        $("#grid_pager_label").append("Click");
       });

         //Bind after initialization
       $(document).delegate(".selector", "iggridpagingpageindexchanged", function (evt, ui) {
         $(".ui-iggrid-pagesizedropdowncontainerabove")[0].replaceChild($(".ui-iggrid-pager >.ui-iggrid-pagerrecordslabel")[0], 
         $(".ui-iggrid-pagesizedropdowncontainerabove>.ui-iggrid-pagerrecordslabel.ui-iggrid-results")[0]);
         $("#grid_pager_label").css("float","left");
         $("#grid_pager_label").append("Click");
       });

In regards to the fact that you are using the MVC wrapper the behavior is the same in both scenarios. If you have any concerns or questions how events are bound you can have a look at our Using Events in IgniteUI topic.

Please have a look at the attached sample and let me know if you need any further assistance with this matter.