chore(grid): notes on PageChanged and one-way binding issues

Author: marin-bratanov

components/grid/events.md

@@ -458,6 +458,8 @@ The event handler receives a `GridRowCollapseEventArgs` object which provides th
 
 The event fires when the user pages the grid.
 
+>caption Handle the PageChanged event to know when the user changes the page
+
 ````CSHTML
 @result
 
@@ -480,6 +482,31 @@ The event fires when the user pages the grid.
 }
 ````
 
+>caption One-way binding of the Page parameter should be used with the PageChanged event to keep the view-model in sync
+
+````CSHTML
+@* Set initial page index, and keep it updated with the grid state to prevent it from resetting the grid page index on re-renders *@
+
+<TelerikGrid Data="@MyData" Pageable="true" PageSize="30" Height="300px"
+             PageChanged="@PageChangedHandler" Page="@PageIndex">
+    <GridColumns>
+        <GridColumn Field="ID"></GridColumn>
+        <GridColumn Field="TheName" Title="Employee Name"></GridColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    int PageIndex { get; set; } = 2;
+    async Task PageChangedHandler(int currPage)
+    {
+        PageIndex = currPage;
+        // when using one-way binding for the Page parametr, make sure to update it in the PageChanged event
+    }
+
+    public IEnumerable<object> MyData = Enumerable.Range(1, 150).Select(x => new { ID = x, TheName = "name " + x });
+}
+````
+
 ## See Also
 
   * [Grid Overview]({%slug components/grid/overview%})

components/grid/paging.md

@@ -39,7 +39,7 @@ Enable paging and start on the second page.
 
 ![](images/paging-overview.png)
 
->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.
+>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.
 
 Here is one way to implement a page size choice that puts all records on one page.