Skip to content

Commit 0a77c93

Browse files
svdimitrmarin-bratanov
svdimitr
authored and
marin-bratanov
committed
docs(pager): Created an events.md; Added new example to showcase the Pager with NumricTextBox; Better clarity in explanations
1 parent f0775a4 commit 0a77c93

File tree

3 files changed

+110
-70
lines changed

3 files changed

+110
-70
lines changed

‎components/pager/events.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: Pager
3+
page_title: Pager for Blazor | Events
4+
description: Add a page navigation to Blazor application
5+
slug: pager-events
6+
tags: telerik,blazor,pager,paging
7+
published: True
8+
position: 20
9+
---
10+
11+
# Pager Events
12+
13+
This article explains the events available in the Telerik Pager for Blazor:
14+
15+
## PageChanged
16+
17+
The `PageChanged` event fires a new page is selected.
18+
19+
>caption Handle PageChanged
20+
21+
````CSHTML
22+
@*This example showcases the usage of Page and PageChanged in conjunction*@
23+
24+
<TelerikPager Total="TotalItems"
25+
ButtonCount="ButtonCount"
26+
PageSize="ItemsOnPage"
27+
Page="CurrentPage"
28+
PageChanged="@( (int page) => PageChangedHandler(page) )">
29+
30+
</TelerikPager>
31+
32+
<div class="text-info">@Result</div>
33+
34+
@code {
35+
public int TotalItems { get; set; } = 80;
36+
public int ButtonCount { get; set; } = 4;
37+
public int ItemsOnPage { get; set; } = 10;
38+
public int CurrentPage { get; set; } = 2;
39+
public string Result { get; set; } = String.Empty;
40+
41+
void PageChangedHandler(int page)
42+
{
43+
CurrentPage = page;
44+
Result = $"Current page: {page}";
45+
}
46+
}
47+
````
48+
>caption The result from the code snippet above
49+
50+
![config of the pager with one-way binding](images/pager-data-binding.gif)

‎components/pager/images/checkbox-page-selection-outside-input.gif

39.4 KB
Loading

‎components/pager/overview.md

Lines changed: 60 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -15,101 +15,91 @@ The **Pager** component will enable you to add paging for your data in a Blazor
1515
To use Telerik Pager component for Blazor:
1616

1717
1. Add the `TelerikPager` tag
18-
1. (optional) Populate it's `Total` parameter
19-
1. (optional) Set it's `ButtonCount` parameter
20-
1. (optional) Set the `PageChanged` parameter
21-
1. (optional) Set `Page` or `@bind-Page` (one and two-way data binding)
22-
1. (optional) Set a `PageSize`
18+
1. The Pager component provides the UI for the user and the page index and an [event]({%slug pager-events%}) for the developer. It is up to the application to fetch the appropriate data based on that information.
2319

