Skip to content

Commit 5a0f060

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
[3.2] docs(pager):documentation for adaptive pager (#876)
* docs(pager):documentation for adaptive pager * Update components/grid/paging.md Co-authored-by: Dimo Dimov <[email protected]> * docs(grid,treelist,listview): addressing feedback * Update _contentTemplates/common/pager-settings.md Co-authored-by: Dimo Dimov <[email protected]> * docs(listview, pager, template):final touches * docs(template): wording update Co-authored-by: Dimo Dimov <[email protected]>
1 parent 9361b52 commit 5a0f060

File tree

5 files changed

+125
-64
lines changed

5 files changed

+125
-64
lines changed

‎_contentTemplates/common/pager-settings.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
#pager-settings
2+
3+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
24

3-
* `ButtonCount` - `int` - The maximum number of page buttons that will be visible. To take effect, `ButtonCount` must be smaller than the page count (`ButtonCount < Total / PageSize`). The default value is 10.
4-
* `InputType` - `PagerInputType` - Determines if the pager will show numeric buttons to go to a specific page, or a textbox to type the page index. The arrow buttons are always visible. The `PagerInputType` enum accepts values `Buttons` (default) or `Input`. When `Input` is used, the page index will change when the textbox is blurred, or when the user hits Enter. This is to avoid unintentional data requests.
5-
* `PageSizes` - `List<int?>` - Allows users to change the page size via a DropDownList. The attribute configures the DropDownList options. A `null` item in the `PageSizes` `List` will render an "All" option. By default, the Pager DropDownList is not displayed. You can also set `PageSizes` to `null` programmatically to remove the DropDownList at any time.
5+
| Attribute | Type and Default Value | Description |
6+
|----------|----------|----------|
7+
|`Adaptive` | `bool` <br/> (`true`) | Defines whether pager elements should change based on the screen size. When enabled, the Pager will hide its `Pager Info` and `PageSize Dropdownlist` if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element.
8+
|`ButtonCount` | `int` <br/> (10) | The maximum number of page buttons that will be visible. To take effect, `ButtonCount` must be smaller than the page count (`ButtonCount < Total / PageSize`).
9+
| `InputType` | `PagerInputType` <br/> (`Buttons`) | Determines if the pager will show numeric buttons to go to a specific page, or a textbox to type the page index. The arrow buttons are always visible. The `PagerInputType` enum accepts values `Buttons` or `Input`. When `Input` is used, the page index will change when the textbox is blurred, or when the user hits Enter. This is to avoid unintentional data requests.
10+
| `PageSizes` | `List<int?>` | Allows users to change the page size via a DropDownList. The attribute configures the DropDownList options. A `null` item in the `PageSizes` `List` will render an "All" option. By default, the Pager DropDownList is not displayed. You can also set `PageSizes` to `null` programmatically to remove the DropDownList at any time.
11+
#end

‎components/grid/paging.md

Lines changed: 37 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,17 @@ position: 20
1010

1111
# Grid Paging
1212

13-
The Grid component supports paging.
13+
The Grid component can page the entire data source automatically. Alternatively, you can hook to an event and fetch each page of data yourself.
14+
15+
>caption In this article:
16+
17+
* [Basics](#basics)
18+
* [Events](#events)
19+
* [Pager Settings](#pager-settings)
20+
* [More Examples](#more-examples)
21+
22+
23+
## Basics
1424

1525
* To enable paging, set the Grid `Pageable` parameter to `true`.
1626
* Set the number of items rendered at once with the `PageSize` parameter (defaults to 10).
@@ -34,10 +44,6 @@ Enable paging and start on the second page.
3444
}
3545
````
3646

37-
>caption The result from the code snippet above
38-
39-
![](images/paging-overview.png)
40-
4147
>note If you want to bind the page index to a variable, you must use two-way binding - the `@bind-Page="@MyPageIndexVariable"` syntax. If you only use one-way binding - `Page="@MyPageIndexVariable"` - the grid will reset to the value of that parameter on every re-render. If you choose to use one-way binding, you must update the field value in the [`PageChanged` event]({%slug grid-events%}#pagechanged) to avoid that.
4248
4349
Here is one way to implement a page size choice that puts all records on one page.
@@ -81,29 +87,43 @@ Dynamic page size change
8187
}
8288
````
8389

84-
## Pager Settings
90+
## Events
91+
92+
The Grid exposes several relevant events. You can find related examples in the [Events]({%slug grid-events%}) article.
93+
94+
* `PageChanged` - you can use this to react to the user changing the page.
95+
* `PageSizeChanged` - fires when the user changes the page size via the pager DropDownList.
96+
* `OnRead` - you can use this to perform the read operation yourself on demand, instead of providing the entire data source at once. You can read more about this in the [Manual Data Source Operations]({%slug components/grid/manual-operations%}) article.
97+
98+
## Pager Settings
8599

86100
In addition to `Page` and `PageSize`, the Grid provides advanced pager configuration options via the `GridPagerSettings` tag, which is nested inside `GridSettings`. These configuration attributes include:
87101

88102
@[template](/_contentTemplates/common/pager-settings.md#pager-settings)
89103

90104
````CSHTML
105+
@*Configure the Pager Settings*@
106+
91107
<TelerikGrid Data="@MyData" Pageable="true" @bind-PageSize="@PageSize" @bind-Page="@CurrentPage">
92-
<GridSettings>
93-
<GridPagerSettings InputType="PagerInputType.Input" PageSizes="@PageSizes" ButtonCount="5" />
94-
</GridSettings>
95-
<GridColumns>
96-
<GridColumn Field="ID"></GridColumn>
97-
<GridColumn Field="TheName" Title="Employee Name"></GridColumn>
98-
</GridColumns>
108+
<GridSettings>
109+
<GridPagerSettings InputType="PagerInputType.Input"
110+
PageSizes="@PageSizes"
111+
ButtonCount="5"
112+
Adaptive="true">
113+
</GridPagerSettings>
114+
</GridSettings>
115+
<GridColumns>
116+
<GridColumn Field="ID"></GridColumn>
117+
<GridColumn Field="TheName" Title="Employee Name"></GridColumn>
118+
</GridColumns>
99119
</TelerikGrid>
100120
101121
@code {
102-
public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });
122+
public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });
103123
104-
int PageSize { get; set; } = 15;
105-
int CurrentPage { get; set; } = 3;
106-
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
124+
int PageSize { get; set; } = 15;
125+
int CurrentPage { get; set; } = 3;
126+
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
107127
}
108128
````
109129

‎components/listview/paging.md

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,21 @@ position: 4
1010

1111
# ListView Paging
1212

13-
The ListView component can page the entire data source automatically. You can, alternatively, hook to an event and fetch each page of data yourself.
13+
The ListView component can page the entire data source automatically. Alternatively, you can hook to an event and fetch each page of data yourself.
14+
15+
>caption In this article:
16+
17+
* [Basics](#basics)
18+
* [Events](#events)
19+
* [Pager Settings](#pager-settings)
20+
21+
## Basics
1422

1523
* To enable paging, set the ListView `Pageable` parameter to `true`.
1624
* Set the number of items rendered at once with the `PageSize` parameter (defaults to 10).
1725
* If needed, set the current page of the ListView through its integer `Page` property.
1826
* You can further customize the pager interface via additional [pager settings](#pager-settings).
1927

20-
The ListView exposes three relevant events. You can find related examples in the [Events]({%slug listview-events%}) article.
21-
22-
* `PageChanged` - you can use this to react to the user changing the page.
23-
* `PageSizeChanged` - fires when the user changes the page size via the pager DropDownList.
24-
* `OnRead` - you can use this to perform the read operation yourself on demand, instead of providing the entire data source at once. You can read more about this in the [Manual Data Source Operations]({%slug listview-manual-operations%}) article.
25-
2628
>caption Enable Paging in the ListView component and set a custom page size
2729
2830
````CSHTML
@@ -51,6 +53,14 @@ The ListView exposes three relevant events. You can find related examples in the
5153
}
5254
````
5355

56+
## Events
57+
58+
The ListView exposes three relevant events. You can find related examples in the [Events]({%slug listview-events%}) article.
59+
60+
* `PageChanged` - you can use this to react to the user changing the page.
61+
* `PageSizeChanged` - fires when the user changes the page size via the pager DropDownList.
62+
* `OnRead` - you can use this to perform the read operation yourself on demand, instead of providing the entire data source at once. You can read more about this in the [Manual Data Source Operations]({%slug listview-manual-operations%}) article.
63+
5464
>tip You can optimize database queries in two ways:
5565
>
5666
> * Use an `IQueryable<MyModel>` collection for the listview `Data`. The listview will build a LINQ expression internally that will be resolved only when needed. This can be useful when the `Data` comes from something like an EntityFramework context.
@@ -65,13 +75,18 @@ In addition to `Page` and `PageSize`, the ListView provides advanced pager confi
6575
>caption ListView Pager Settings
6676
6777
````CSHTML
68-
<TelerikListView
69-
Data="@ListViewData"
70-
Pageable="true"
71-
@bind-PageSize="@PageSize"
72-
@bind-Page="@CurrentPage">
78+
@*Configure the Pager Settings*@
79+
80+
<TelerikListView Data="@ListViewData"
81+
Pageable="true"
82+
@bind-PageSize="@PageSize"
83+
@bind-Page="@CurrentPage">
7384
<ListViewSettings>
74-
<ListViewPagerSettings InputType="PagerInputType.Input" PageSizes="@PageSizes" ButtonCount="5" />
85+
<ListViewPagerSettings InputType="PagerInputType.Input"
86+
PageSizes="@PageSizes"
87+
ButtonCount="5"
88+
Adaptive="true">
89+
</ListViewPagerSettings>
7590
</ListViewSettings>
7691
<Template>
7792
<div class="listview-item">
@@ -80,16 +95,16 @@ In addition to `Page` and `PageSize`, the ListView provides advanced pager confi
8095
</Template>
8196
</TelerikListView>
8297
83-
@code{
98+
@code {
8499
int PageSize { get; set; } = 15;
85100
int CurrentPage { get; set; } = 3;
86101
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
87102
88103
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData
89-
{
90-
Id = x,
91-
Name = $"Name {x}"
92-
}).ToList();
104+
{
105+
Id = x,
106+
Name = $"Name {x}"
107+
}).ToList();
93108
94109
public class SampleData
95110
{

‎components/pager/overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ The Blazor Pager provides various parameters that allow you to configure the com
8484
</style>
8585
| Parameter | Type and Default Value | Description |
8686
| ----------- | ----------- | ----------- |
87+
|`Adaptive` | `bool` | Defines whether pager elements should be changed based on the screen size. When enabled, the Pager will hide its `Pager Info` and `PageSize Dropdownlist` if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element.
8788
| `ButtonCount` | `int` | The maximum number of page buttons that will be visible. To take effect, `ButtonCount` must be smaller than the page count (`ButtonCount < Total / PageSize`). |
8889
| `Class` | `string` | Renders a custom CSS class to the `<div class="k-pager-wrap">` element. |
8990
| `Page` | `int` | Represents the current page of the pager. The first page has an index of `1`. Supports two-way binding. If no value is provided, the parameter will default to the first page (1), but you should always use this parameter value in order to successfully use the component. If you don't use two-way binding and you don't update the value of the parameter after the user action, the pager UI will not reflect the change and will revert to the previous value (page index). |

‎components/treelist/paging.md

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,19 @@ published: True
88
position: 20
99
---
1010

11-
# TreeList Paging
11+
# TreeList Paging
1212

1313
The TreeList component offers support for paging.
1414

15+
>caption In this article:
16+
17+
* [Basics](#basics)
18+
* [Events](#events)
19+
* [Pager Settings](#pager-settings)
20+
21+
22+
## Basics
23+
1524
* To enable paging, set the TreeList `Pageable` parameter to `true`.
1625
* Set the number of items rendered at once with the `PageSize` parameter (defaults to 10).
1726
* If needed, set the current page of the TreeList through its integer `Page` property.
@@ -91,10 +100,6 @@ Enable paging and start on the second page.
91100
}
92101
````
93102

94-
>caption The result from the code snippet above
95-
96-
![](images/paging-overview.png)
97-
98103
>tip You can bind the values of those properties to variables in the `@code {}` section. If you want to bind the page index to a variable, you must use the `@bind-Page="@MyPageIndexVariable"` syntax.
99104
100105
Here is one way to implement a page size choice that puts all records on one page.
@@ -194,20 +199,34 @@ Dynamic page size change
194199
}
195200
````
196201

202+
## Events
203+
204+
The TreeList exposes several relevant events. You can find related examples in the [Events]({%slug treelist-events%}) article.
205+
206+
* `PageChanged` - you can use this to react to the user changing the page.
207+
* `PageSizeChanged` - fires when the user changes the page size via the pager DropDownList.
208+
209+
197210
## Pager Settings
198211

199212
In addition to `Page` and `PageSize`, the TreeList provides advanced pager configuration options via the `TreeListPagerSettings` tag, which is nested inside `TreeListSettings`. These configuration attributes include:
200213

201214
@[template](/_contentTemplates/common/pager-settings.md#pager-settings)
202215

203216
````CSHTML
217+
@*Configure the Pager Settings*@
218+
204219
<TelerikTreeList Data="@Data"
205220
Pageable="true" @bind-PageSize="@PageSize" @bind-Page="@CurrentPage"
206221
IdField="Id" ParentIdField="ParentId"
207222
Width="650px">
208-
<TreeListSettings>
209-
<TreeListPagerSettings InputType="PagerInputType.Input" PageSizes="@PageSizes" ButtonCount="5" />
210-
</TreeListSettings>
223+
<TreeListSettings>
224+
<TreeListPagerSettings InputType="PagerInputType.Input"
225+
PageSizes="@PageSizes"
226+
ButtonCount="5"
227+
Adaptive="true">
228+
</TreeListPagerSettings>
229+
</TreeListSettings>
211230
<TreeListColumns>
212231
<TreeListColumn Field="Name" Expandable="true" Width="300px"></TreeListColumn>
213232
<TreeListColumn Field="Id"></TreeListColumn>
@@ -218,8 +237,8 @@ In addition to `Page` and `PageSize`, the TreeList provides advanced pager confi
218237
public List<Employee> Data { get; set; }
219238
220239
int PageSize { get; set; } = 15;
221-
int CurrentPage { get; set; } = 3;
222-
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
240+
int CurrentPage { get; set; } = 3;
241+
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
223242
224243
protected override async Task OnInitializedAsync()
225244
{
@@ -237,35 +256,35 @@ In addition to `Page` and `PageSize`, the TreeList provides advanced pager confi
237256
238257
async Task<List<Employee>> GetTreeListData()
239258
{
240-
List <Employee> data = new List<Employee>();
259+
List<Employee> data = new List<Employee>();
241260
242261
for (int i = 1; i < 15; i++)
243262
{
244263
data.Add(new Employee
245-
{
246-
Id = i,
247-
ParentId = null,
248-
Name = $"root: {i}"
249-
});
264+
{
265+
Id = i,
266+
ParentId = null,
267+
Name = $"root: {i}"
268+
});
250269
251270
for (int j = 2; j < 5; j++)
252271
{
253272
int currId = i * 100 + j;
254273
data.Add(new Employee
255-
{
256-
Id = currId,
257-
ParentId = i,
258-
Name = $"first level child of {i}"
259-
});
274+
{
275+
Id = currId,
276+
ParentId = i,
277+
Name = $"first level child of {i}"
278+
});
260279
261280
for (int k = 3; k < 5; k++)
262281
{
263282
data.Add(new Employee
264-
{
265-
Id = currId * 1000 + k,
266-
ParentId = currId,
267-
Name = $"second level child of {i} and {currId}"
268-
}); ;
283+
{
284+
Id = currId * 1000 + k,
285+
ParentId = currId,
286+
Name = $"second level child of {i} and {currId}"
287+
}); ;
269288
}
270289
}
271290
}

0 commit comments

Comments
 (0)