Telerik Forums
UI for Blazor Forum
1 answer
43 views
We want to customise the controls inside the Grid's pager. 

With the following settings it's generating what's in the actual.png.  We would like to achieve the template in required.png.

Is it possible to move the controls and change the content inside the pager?

    <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Input"
                           PageSizes="@PageSizes"
                           ButtonCount="5"
                           Adaptive="true"
                           Position="PagerPosition.Bottom">
        </GridPagerSettings>
    </GridSettings>

CJ
Top achievements
Rank 2
Iron
 updated question on 17 Apr 2025
1 answer
142 views

Hi, i need to design a class to handle pagination in my api endpoints, so i have a question about 2 properties of DataSourceRequest.

Page: I assume it's used only in pagination to set the page number.

Skip: I assume it's used only on virtual pagination to define the records to skip. 

I think this 2 properties as mutual exclusive (if used Page, Skip is ignored, if used Skip, Page is ignored).

Is this true or there are situations where are both used?  

and if one exclude the other... why you have not handled the pagination only with Skip / Take properties (assumed who Take correspond to PageSize in classic pagination, Page can be calculated as (Skip / Take) + 1)?

i need this answers because if this properties are multual exclusive i assume i can design my pagination class with only 2 properties (Skip / Take) instead of 3 (Page / PageSize / Skip) as done in DataSourceRequest object.

Thanks

 

Thanks

 

 

Nansi
Telerik team
 answered on 21 May 2024
1 answer
83 views

I have a TelerikGrid with paging enabled. The pager on the left hand side displays the page numbers as buttons, and on the right hand side displays the current items being displayed and the total number of items. The problem is that the right-hand side '1 - 1000 of 440000000' does not format the numbers, and for a grid with millions of possible rows reading the exact numbers is difficult.

So I wrote a little javascript to manipulate the dom and format these numbers. In particular I query the document for 'span.k-pager-info' and manipulate the innerText property. This works fine until I filter my grid, at which point it re-fetches data from the db BUT does NOT update that span with the new filtered innerText. In fact, any manipulation with javascript of the 'span.k-page-info' element causes that element to no longer be updated upon filtering data. Why? Is there any other way to format the numbers in the pager so that they display more clearly (ie. 44,000,000)?

Much thanks to all.

Tsvetomir
Telerik team
 answered on 29 Apr 2024
0 answers
59 views

I'm having trouble with my grid where I am unable to page through my results. I have 200 items in the grid and when I click on any of the buttons on the pager nothing happens. Here is my code 

Bonus points if someone can make me understand why my Tooltip isnt working either lol.

<TelerikGrid class="NewPairsGrid" Data="@Pairs" AutoGenerateColumns="false" RowHeight="15" Height="1000px" Pageable="true" PageSize="25" ><GridColumns><GridColumn Title="Pair Info" width="200px"><Template Context="dataItem"><div> @DisplayTokenImage(dataItem as EthPairTradeInfoVDto) @($"{(dataItem as EthPairTradeInfoVDto).TokenSymbol} / {(dataItem as EthPairTradeInfoVDto).LpTokenSymbol} - {(dataItem as EthPairTradeInfoVDto).TokenName}") </div></Template></GridColumn><GridColumn Title="Total Price ETH" width="150px"><Template Context="dataItem"><div> @FormatPrice(dataItem as EthPairTradeInfoVDto) </div><div> @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto) { var UsdPrice = ethPairTradeInfoVDto.CurrentPriceUsd.GetValueOrDefault(); @if (UsdPrice > 0) { @($"${UsdPrice} USD") ; } else { @("Looking for USD Price.../") ; } } </div></Template></GridColumn><GridColumn Field="PairCreatedTimeStamp" Title="Token Age" width="75px"><Template Context="dataItem"> @if (IsLessThanHour(dataItem as EthPairTradeInfoVDto)) { <i class="fas fa-leaf"></i> } @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto) { var timestamp = CalculateElapsedTime(dataItem as EthPairTradeInfoVDto); <span class="tooltip-target">@timestamp</span><TelerikTooltip TargetSelector=".tooltip-target" Width="250px" Height="150px" Position="@TooltipPosition.Right"><Template Context="ttipContext"><span> Timestamp: @(ttipContext.DataAttributes) </span></Template></TelerikTooltip> } @* @CalculateElapsedTime(dataItem as EthPairTradeInfoVDto) *@ </Template></GridColumn></GridColumns></TelerikGrid>

 