24-
>caption Basic setup of Pager component in your application
20+
>caption Implement TelerikPager to your own component
2521
2622
````CSHTML
27-
@*Basic Pager configuration.*@
23+
@{
24+
var pageData = Games.Skip((Page - 1) * PageSize).Take(PageSize).ToList();
2825
29-
<TelerikPager Total="TotalItems"
30-
ButtonCount="ButtonCount"
31-
PageSize="ItemsOnPage"
32-
@bind-Page="CurrentPage">
33-
34-
</TelerikPager>
35-
36-
@code {
37-
public int TotalItems { get; set; } = 80;
38-
public int ButtonCount { get; set; } = 4;
39-
public int ItemsOnPage { get; set; } = 10;
40-
public int CurrentPage { get; set; } = 2;
26+
foreach (Game game in pageData)
27+
{
28+
<div class="card mb-1">
29+
<div class="card-body">
30+
<h5>@game.GameName</h5>
31+
<h6 class="card-subtitle mb-2 text-muted">@game.GameId</h6>
32+
<p class="card-text">
33+
Released on: @game.ReleaseDate.ToShortDateString()
34+
</p>
35+
</div>
36+
</div>
37+
}
4138
}
42-
````
43-
44-
>caption The result from the code snippet above
45-
46-
![basic configuration of the pager](images/pager-basic-configuration-screenshot.jpg)
47-
48-
## Features
49-
* `Class` - The CSS class that will be rendered on the main wrapping element of the Pager.
50-
* `Total` - **int** - Represents the total count of items in the pager.
51-
* `ButtonCount` - **int** - The number of pages to be visible. To take effect the `ButtonCount` must be **less** than the pages count (ButtonCount < Total / number of items on the page)
52-
* `Page` and `@bind-Page` - **int** - Represents the current page of the pager. Those parameters are respectively for one and two-way data binding. If no `Page` or `@bind-Page` are provided they will default to the first page (1).
53-
* `PageChanged` - Fires when a new page is selected (used in one-way data binding).
54-
* `PageSize` - **int** - The number of items to be presented on a page.
55-
56-
## Examples
5739
58-
>caption Observe the behavior of the Pager with one-way data binding
59-
60-
````CSHTML
61-
@*This example showcases the usage of Page and PageChanged in conjunction*@
62-
63-
<TelerikPager Total="TotalItems"
64-
ButtonCount="ButtonCount"
65-
PageSize="ItemsOnPage"
66-
Page="CurrentPage"
67-
PageChanged="@( (int page) => PageChangedHandler(page) )">
68-
69-
</TelerikPager>
70-
71-
<div class="text-info">@Result</div>
40+
<TelerikPager Total="@Games.Count" PageSize="@PageSize" @bind-Page="@Page"></TelerikPager>
7241
7342
@code {
74-
public int TotalItems { get; set; } = 80;
75-
public int ButtonCount { get; set; } = 4;
76-
public int ItemsOnPage { get; set; } = 10;
77-
public int CurrentPage { get; set; } = 2;
78-
public string Result { get; set; } = String.Empty;
43+
public int PageSize { get; set; } = 3;
44+
public int Page { get; set; } = 1;
45+
46+
public List<Game> Games { get; set; }
7947
80-
void PageChangedHandler(int page)
48+
//In real-case scenario this model should be in a separate file
49+
public class Game
50+
{
51+
public string GameName { get; set; }
52+
public int GameId { get; set; }
53+
public DateTime ReleaseDate { get; set; }
54+
}
55+
//Generate sample data
56+
protected override void OnInitialized()
8157
{
82-
CurrentPage = page;
83-
Result = $"Current page: {page}";
58+
Games = new List<Game>();
59+
for (int i = 0; i < 20; i++)
60+
{
61+
Games.Add(new Game()
62+
{
63+
GameName = $"Game {i}",
64+
GameId = i + 1,
65+
ReleaseDate = DateTime.Now.AddDays(i)
66+
});
67+
}
8468
}
8569
}
8670
````
87-
>caption The result from the code snippet above
8871

89-
![config of the pager with one-way binding](images/pager-data-binding.gif)
72+
## Features
73+
* `Class` - The CSS class that will be rendered on the main wrapping element of the Pager.
74+
* `Total` - ``int`` - Represents the total count of items in the pager.
75+
* `ButtonCount` - ``int`` - The maximum number of pages to be visible. To take effect the `ButtonCount` must be **less** than the pages count (ButtonCount < Total / number of items on the page).
76+
* `Page` and `@bind-Page` - ``int`` - Represents the current page of the pager. Those parameters are respectively for one and two-way data binding. If no `Page` or `@bind-Page` are provided they will default to the first page (1).
77+
* `PageSize` - ``int`` - The number of items to be presented on a page.
78+
79+
## Examples
9080

9181
>caption Observe the behavior of the Pager with two-way data binding
9282
9383
````CSHTML
94-
@*This example showcases the usage of Page and PageChanged in conjunction*@
84+
@*This example showcases how the Pager reacts when the page is selected from an outside input.*@
85+
86+
<div class="mb-3">
87+
<label class="text-info">
88+
Select a page:
89+
<TelerikNumericTextBox @bind-Value="@Page" />
90+
</label>
91+
</div>
9592
96-
<TelerikPager Total="TotalItems"
97-
ButtonCount="ButtonCount"
98-
PageSize="ItemsOnPage"
99-
@bind-Page="CurrentPage">
93+
<TelerikPager Total="30" PageSize="@PageSize" @bind-Page="@Page" />
10094
101-
</TelerikPager>
102-
<div class="text-info">Current page: @CurrentPage</div>
10395
@code {
104-
public int TotalItems { get; set; } = 80;
105-
public int ButtonCount { get; set; } = 4;
106-
public int ItemsOnPage { get; set; } = 10;
107-
public int CurrentPage { get; set; } = 2;
96+
public int PageSize { get; set; } = 3;
97+
public int Page { get; set; } = 1;
10898
}
10999
````
110100
>caption The result from the code snippet above
111101
112-
![config of the pager with one-way binding](images/pager-data-binding.gif)
102+
![config of the pager with one-way binding](images/checkbox-page-selection-outside-input.gif)
113103

114104
## See Also
115105

0 commit comments

Comments
 (0)