Skip to content

Commit c550017

Browse files
chore(grid): notes on PageChanged and one-way binding issues
1 parent baa6738 commit c550017

File tree

2 files changed

+28
-1
lines changed

2 files changed

+28
-1
lines changed

components/grid/events.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -458,6 +458,8 @@ The event handler receives a `GridRowCollapseEventArgs` object which provides th
458458

459459
The event fires when the user pages the grid.
460460

461+
>caption Handle the PageChanged event to know when the user changes the page
462+
461463
````CSHTML
462464
@result
463465
@@ -480,6 +482,31 @@ The event fires when the user pages the grid.
480482
}
481483
````
482484

485+
>caption One-way binding of the Page parameter should be used with the PageChanged event to keep the view-model in sync
486+
487+
````CSHTML
488+
@* Set initial page index, and keep it updated with the grid state to prevent it from resetting the grid page index on re-renders *@
489+
490+
<TelerikGrid Data="@MyData" Pageable="true" PageSize="30" Height="300px"
491+
PageChanged="@PageChangedHandler" Page="@PageIndex">
492+
<GridColumns>
493+
<GridColumn Field="ID"></GridColumn>
494+
<GridColumn Field="TheName" Title="Employee Name"></GridColumn>
495+
</GridColumns>
496+
</TelerikGrid>
497+
498+
@code {
499+
int PageIndex { get; set; } = 2;
500+
async Task PageChangedHandler(int currPage)
501+
{
502+
PageIndex = currPage;
503+
// when using one-way binding for the Page parametr, make sure to update it in the PageChanged event
504+
}
505+
506+
public IEnumerable<object> MyData = Enumerable.Range(1, 150).Select(x => new { ID = x, TheName = "name " + x });
507+
}
508+
````
509+
483510
## See Also
484511

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

components/grid/paging.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ Enable paging and start on the second page.
3939
4040
![](images/paging-overview.png)
4141

42-
>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.
42+
>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.
4343
4444
Here is one way to implement a page size choice that puts all records on one page.
4545

0 commit comments

Comments
 (0)