Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfPager

    Show / Hide Table of Contents

    Class SfPager

    Methods partial class

    Inheritance
    System.Object
    SfBaseComponent
    SfPager
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Navigations
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SfPager : SfBaseComponent

    Constructors

    SfPager()

    Declaration
    public SfPager()

    Properties

    Created

    An event that is raised when Pager component is created.

    Declaration
    public EventCallback Created { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback
    Examples
    <SfPager PageSize=5 Created="HandlePagerCreated" TotalItemsCount=100>
    </SfPager>
    @code{
       public void HandlePagerCreated()
       {
        // Enter the code here...
       }
    }

    CssClass

    Gets or sets the CSS class name, that can be appended with the root element of the Pager. One or more custom CSS classes can be added to the Pager.

    Declaration
    public string CssClass { get; set; }
    Property Value
    Type Description
    System.String

    Property in which the CSS classes are added. The default value is an empty string.

    CurrentPage

    Gets or sets the current page number of the Pager.

    Declaration
    public int CurrentPage { get; set; }
    Property Value
    Type Description
    System.Int32

    The entered page number is shown when the Pager is rendered, by default the value is 1.

    Remarks

    If the given current page number is greater than the total number of pages present in the pager, then by default the first page will be the current page.

    EnablePersistence

    Gets or sets whether to enable the persistence in the Pager, It will allow access to store the current state of the Pager.

    Declaration
    public bool EnablePersistence { get; set; }
    Property Value
    Type Description
    System.Boolean

    true If EnablePersistence is set to true, It will store the pager state such as current page, page size, current focus, and pager dropdown in the window.localStorage when the component is disposed.

    Remarks

    By default the EnablePersistence is set to false.

    ID

    Gets or sets the ID of the Pager component.

    Declaration
    public string ID { get; set; }
    Property Value
    Type Description
    System.String

    Property which maps the given value to the Pager ID.

    ItemClick

    An event that is raised when the numeric item is clicked.

    Declaration
    public EventCallback<PagerItemClickEventArgs> ItemClick { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PagerItemClickEventArgs>
    Remarks

    This event handler receives a object which provides the details of new page navigation.

    Examples
    <SfPager ItemClick="HandletemClick" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
    </SfPager>
    @code{
       public void HandletemClick(PagerItemClickEventArgs args)
       {
          // Enter the code here
       }
    }

    NumericItemPrefix

    Gets or sets the text to append as a prefix with numeric values in the Pager.

    Declaration
    public string NumericItemPrefix { get; set; }
    Property Value
    Type Description
    System.String

    A prefix for numeric item. The default value is string.Empty.

    NumericItemsCount

    Gets or sets a value that indicates the number of page numeric buttons shown on the pager user interface.

    Declaration
    public int NumericItemsCount { get; set; }
    Property Value
    Type Description
    System.Int32

    The number of page numeric buttons shown on the pager UI.

    Remarks

    If

    NumericItemsCount
    is 5 and the total number of pages is 20, then the pager will display numeric buttons for pages 1 to 5. Users can navigate beyond this range using the next page and end-page buttons. Also, if the given numeric items count is greater than the total number of pages, then all the pages are shown in the Pager component.

    PageChanged

    An event that is raised when navigated to a new page.

    Declaration
    public EventCallback<PageChangedEventArgs> PageChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PageChangedEventArgs>
    Remarks

    This event handler receives a object which provides the details of navigated page.

    Examples
    <SfPager PageSize=5 PageChanged="HandlePageChanged" NumericItemsCount=4 TotalItemsCount=100>
    </SfPager>
    @code{
       public void HandlePageChanged(PageChangedEventArgs args)
       {
          // Enter the code here  
       }
    }

    PageChanging

    An event that is raised when navigating to a new page.

    Declaration
    public EventCallback<PageChangingEventArgs> PageChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PageChangingEventArgs>
    Remarks

    This event handler receives a object which provides the details of new page navigation.

    Examples
    <SfPager PageSize=5 PageChanging="HandlePageChanging" NumericItemsCount=4 TotalItemsCount=100>
    </SfPager>
    @code{
       public void HandlePageChanging(PageChangingEventArgs args)
       {
          // Enter the code here 
       }
    }

    PageSize

    Gets or sets the number of items shown on a single page.

    Declaration
    public int PageSize { get; set; }
    Property Value
    Type Description
    System.Int32

    The number of items shown on a single page, by default the value is 12.

    Remarks

    When the given page size is greater than the total items present in the Pager, then all the items are dispalyed in the current page.

    PageSizeChanged

    An event that is raised, While dynamically change the pager size by using pager dropdown.

    Declaration
    public EventCallback<PageSizeChangedArgs> PageSizeChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PageSizeChangedArgs>
    Remarks

    This event handler receives a object which provides the details of updated pagesize.

    Examples
    <SfPager PageSize=5 PageSizes=@pagesizes PageSizeChanged="HandlePageSizeChanged" TotalItemsCount=100>
    </SfPager>
    @code{
       public List<int> pagesizes = new List<int> { 5, 10, 12, 20 }; 
       public void HandlePageSizeChanged(PageSizeChangedArgs args)
       {
        // Enter the code here...
       }
    }

    PageSizeChanging

    An event that is raised, when dynamically changing the page size using the page sizes dropdown.

    Declaration
    public EventCallback<PageSizeChangingArgs> PageSizeChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PageSizeChangingArgs>
    Remarks

    This event handler receives a object which provides the details of current pagesize.

    Examples
    <SfPager PageSize=5 PageSizes=@pagesizes PageSizeChanging="HandlePageSizeChanging" TotalItemsCount=100 >
    </SfPager>
    @code{
       public List<int> pagesizes = new List<int> { 5, 10, 12, 20 };    
       public void HandlePageSizeChanging(PageSizeChangingArgs args)
       {
        // Enter the code here...    
       }
    }

    PageSizes

    Gets or sets the list of items in the Pager dropdown. Update what number of items can be rendered on a page by changing the dropdown value.

    Declaration
    public List<int> PageSizes { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.List<System.Int32>

    The list of items to be shown in the Pager dropdown, by default the value is set to null.

    Remarks

    When one of the given page sizes is greater than the total items present in the Pager, when the particular dropdown is chosen all the items are dispalyed in the current page.

    Examples
    <SfPager PageSizes=@pagesizes PageSize=10 TotalItemsCount=100 >
    </SfPager>
    @code{
       public List<int> pagesizes = new List<int> { 5, 10, 12, 20 };
    }

    ShowAllInPageSizes

    Gets or sets whether to add a All as one of the option in the Pager dropdown list. Total items can be rendered while changing the Pager dropdown value as All.

    Declaration
    public bool ShowAllInPageSizes { get; set; }
    Property Value
    Type Description
    System.Boolean

    true If ShowAllInPageSizes is set to true, then added All value as one of the option in PageSizes.

    Remarks

    PageSizes should be updated with list items for this property, otherwise it's not needed. The default value is false.

    ShowPagerMessage

    Gets or sets whether to enable or disable the Pager message, displayed on the right side of the Pager icons.

    Declaration
    public bool ShowPagerMessage { get; set; }
    Property Value
    Type Description
    System.Boolean

    true If ShowPagerMessage is set to true, the pager information such as the current page, total pages, and total records count is displayed.

    Remarks

    By default the ShowPagerMessage is set to true.

    Template

    Gets or sets the template to customize the pager UI with customized elements instead of the default UI.

    Declaration
    public RenderFragment<object> Template { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment<System.Object>

    The template content.

    Remarks

    Use the template’s context parameter to access a PagerTemplateContext and its fields.

    Examples
    <SfPager @ref = "Page" TotalItemsCount="100" PageSize="10">
    <Template>
    @{
        var pagerContext = (context as PagerTemplateContext);
        <span>
            Page<SfNumericTextBox TValue="int" Value=@pagerContext.CurrentPage Width="40px" ShowSpinButton="false">
                <NumericTextBoxEvents TValue = "int" ValueChange="PageValueHandler"></NumericTextBoxEvents>
            </SfNumericTextBox> of<b> @pagerContext.TotalPages</b> pages.
        </span>
    }
    </Template>
    </SfPager>
    @code {
    SfPager Page;
    private async Task PageValueHandler(ChangeEventArgs<int> args)
    {
         await Page.GoToPageAsync(args.Value);
    }
    }

    TotalItemsCount

    Gets or sets the total number of items, to calculate Syncfusion.Blazor.Navigations.SfPager.TotalPages count based on PageSize.

    Declaration
    public int TotalItemsCount { get; set; }
    Property Value
    Type Description
    System.Int32

    The number of total items present in the pager component to calculate Syncfusion.Blazor.Navigations.SfPager.TotalPages.

    Methods

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    GoToFirstPageAsync()

    Navigates to the first page in the Pager, by traversing the previous pagers if present in the Pager component.

    Declaration
    public Task GoToFirstPageAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    Remarks

    If the current selected page is the first page of the Pager, then no actions will be performed in the Pager component.

    Examples
    <button @onclick="HandleButtonClick">GoToFirstPage</button>
    <SfPager @ref="Pager" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
     ........
    </SfPager>
    @code{
       SfPager Pager;
       private async Task HandleButtonClick()
       {
         await Pager.GoToFirstPageAsync();
       }
    }

    GoToLastPageAsync()

    Navigates to the last page in the Pager by traversing the next pagers, if present in the Pager component.

    Declaration
    public Task GoToLastPageAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    Remarks

    If the current selected page is the last page of the Pager, then no actions will be performed in the Pager component.

    Examples
    <button @onclick="HandleButtonClick">GoToLastPage</button>
    <SfPager @ref="Pager" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
     ........
    </SfPager>
    @code{
       SfPager Pager;
       private async Task HandleButtonClick()
       {
         await Pager.GoToLastPageAsync();
       }
    }

    GoToNextPageAsync()

    Navigate to the next page in the Pager. Consider the currently selected page is the last numeric item of the Pager, then it's loaded the next set of numeric items if it exists.

    Declaration
    public Task GoToNextPageAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    Remarks

    If the currently selected page is the last page of the Pager and if the next page icon and the last page icon is disabled, then no actions will be performed.

    Examples
    <button @onclick="HandleButtonClick">GoToNextPage</button>
    <SfPager @ref="Pager" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
     ........
    </SfPager>
    @code{
       SfPager Pager;
       private async Task HandleButtonClick()
       {
         await Pager.GoToNextPageAsync();
       }
    }

    GoToPageAsync(Int32)

    Navigates to the given page number in the Pager, it can also fetch the given page by traversing between the next and previous pagers if present in the Pager component.

    Declaration
    public Task GoToPageAsync(int pageNo)
    Parameters
    Type Name Description
    System.Int32 pageNo

    Enter the page number to be shown in the Pager.

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    Remarks

    When the given page number is greater than the total pages, then no actions will be performed in the Pager.

    Examples
    <button @onclick="HandleButtonClick">GoToPage</button>
    <SfPager @ref="Pager" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
     ........
    </SfPager>
    @code{
       SfPager Pager;
       private async Task HandleButtonClick()
       {
         await Pager.GoToPageAsync(10); // pass the page number here.    
       }
    }

    GoToPreviousPageAsync()

    Navigate to the previous page in the Pager. Consider the currently selected page is the first numeric item of the Pager, then it's loaded the previous set of numeric items if it exists.

    Declaration
    public Task GoToPreviousPageAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    Remarks

    If the currently selected page is the first page of the Pager and if the previous icon and the previous page icon is disabled, then no actions will be performed.

    Examples
    <button @onclick="HandleButtonClick">GoToPreviousPage</button>
    <SfPager @ref="Pager" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
     ........
    </SfPager>
    @code{
       SfPager Pager;
       private async Task HandleButtonClick()
       {
         await Pager.GoToPreviousPageAsync();
       }
    }

    OnAfterRenderAsync(Boolean)

    Method invoked after each time the component has been rendered.

    Declaration
    protected override Task OnAfterRenderAsync(bool firstRender)
    Parameters
    Type Name Description
    System.Boolean firstRender

    Set to true for the first time component rendering; otherwise gets false.

    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Overrides
    SfBaseComponent.OnAfterRenderAsync(Boolean)

    OnInitializedAsync()

    Method invoked when the component is ready to start.

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task
    Overrides
    SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Method invoked when the component has received parameters from its parent in the render tree.

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    RefreshAsync()

    Applies all the property changes and re-renders the component again.

    Declaration
    public Task RefreshAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    Examples
    <button @onclick="HandleButtonClick">Refresh</button>
    <SfPager @ref="Pager" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
     ........
    </SfPager>
    @code{
       SfPager Pager;
       private async Task HandleButtonClick()
       {
         await Pager.UpdatePageSizeAsync(10);
         await Pager.RefreshAsync();
       }
    }

    SetParametersAsync(ParameterView)

    Sets parameters supplied by the component's parent in the render tree.

    Declaration
    public override Task SetParametersAsync(ParameterView parameters)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.ParameterView parameters
    Returns
    Type Description
    System.Threading.Tasks.Task

    UpdateNumericItemsCountAsync(Int32)

    Used to update the number of numeric elements shown in the Pager component, and the next pager icon is used to get the next set of entered numeric pages count, likewise the previous pager icon is used to traverse backward between the pages.

    Declaration
    public Task UpdateNumericItemsCountAsync(int numericItemCount)
    Parameters
    Type Name Description
    System.Int32 numericItemCount

    The given number of numeric elements are shown in the Pager.

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    Remarks

    If the given numeric item count is greater than the total pages present in the Pager, then all the numeric items are shown in the Pager component.

    Examples
    <button @onclick="HandleButtonClick">UpdateNumericItemsCount</button>
    <SfPager @ref="Pager" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
     ........
    </SfPager>
    @code{
       SfPager Pager;
       private async Task HandleButtonClick()
       {
         await Pager.UpdateNumericItemsCountAsync(6); // pass the numeric items count here.    
       }
    }

    UpdatePageSizeAsync(Int32)

    Used to update the page size of the Pager to change the number of items that can be rendered on a Page.

    Declaration
    public Task UpdatePageSizeAsync(int pageSize)
    Parameters
    Type Name Description
    System.Int32 pageSize

    The number of items to be shown on a page.

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    Remarks

    By changing the page size, the Pager component dynamically updates the total number of pages, numeric item count, next, and previous pagers count according to the given page size and updates the UI.

    Examples
    <button @onclick="HandleButtonClick">UpdatePageSize</button>
    <SfPager @ref="Pager" PageSize=5 NumericItemsCount=4 TotalItemsCount=100>
     ........
    </SfPager>
    @code{
       SfPager Pager;
       private async Task HandleButtonClick()
       {
         await Pager.UpdatePageSizeAsync(10); // pass the page size here.    
       }
    }
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved