.k-pager-numbers-wrap {
        display: none;
    }

Daniel's above approach is what I can use with version 2.21.1. Just arrows. Custom pager does not work when items filtered by searchbox. This way I have a less functional but better looking mobile views.

 

 

Yes, a combination of these two features, is what our product owner is asking for.

It would be nice if when implementing this feature we could set the max number of pages to show on any display resolution.

I worked around this by adding a display:none style rule for the k-pager-numbers-wrap class to hide the page number buttons when I hit a small enough breakpoint.  You're left with just the arrows.

 

@media (max-width: 767.98px) {
    .k-pager-numbers-wrap {
        display: none;
    }
}

Just to add to this, my ideal scenario for default behaviour would be something like this:

• As the page width reduces the number of page buttons reduces to the point they are not displayed if necessary.
• The height of the pager doesn't increase. It does this currently because the "1 - 50 of 11438 items" text flows over 2 lines despite not actually being shown on the screen because it is cut off. Possibly this text could just be hidden at a certain point
  

Also it would nice to have options to:

1. Not show the page buttons at all (just the arrows).

2. Choose the maximum number of page buttons to display.