In the previous post I described how using QuickPages property and a bit of creative HTML enhanced pager for Infragistics UltraWebGrid could be created. The only problem with QuickPages – the pager in this mode displays inconsistent number of page links. For example if you set QuickPages property equal 5, the pager will display from 5 page links (when you’re at the beginning or at the end of the grid) to 11 (when you’re in the middle). If you want that number to be consistent, you have to draw the page links yourself. Which turned out is surprisingly easy.

We’re going to reuse pager’s Pattern HTML markup from the previous post, but since we’re not going to use default link rendering functionality, let’s remove [default] substitution token and replace it with this line:

<span id='xspanPagerLinks'></span>

This is the Span where links are going to appear. Now lets take a look and client-side JavaScript function that is going to use that Span to render links:

// renders grid pager links
// i_sGridName - name of the grid
// i_sLinkSpan - SPAN within grid pager that holds the links
// i_iCurrentPage - current page number
// i_iLinksToShow - total links to display
function renderPagerLinks(i_sGridName, i_sLinkSpan, i_iCurrentPage, i_iLinksToShow) {
    var oGrid = igtbl_getGridById(i_sGridName); if (!oGrid) return;

    // No. Of pages to display before and ahead of current
    var iPagesAhead = Math.floor(i_iLinksToShow / 2)
    var iPagesBehind = i_iLinksToShow - iPagesAhead - 1

    var iStartPage, iEndPage // start & end link no

    if (oGrid.PageCount <= i_iLinksToShow) {// if total number of pages below max - list all links
        iStartPage = 1;
        iEndPage = oGrid.PageCount
    } else if (i_iCurrentPage - iPagesBehind < 1) { // if we're too close to paging start - start with 1st page
        iStartPage = 1;
        iEndPage = i_iLinksToShow
    } else if (i_iCurrentPage + iPagesAhead > oGrid.PageCount) { // if we're too close to paging end - end with last page
        iEndPage = oGrid.PageCount;
        iStartPage = iEndPage - i_iLinksToShow + 1
    } else { // otherwise showing pages ahead and behind
        iStartPage = i_iCurrentPage - iPagesBehind;
        iEndPage = i_iCurrentPage + iPagesAhead;
    }

    var oLinkSpan = document.getElementById(i_sLinkSpan)
    var sLinkPages = '';

    for (var iPageNo = iStartPage; iPageNo <= iEndPage; iPageNo++) {

        if (iPageNo != i_iCurrentPage) {
            sLinkPages += "<a onclick=\"javascript:igtbl_pageGrid(event,'" + i_sGridName + "'," + iPageNo + ")\" href=\"#\" >" + iPageNo + "</a>"
        } else {
            sLinkPages += iPageNo
        }

        sLinkPages += ' '

    }

    oLinkSpan.innerHTML = sLinkPages

}

It accepts 4 parameters: ID of UltraWebGrid, ID of Span to render links in, current page index and total number of links to display. After some basic comparasing it decides the start and the end number of page links to display and renders then (all but the current page) as calls to Infragistics “igtbl_pageGrid” function.

The call to renderPagerLinks function can be placed in client-side InitializeLayout grid event, for example:

function xuwgMyGrid_InitializeLayoutHandler(gridName) {
    renderPagerLinks(gridName, 'xspanPagerLinks',
                        igtbl_getGridById(gridName).CurrentPageIndex, 10);
}

This location may not work if grid’s LoadOnDemand is set to “XML”, alternative location to the call may need to be selected.

When implemented correctly, the solution above will provide consistent number of page links.  For example if your grid has 100 pages and you set it to display 10 page links, grid will behave like this:

• If you’re at the 1st page – you will see links 1 thru 10
• If you’re on the 3rd page – you will still see links 1 thru 10 (2 behind current and 7 ahead)
• If you’re on 100th page – you will see pages 91 thru 100
• If you’re on 50th page – you will see pages 46 thru 55 (4 pages behind current and 5 ahead)

Always consistently seeing 10 page links.