[Solved] Customize Kendo Grid Pagination

[abdul]

Hi,

I wanted to Customize Kendo Grid Pagination as per the screenshot below. 

I tried the paging properties but nothing works.

I want the pagination style from 

 

 

To this

[Anton Mironov]

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