[Solved] Customize Kendo Grid Pagination

1 Answer 124 Views

Grid Pager

1 Answer, 1 is accepted

answered on 04 Mar 2025, 08:38 AM

Hi Abdul.

Thank you for the images and the details provided.

This is a custom requirement, but you can start with the following Pager:

    .Pageable(p => p
        .PageSizes(new int[] { 20, 50, 100 })
        .PreviousNext(false)
        .Numeric(false)
        .Info(true)
    )

and CSS:

    .k-pager {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 5px 10px;
    }
    
    .k-pager-info {
        order: 1;
    }
    
    .k-pager-sizes {
        order: 2;
        display: flex;
        align-items: center;
        gap: 5px;
        margin-left: auto;
    }
    
    .k-pager-sizes span {
        white-space: nowrap;
    }
    
    .k-pager-sizes .k-dropdownlist {
        display: flex;
        align-items: center;
    }
    
    .k-pager-sizes .k-input-inner {
        display: flex;
        align-items: center;
    }

Here is a REPL example:

https://netcorerepl.telerik.com/GJOHOyOs37bYPgPE38

In order to achieve the desired behavior, I would recommend using custom CSS or a template and the API of the Pager:

https://docs.telerik.com/kendo-ui/api/javascript/ui/pager

I hope thi information helps.

Kind Regards,
Anton Mironov
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!