Change Pagination Design for igGrid (Ignite UI 24.1.9)

Hello,

I hope you are doing well.

I would like to ask for guidance on how to change the pagination design of igGrid.

Currently, we are using the following versions:

• IgniteUI (Infragistics): 24.1.9

• Infragistics.Web.Mvc: 5.24.1.2

Our goal is to modify the pagination layout of the igGrid. Specifically, we would like to change it from the design shown in Image 1 to the design shown in Image 2.

image 1

Image 2

Could you please advise:

• What configuration or option should be modified to achieve this?

• Where should the adjustment be applied (JavaScript configuration, MVC helper, CSS, or another component)?

• If there is a recommended approach for customizing the pager layout in this version.

I am attaching the images for reference.

Thank you very much for your support.

Hello,

Thank you for posting in our community!

After looking into both images, what I can say is that the desired look can be achieved by setting some of the IgGrid Paging properties and slightly adjusting the CSS.

The usual look of the IgGrid Paging (which is observed in the first image) is achieved by simply using this code:

.Features(f =>
{
    f.Paging()
        .PageSize(10);
})

To achieve the design in the second image, you will need to:

1. Remove the pager records label (“1 – 10 of 10 records”)
2. Remove the first and last page buttons
3. Move the drop-down in the pager
4. Change the drop-down label from “Show” to “Ver”
5. Remove the drop-down trailing label (“records”)
6. Remove the “Prev” and “Next” button labels.
7. (Optional) Always show one page count. (< 1 > and not < 1 2 3 >)
8. Align Next, Page Count, and Last buttons to the left and the drop-down to the right.

Points 1 to 7 can be handled via the paging properties:

.Features(f =>
{
    f.Paging()
        .PageSize(10)
        .ShowPagerRecordsLabel(false) // handles 1
        .ShowFirstLastPages(false) // handles 2
        .PageSizeDropDownLocation("inpager") // handles 3
        .Locale( // handles 4, 5, 6
            @"{
                pageSizeDropDownLabel: 'Ver',
                pageSizeDropDownTrailingLabel: '',
                prevPageLabelText: '',
                nextPageLabelText: ''
            }"
        )
        .VisiblePageCount(1); // handles 7
})

 

Point 8 can be handled via CSS:

.ui-iggrid .ui-iggrid-paging {
    float: none;
}
div.ui-helper-clearfix.ui-iggrid-pagesizedropdowncontainer {
    float: right;
}

All supported options can be found in the IgGrid Paging API documentation here.

Please test it on your side and let me know if you need any further information on the matter.

Sincerely,
Riva Ivanova
Software Developer