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.    
   }
}