<GridSettings>
<GridPagerSettings InputType="PagerInputType.Input"
PageSizes="@PageSizes"
ButtonCount="5"
Adaptive="true"
Position="PagerPosition.Bottom">
</GridPagerSettings>
</GridSettings>
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
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.
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>

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".
I have tried the following code on the official page of the Telerik pager
</TelerikPager>
@{
}
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?
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.
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?
I recall being told I would have access to source code once I buy a licence.
Now that I have a licence, how do I get access to the source so I can do a local build?
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: