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

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:

Here is the code for my grid:

    <TelerikGrid Data="@RunningCodes"
             AutoGenerateColumns="false"
             FilterMode="@GridFilterMode.FilterRow"
             Pageable="true"
             PageSize="20">
        <GridColumns>
            <GridColumn Field="@nameof(RunningCode.CodeType)" />
            <GridColumn Field="@nameof(RunningCode.Host)" />
            <GridColumn Field="@nameof(RunningCode.Name)" />
            <GridColumn Field="@nameof(RunningCode.Description)" />
            <GridColumn Field="@nameof(RunningCode.LastRunResults)" />
            <GridColumn Field="@nameof(RunningCode.NextRun)" />
            <GridColumn Field="@nameof(RunningCode.IsBanned)" />
            <GridColumn Field="@nameof(RunningCode.StartupType)" />
            <GridColumn Field="@nameof(RunningCode.Status)" />
        </GridColumns>
    </TelerikGrid>

Any idea why my pager looks like this at the bottom of the grid?

When I upgraded to 3.6.0 my TelerikGrid pager stopped rendering correctly.

The first image below is after the page has been rendered and the data source contains 10 rows.  Paging is enabled using a server-side data source/database repository.  The second image below is simply what it looks like when I click on the dropdown.

If I hit refresh I see the normal-looking pager with 7 buttons horizontal as expected.  Like the one that works with version 3.5.0, included below.
But it only appears for a second and then it changes back to the one above.

The grid OnReadHandler looks like this:

protected async Task OnReadHandler(GridReadEventArgs args)
{
    InquiryResponse<Drug> response = await _drugAdapter.FindByDataSourceRequestAsync(args.Request, true);
    if (response.ResponseData.Any())
    {
        args.Data = response.ResponseData;
    }
    args.Total = response.AvailableTotalItems;
}

All downstream methods are async and await is used on all method calls just like I have seen in the demos for using remote data service.

The grid is defined as follows:

<TelerikGrid @ref="@DrugListGridRef"
             TItem="@Drug"
             OnRead="@OnReadHandler"
             Sortable="true"
             SortMode="@SortMode.Multiple"
             EnableLoaderContainer="false"
             FilterMode="@GridFilterMode.FilterMenu"
             Pageable="true"
             PageSize="@PageSize"
             Resizable="true">

    
    <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Buttons"
                           PageSizes="@PageSizes"
                           ButtonCount="7"
                           Adaptive="true">
        </GridPagerSettings>
    </GridSettings>

If I downgrade to 3.5.0 everything works as expected.

Thanks,
Ed