Jake
Top achievements
Rank 1
 asked on 11 Apr 2024
1 answer
115 views

I'm having trouble finding the cause of why the display has changed and the paging control is cutting off the value.  I can't see the difference from the Telerik doc examples.

 

or ...

The width of the browser window or resolution doesn't have any effect.

We are using the "_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css".

 

 

Dimo
Telerik team
 updated answer on 07 Mar 2024
1 answer
141 views

I have tried the following code on the official page of the Telerik pager

<TelerikPager Total="@Games.Count"
              ButtonCount="5"
              PageSize=@PageSize
              Page=@Page
              PageSizes="@PageSizesList">

</TelerikPager>

@{

    // take and render the relevant data portion based on the pager info
    var pageData = Games.Skip((Page - 1) * PageSize).Take(PageSize).ToList();
    @foreach (Game game in pageData)
    {
        <div style="display: inline-block;border: solid;padding: 10px;margin: 10px">
            @game.GameName
        </div>
    }
}
@code {
    public List<int?> PageSizesList { get; set; } = new() { 10, 20, 30 };
    public int PageSize { get; set; } = 20;
    public int Page { get; set; } = 1;
    public List<Game> Games { get; set; }
    protected override void OnInitialized()
    {
        Games = new List<Game>();
        for (int i = 1; i <= 20; i++)
        {
            Games.Add(new Game()
                {
                    GameId = i,
                    GameName = $"Game {i}"
                });
        }
    }
    public class Game
    {
        public int GameId { get; set; }
        public string GameName { get; set; }
    }

}

The output is as follows:

 

Image 1. Output

Image 2: Items per page show all options

I've configured a PageSize of 20 with PageSizes as {5, 6, 7, 8, 9, 10, 20}, and intentionally excluded null to avoid an "All"

option in the items-per-page dropdown.

However, when the PageSize matches the total count of data (20 in this instance), the dropdown doesn't automatically

select the matching option (20).

In the second image, all dropdown options are visible, but the appropriate option (20) isn't auto-selected.

What is the solution to this issue?

Radko
Telerik team
 answered on 01 Jan 2024
2 answers
119 views

Is it possible to customize the appearance of input and page size dropdown controls in the TelerikPager control or the pager of the TelerikGrid control?

Our application uses the Material theme and all controls are using the Outline FillMode but I cannot change the Pages dropdown control of the grid's default pagger.

I can use the GridPagerTemplate to change the default pager with a customized one but still the TelerikPager control does not allow configuration of the TelerikNumericBox control behind the PagerInput control and the TelerikDropDownList behind the PagerDropDownList control.

Constantinos Petridis
Top achievements
Rank 1
Iron
Iron
 answered on 10 Nov 2023
0 answers
91 views

When I have a page with a fixed width sidebar, and the pager is in the content area of the page, the adaptive rendering of the pager does not work correctly.   I would expect that as the screen size gets smaller, that the pager will start to drop off the page info and the page size dropdown.  However, it doesn't do this, and it creates a horizontal scrollbar across the page.  Here is a repl illustrating the issue:

https://blazorrepl.telerik.com/wxOIPSvd41wFZsZO20

In my troubleshooting, it looks like the adaptive code to drop off the page info and page size is done somewhere in javascript, and I can't find what logic is being used to set a display: none Style on those items.

What can be done to get this functionality to work when there is a sidebar layout?

 

Mike
Top achievements
Rank 1
Iron
Iron
 asked on 14 Apr 2023
1 answer
114 views

I've made a simple blazor repl demo here: https://blazorrepl.telerik.com/mmlYatun39gTFEgO21

As you can see, TotalCount is 10, and the current PageSize is also 10. When these values match, the value in the "items per page" dropdown isn't present. Select any other value, and it will be present (for 5, 20, 40). Come back to 10, and again, the value disappears.

Image examples, with items per page set to 10, then 5:

Hristian Stefanov
Telerik team
 answered on 12 Oct 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?