Skip to content

Commit 31cfe05

Browse files
dimodiDimo Dimov
dimodi
and
Dimo Dimov
authored
docs: Describe new Grid, ListView, TreeList PagerSettings (#412)
* docs: Describe new Grid, ListView, TreeList PagerSettings * docs: update pager settings info, based on feedback * chore: tabbing spaces Co-authored-by: Dimo Dimov <dimo@Dimos-MacBook-Pro.local>
1 parent 51d8515 commit 31cfe05

File tree

7 files changed

+360
-27
lines changed

7 files changed

+360
-27
lines changed

‎_contentTemplates/common/pager-settings.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#pager-settings
2+
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.

‎components/grid/events.md

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,18 @@ This article explains the events available in the Telerik Grid for Blazor. They
1616
* [Read Event](#read-event) - event related to obtaining data
1717
* [Other Events](#other-events) - other events the grid provides
1818
* [State Events](#state-events)
19-
* [Command Button Click](#command-button-click)
20-
* [SelectedItemsChanged](#selecteditemschanged)
21-
* [OnModelInit](#onmodelinit)
22-
* [OnRowClick](#onrowclick)
23-
* [OnRowDoubleClick](#onrowdoubleclick)
24-
* [OnRowContextMenu](#onrowcontextmenu)
25-
* [OnRowExpand](#onrowexpand)
26-
* [OnRowCollapse](#onrowcollapse)
27-
* [OnRowRender](#onrowrender)
28-
* [OnRowDrop](#onrowdrop)
29-
* [PageChanged](#pagechanged)
19+
* [Command Button Click](#command-button-click)
20+
* [SelectedItemsChanged](#selecteditemschanged)
21+
* [OnModelInit](#onmodelinit)
22+
* [OnRowClick](#onrowclick)
23+
* [OnRowDoubleClick](#onrowdoubleclick)
24+
* [OnRowContextMenu](#onrowcontextmenu)
25+
* [OnRowExpand](#onrowexpand)
26+
* [OnRowCollapse](#onrowcollapse)
27+
* [OnRowRender](#onrowrender)
28+
* [OnRowDrop](#onrowdrop)
29+
* [PageChanged](#pagechanged)
30+
* [PageSizeChanged](#pagesizechanged)
3031

3132
## CUD Events
3233

@@ -999,6 +1000,47 @@ The event fires when the user pages the grid.
9991000
}
10001001
````
10011002

1003+
### PageSizeChanged
1004+
1005+
The `PageSizeChanged` event fires when the user changes the page size via the pager DropDownList. The existence of this event also ensures that the Grid `PageSize` attribute supports two-way binding.
1006+
1007+
If the user selects the "All" option from the page size DropDownList, the `PageSizeChanged` event will receive the total item count as an argument.
1008+
1009+
Make sure to update the current page size when using the event.
1010+
1011+
>caption Handle PageSizeChanged
1012+
1013+
````CSHTML
1014+
<TelerikGrid
1015+
Data="@MyData"
1016+
Pageable="true"
1017+
PageSize="@PageSize"
1018+
@bind-Page="@CurrentPage"
1019+
PageSizeChanged="@PageSizeChangedHandler">
1020+
<GridSettings>
1021+
<GridPagerSettings PageSizes="@PageSizes" />
1022+
</GridSettings>
1023+
<GridColumns>
1024+
<GridColumn Field="ID"></GridColumn>
1025+
<GridColumn Field="TheName" Title="Employee Name"></GridColumn>
1026+
</GridColumns>
1027+
</TelerikGrid>
1028+
1029+
@code {
1030+
public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });
1031+
1032+
int PageSize { get; set; } = 15;
1033+
int CurrentPage { get; set; } = 3;
1034+
1035+
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
1036+
1037+
void PageSizeChangedHandler(int newPageSize)
1038+
{
1039+
PageSize = newPageSize;
1040+
}
1041+
}
1042+
````
1043+
10021044
## See Also
10031045

10041046
* [Grid Overview]({%slug components/grid/overview%})

‎components/grid/paging.md

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ position: 20
1010

1111
# Grid Paging
1212

13-
The Grid component offers support for paging.
13+
The Grid component supports paging.
1414

15-
To enable paging, set its `Pageable` property to `true`.
16-
17-
You can control the number of records per page through the `PageSize` property.
18-
19-
You can set the current page of the grid through its integer `Page` property.
15+
* To enable paging, set the Grid `Pageable` parameter to `true`.
16+
* Set the number of items rendered at once with the `PageSize` parameter (defaults to 10).
17+
* If needed, set the current page of the Grid through its integer `Page` property.
18+
* You can further customize the pager interface via additional [pager settings](#pager-settings).
2019

2120
>caption Enable paging in Telerik Grid
2221
@@ -82,6 +81,32 @@ Dynamic page size change
8281
}
8382
````
8483

84+
## Pager Settings
85+
86+
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:
87+
88+
@[template](/_contentTemplates/common/pager-settings.md#pager-settings)
89+
90+
````CSHTML
91+
<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>
99+
</TelerikGrid>
100+
101+
@code {
102+
public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });
103+
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 };
107+
}
108+
````
109+
85110
## More Examples
86111

87112
The following articles and sample projects can be helpful when implementing paging:

‎components/listview/events.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ This article explains the events available in the Telerik ListView for Blazor:
1616
* [Read Event](#read-event) - event related to obtaining data
1717
* [OnModelInit](#onmodelinit)
1818
* [PageChanged](#pagechanged)
19+
* [PageSizeChanged](#pagesizechanged)
1920

2021
## CUD Events
2122

@@ -584,6 +585,47 @@ The event fires when the user pages the listview. If you will be providing the `
584585
}
585586
````
586587

588+
### PageSizeChanged
589+
590+
The `PageSizeChanged` event fires when the user changes the page size via the pager DropDownList. The existence of this event also ensures that the TreeList `PageSize` attribute supports two-way binding.
591+
592+
If the user selects the "All" option from the page size DropDownList, the `PageSizeChanged` event will receive the total item count as an argument.
593+
594+
Make sure to update the current page size when using the event.
595+
596+
>caption Handle PageSizeChanged
597+
598+
````CSHTML
599+
<TelerikListView Data="@ListViewData"
600+
Pageable="true"
601+
PageSize="@PageSize"
602+
PageSizeChanged="@PageSizeChangedHandler">
603+
<Template>
604+
<h6>@context.Name</h6>
605+
</Template>
606+
</TelerikListView>
607+
608+
@code{
609+
int PageSize { get; set; } = 15;
610+
611+
async Task PageSizeChangedHandler(int newPageSize)
612+
{
613+
PageSize = newPageSize;
614+
}
615+
616+
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 50).Select(x => new SampleData
617+
{
618+
Id = x,
619+
Name = $"Name {x}"
620+
}).ToList();
621+
622+
public class SampleData
623+
{
624+
public int Id { get; set; }
625+
public string Name { get; set; }
626+
}
627+
}
628+
````
587629

588630
## See Also
589631

‎components/listview/paging.md

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,15 @@ position: 4
1212

1313
The ListView component can page the entire data source automatically. You can, alternatively, hook to an event and fetch each page of data yourself.
1414

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

17-
You can also control the number of items rendered at once through the `PageSize` parameter (defaults to 10).
20+
The ListView exposes three relevant events. You can find related examples in the [Events]({%slug listview-events%}) article.
1821

19-
The listview exposes two relevant events:
20-
* `PageChanged` - you can use this to react to the user changing the page. You can find an example in the [Events]({%slug listview-events%}) article.
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.
2124
* `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.
2225

2326
>caption Enable Paging in the ListView component and set a custom page size
@@ -53,6 +56,48 @@ The listview exposes two relevant events:
5356
> * 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.
5457
> * Implement [manual data source operations]({%slug listview-manual-operations%}) and implement the desired query yourself. In a future version, the `DataSourceRequest` object will become serializable so you can send it directly over HTTP to a controller and use the LINQ queries it will build for you.
5558
59+
## Pager Settings
60+
61+
In addition to `Page` and `PageSize`, the ListView provides advanced pager configuration options via the `ListViewPagerSettings` tag, which is nested inside `ListViewSettings`. These configuration attributes include:
62+
63+
@[template](/_contentTemplates/common/pager-settings.md#pager-settings)
64+
65+
>caption ListView Pager Settings
66+
67+
````CSHTML
68+
<TelerikListView
69+
Data="@ListViewData"
70+
Pageable="true"
71+
@bind-PageSize="@PageSize"
72+
@bind-Page="@CurrentPage">
73+
<ListViewSettings>
74+
<ListViewPagerSettings InputType="PagerInputType.Input" PageSizes="@PageSizes" ButtonCount="5" />
75+
</ListViewSettings>
76+
<Template>
77+
<div class="listview-item">
78+
<strong>@context.Name</strong>
79+
</div>
80+
</Template>
81+
</TelerikListView>
82+
83+
@code{
84+
int PageSize { get; set; } = 15;
85+
int CurrentPage { get; set; } = 3;
86+
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
87+
88+
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData
89+
{
90+
Id = x,
91+
Name = $"Name {x}"
92+
}).ToList();
93+
94+
public class SampleData
95+
{
96+
public int Id { get; set; }
97+
public string Name { get; set; }
98+
}
99+
}
100+
````
56101

57102
## See Also
58103

‎components/treelist/events.md

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ This article explains the events available in the Telerik TreeList for Blazor. T
2121
* [OnRowRender](#onrowrender)
2222
* [OnRowDrop](#onrowdrop)
2323
* [PageChanged](#pagechanged)
24+
* [PageSizeChanged](#pagechanged)
2425

2526
## CUD Events
2627

@@ -1148,9 +1149,102 @@ The event fires when the user pages the treelist.
11481149
}
11491150
````
11501151

1152+
### PageSizeChanged
1153+
1154+
The `PageSizeChanged` event fires when the user changes the page size via the pager DropDownList. The existence of this event also ensures that the TreeList `PageSize` attribute supports two-way binding.
1155+
1156+
If the user selects the "All" option from the page size DropDownList, the `PageSizeChanged` event will receive the total item count as an argument.
1157+
1158+
Make sure to update the current page size when using the event.
1159+
1160+
>caption Handle PageSizeChanged
1161+
1162+
````CSHTML
1163+
<TelerikTreeList Data="@Data"
1164+
Pageable="true"
1165+
@bind-Page="@CurrentPage"
1166+
PageSize="@PageSize"
1167+
PageSizeChanged="@PageSizeChangedHandler"
1168+
IdField="Id" ParentIdField="ParentId"
1169+
Width="650px">
1170+
<TreeListSettings>
1171+
<TreeListPagerSettings PageSizes="@PageSizes" />
1172+
</TreeListSettings>
1173+
<TreeListColumns>
1174+
<TreeListColumn Field="Name" Expandable="true" Width="300px"></TreeListColumn>
1175+
<TreeListColumn Field="Id"></TreeListColumn>
1176+
</TreeListColumns>
1177+
</TelerikTreeList>
1178+
1179+
@code {
1180+
int PageSize { get; set; } = 15;
1181+
int CurrentPage { get; set; } = 3;
1182+
1183+
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
1184+
1185+
void PageSizeChangedHandler(int newPageSize)
1186+
{
1187+
PageSize = newPageSize;
1188+
}
1189+
1190+
public List<Employee> Data { get; set; }
1191+
1192+
protected override async Task OnInitializedAsync()
1193+
{
1194+
Data = await GetTreeListData();
1195+
}
1196+
1197+
// sample models and data generation
1198+
1199+
public class Employee
1200+
{
1201+
public int Id { get; set; }
1202+
public int? ParentId { get; set; }
1203+
public string Name { get; set; }
1204+
}
1205+
1206+
async Task<List<Employee>> GetTreeListData()
1207+
{
1208+
List<Employee> data = new List<Employee>();
1209+
1210+
for (int i = 1; i < 15; i++)
1211+
{
1212+
data.Add(new Employee
1213+
{
1214+
Id = i,
1215+
ParentId = null,
1216+
Name = $"root: {i}"
1217+
});
1218+
1219+
for (int j = 2; j < 5; j++)
1220+
{
1221+
int currId = i * 100 + j;
1222+
data.Add(new Employee
1223+
{
1224+
Id = currId,
1225+
ParentId = i,
1226+
Name = $"first level child of {i}"
1227+
});
1228+
1229+
for (int k = 3; k < 5; k++)
1230+
{
1231+
data.Add(new Employee
1232+
{
1233+
Id = currId * 1000 + k,
1234+
ParentId = currId,
1235+
Name = $"second level child of {i} and {currId}"
1236+
}); ;
1237+
}
1238+
}
1239+
}
1240+
1241+
return await Task.FromResult(data);
1242+
}
1243+
}
1244+
````
1245+
11511246
## See Also
11521247

11531248
* [TreeList Overview]({%slug treelist-overview%})
11541249
* [TreeList Column Events]({%slug treelist-column-events%})
11551250
* [TreeList Editing Overview]({%slug treelist-editing-overview%})
1156-

0 commit comments

Comments
 (0)