<div class="custom-pager">
    <TelerikGrid Data="@Data" Pageable="true" @bind-Page="@CurrentPage" PageSize="@PageSize" AutoGenerateColumns="true">
    </TelerikGrid>

    <TelerikPager Total="@Data.Count()" @bind-Page="@CurrentPage" PageSize="@PageSize" ButtonCount="3" />
</div>

@code {
    int CurrentPage { get; set; } = 1;
    int PageSize { get; set; } = 5;
    IEnumerable<SampleData> Data { get; set; } = Enumerable.Range(1, 300).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

<style>
    /* hide the built-in grid pager */
    .custom-pager .k-grid .k-pager-wrap {
        display: none;
    }

    /* just to showcase how the wrapper contrls the width of both components since they are now separate */
    .custom-pager{
        width: 600px;
    }
</style>