You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*`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.
Copy file name to clipboardExpand all lines: components/grid/paging.md
+37-17Lines changed: 37 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,17 @@ position: 20
10
10
11
11
# Grid Paging
12
12
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
14
24
15
25
* To enable paging, set the Grid `Pageable` parameter to `true`.
16
26
* 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.
34
44
}
35
45
````
36
46
37
-
>caption The result from the code snippet above
38
-
39
-
40
-
41
47
>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.
42
48
43
49
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
81
87
}
82
88
````
83
89
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
85
99
86
100
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:
Copy file name to clipboardExpand all lines: components/listview/paging.md
+33-18Lines changed: 33 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,19 +10,21 @@ position: 4
10
10
11
11
# ListView Paging
12
12
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
14
22
15
23
* To enable paging, set the ListView `Pageable` parameter to `true`.
16
24
* Set the number of items rendered at once with the `PageSize` parameter (defaults to 10).
17
25
* If needed, set the current page of the ListView through its integer `Page` property.
18
26
* You can further customize the pager interface via additional [pager settings](#pager-settings).
19
27
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
-
26
28
>caption Enable Paging in the ListView component and set a custom page size
27
29
28
30
````CSHTML
@@ -51,6 +53,14 @@ The ListView exposes three relevant events. You can find related examples in the
51
53
}
52
54
````
53
55
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
+
54
64
>tip You can optimize database queries in two ways:
55
65
>
56
66
> * 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
Copy file name to clipboardExpand all lines: components/pager/overview.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -84,6 +84,7 @@ The Blazor Pager provides various parameters that allow you to configure the com
84
84
</style>
85
85
| Parameter | Type and Default Value | Description |
86
86
| ----------- | ----------- | ----------- |
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.
87
88
|`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`). |
88
89
|`Class`|`string`| Renders a custom CSS class to the `<div class="k-pager-wrap">` element. |
89
90
|`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). |
Copy file name to clipboardExpand all lines: components/treelist/paging.md
+45-26Lines changed: 45 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,10 +8,19 @@ published: True
8
8
position: 20
9
9
---
10
10
11
-
# TreeList Paging
11
+
# TreeList Paging
12
12
13
13
The TreeList component offers support for paging.
14
14
15
+
>caption In this article:
16
+
17
+
*[Basics](#basics)
18
+
*[Events](#events)
19
+
*[Pager Settings](#pager-settings)
20
+
21
+
22
+
## Basics
23
+
15
24
* To enable paging, set the TreeList `Pageable` parameter to `true`.
16
25
* Set the number of items rendered at once with the `PageSize` parameter (defaults to 10).
17
26
* 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.
91
100
}
92
101
````
93
102
94
-
>caption The result from the code snippet above
95
-
96
-
97
-
98
103
>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.
99
104
100
105
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
194
199
}
195
200
````
196
201
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
+
197
210
## Pager Settings
198
211
199
212
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:
0 commit comments