DataGrid: Mixes CurrentPage and PageChanged into single two-way binda…

…ble param (#5896) * [DataGrid] Mixes CurrentPage and PageChanged into single two-way bindable Page parameter; Fixes pagesize "bug" in datagrid test page; Removes unnecessary DataGridPageChangedEventArgs.cs * Rename currentPage on PaginationContext.cs * From CurrentPage to Page in DataGridState.cs * Move getter properties * Adjust release notes title * Move PageChanged --------- Co-authored-by: Mladen Macanovic <[email protected]>
Megabit · Dec 19, 2024 · e248d69 · e248d69
1 parent 78cb864
commit e248d69
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 125 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor
@@ -254,9 +254,8 @@
                           Responsive
                           ValidationsSummaryLabel="Following error occurs..."
                           CustomFilter="@OnCustomFilter"
-                          PageSize="5"
-                          CurrentPage="currentPage"
-                          PageChanged="(e) => currentPage = e.Page"
+                          @bind-PageSize="currentPageSize"
+                          @bind-Page="currentPage"
                           FilteredDataChanged="@OnFilteredDataChanged"
                           UseValidation
                           SortChanged="@OnSortChanged"

diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor.cs b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor.cs
@@ -28,6 +28,7 @@ public partial class DataGridPage
 
     private DataGrid<Employee> dataGrid;
     public int currentPage { get; set; } = 1;
+    public int currentPageSize  { get; set; } = 5; 
 
     private bool editable = true;
     private bool fixedHeader = false;

diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/PagerPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/PagerPage.razor
@@ -50,7 +50,7 @@
                     <TotalItemsShortTemplate><Badge Color="Color.Success">@context.TotalItems</Badge></TotalItemsShortTemplate>
                     <ItemsPerPageTemplate></ItemsPerPageTemplate>
                     <PageSelectorTemplate>
-                        <Select TextColor="TextColor.Success" @bind-Value="@context.CurrentPage" Size="Size.Small">
+                        <Select TextColor="TextColor.Success" @bind-Value="@context.Page" Size="Size.Small">
                             @for ( int i = context.FirstVisiblePage; i <= context.LastVisiblePage; ++i )
                             {
                                 var pageNumber = i;
@@ -59,7 +59,7 @@
                         </Select>
                     </PageSelectorTemplate>
                     <PageSizesTemplate>
-                        <Select TextColor="TextColor.Success" @bind-Value="@context.CurrentPageSize" Size="Size.Small">
+                        <Select TextColor="TextColor.Success" @bind-Value="@context.PageSize" Size="Size.Small">
                             @foreach ( var curPageSize in context.PageSizes )
                             {
                                 <SelectItem Value="@curPageSize">@curPageSize</SelectItem>

diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/StateManagementPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/StateManagementPage.razor
@@ -94,7 +94,7 @@
         await LocalStorage.RemoveItemAsync( STORAGE_KEY );
         var state = new DataGridState<Employee>()
             {
-                CurrentPage = 1,
+                Page = 1,
                 PageSize = 10,
             };
         await dataGridRef.LoadState( state );

diff --git a/...ntation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridPagerExample.razor b/...ntation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridPagerExample.razor
@@ -33,7 +33,7 @@
     <TotalItemsShortTemplate><Badge Color="Color.Success">@context.TotalItems</Badge></TotalItemsShortTemplate>
     <ItemsPerPageTemplate></ItemsPerPageTemplate>
     <PageSelectorTemplate>
-        <Select TextColor="TextColor.Success" @bind-Value="@context.CurrentPage" Size="Size.Small">
+        <Select TextColor="TextColor.Success" @bind-Value="@context.Page" Size="Size.Small">
             @for ( int i = context.FirstVisiblePage; i <= context.LastVisiblePage; ++i )
             {
                 var pageNumber = i;
@@ -42,7 +42,7 @@
         </Select>
     </PageSelectorTemplate>
     <PageSizesTemplate>
-        <Select TextColor="TextColor.Success" @bind-Value="@context.CurrentPageSize" Size="Size.Small">
+        <Select TextColor="TextColor.Success" @bind-Value="@context.PageSize" Size="Size.Small">
             @foreach ( var curPageSize in context.PageSizes )
             {
                 <SelectItem Value="@curPageSize">@curPageSize</SelectItem>

diff --git a/...azorise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridStateManagementExample.razor b/...azorise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridStateManagementExample.razor
@@ -72,7 +72,7 @@
 
         var state = new DataGridState<Employee>()
         {
-            CurrentPage = 1,
+            Page = 1,
             PageSize = 10,
         };
 

diff --git a/Documentation/Blazorise.Docs/Pages/News/2025-05-01-release-notes-200.razor b/Documentation/Blazorise.Docs/Pages/News/2025-05-01-release-notes-200.razor
@@ -76,6 +76,25 @@
                 </UnorderedListItem>
             </UnorderedList>
         </OrderedListItem>
+        <OrderedListItem>
+            <Paragraph>
+                <Strong>DataGrid</Strong>
+            </Paragraph>
+            <UnorderedList>
+                <UnorderedListItem>
+                    <Paragraph>
+                        <Code>CurrentPage</Code> becomes <Code>Page</Code>, and this parameter supports two-way binding using <Code>@@bind-Page="currentPage"</Code>.
+                        The rename also happened on <Code Tag>PaginationContext</Code> properties <Code>CurrentPageSize</Code> and <Code>CurrentPage</Code>. They have now been renamed to <Code>PageSize</Code> and <Code>Page</Code>, respectively.
+                        <Code>DataGridState.CurrentPage</Code> has been also renamed to <Code>Page</Code>.
+                    </Paragraph>
+                </UnorderedListItem>
+                <UnorderedListItem>
+                    <Paragraph>
+                        <Code>DataGridPageChangedEventArgs</Code> has been removed as it served no purpose. Now, the <Code>PageChanged</Code> event returns a simple <Code>int</Code> representing the current page number.
+                    </Paragraph>
+                </UnorderedListItem>
+            </UnorderedList>
+        </OrderedListItem>
         <OrderedListItem>
             <Paragraph>
                 Renaming <Code>RightAligned</Code> to <Code>EndAligned</Code> in <Code Tag>Dropdown</Code>, and <Code Tag>DropdownList</Code>
@@ -107,6 +126,14 @@
     You may now allow multiple values to be selected in the <Code>DataGridSelectColumn</Code>. Set the new <Code>Multiple</Code> parameter to <Code>true</Code> to enable this feature. Please bind the corresponding array to successfully bind the multiple values.
 </Paragraph>
 
+<Heading Size="HeadingSize.Is4">
+    Two-Way Binding Page Parameter
+</Heading>
+
+<Paragraph>
+    The <Code>Page</Code> parameter now supports two-way binding, allowing you to synchronize it with a variable using <Code>@@bind-Page="currentPage"</Code>.
+</Paragraph>
+
 <NewsPageSubtitle>
     Final Notes
 </NewsPageSubtitle>

diff --git a/Source/Extensions/Blazorise.DataGrid/Contexts/PaginationContext.cs b/Source/Extensions/Blazorise.DataGrid/Contexts/PaginationContext.cs
@@ -11,13 +11,13 @@ public class PaginationContext<TItem>
 {
     #region Members
 
-    private event CurrentPageChangedEventHandler CurrentPageChanged;
+    private event PageChangedEventHandler PageChanged;
 
-    public delegate void CurrentPageChangedEventHandler( int value );
+    public delegate void PageChangedEventHandler( int value );
 
-    private event CurrentPageSizeChangedEventHandler CurrentPageSizeChanged;
+    private event PageSizeChangedEventHandler PageSizeChanged;
 
-    public delegate void CurrentPageSizeChangedEventHandler( int value );
+    public delegate void PageSizeChangedEventHandler( int value );
 
     private event TotalItemsChangedEventHandler TotalItemsChanged;
 
@@ -27,9 +27,9 @@ public class PaginationContext<TItem>
 
     private int lastVisiblePage;
 
-    private int currentPage = 1;
+    private int page = 1;
 
-    private int currentPageSize = 10;
+    private int pageSize = 10;
 
     private int? totalItems;
 
@@ -48,34 +48,34 @@ public PaginationContext( DataGrid<TItem> parentDataGrid )
 
     #region Methods
 
-    public void SubscribeOnPageChanged( CurrentPageChangedEventHandler listener )
+    public void SubscribeOnPageChanged( PageChangedEventHandler listener )
     {
-        CurrentPageChanged += listener;
+        PageChanged += listener;
     }
 
-    public void UnsubscribeOnPageChanged( CurrentPageChangedEventHandler listener )
+    public void UnsubscribeOnPageChanged( PageChangedEventHandler listener )
     {
-        CurrentPageChanged -= listener;
+        PageChanged -= listener;
     }
 
-    public void TriggerCurrentPageChange( int value )
+    public void TriggerPageChange( int value )
     {
-        CurrentPageChanged?.Invoke( value );
+        PageChanged?.Invoke( value );
     }
 
-    public void SubscribeOnPageSizeChanged( CurrentPageSizeChangedEventHandler listener )
+    public void SubscribeOnPageSizeChanged( PageSizeChangedEventHandler listener )
     {
-        CurrentPageSizeChanged += listener;
+        PageSizeChanged += listener;
     }
 
-    public void UnsubscribeOnPageSizeChanged( CurrentPageSizeChangedEventHandler listener )
+    public void UnsubscribeOnPageSizeChanged( PageSizeChangedEventHandler listener )
     {
-        CurrentPageSizeChanged -= listener;
+        PageSizeChanged -= listener;
     }
 
-    public void TriggerCurrentPageSizeChange( int value )
+    public void TriggerPageSizeChange( int value )
     {
-        CurrentPageSizeChanged?.Invoke( value );
+        PageSizeChanged?.Invoke( value );
     }
 
     public void SubscribeOnTotalItemsChanged( TotalItemsChangedEventHandler listener )
@@ -100,8 +100,8 @@ private void CalculateFirstAndLastVisiblePage()
     {
         var step = (int)Math.Floor( MaxPaginationLinks / 2d );
 
-        var leftButton = CurrentPage - step;
-        var rightButton = CurrentPage + step;
+        var leftButton = Page - step;
+        var rightButton = Page + step;
 
         if ( leftButton <= 1 )
         {
@@ -132,15 +132,15 @@ private void CalculateFirstAndLastVisiblePage()
     /// <summary>
     /// Gets or sets the current page
     /// </summary>
-    public int CurrentPage
+    public int Page
     {
-        get => currentPage;
+        get => page;
         set
         {
-            if ( currentPage != value )
+            if ( page != value )
             {
-                currentPage = value;
-                TriggerCurrentPageChange( value );
+                page = value;
+                TriggerPageChange( value );
             }
         }
     }
@@ -152,10 +152,10 @@ public int LastPage
     {
         get
         {
-            var lastPage = Math.Max( (int)Math.Ceiling( ( TotalItems ?? 0 ) / (double)currentPageSize ), 1 );
+            var lastPage = Math.Max( (int)Math.Ceiling( ( TotalItems ?? 0 ) / (double)pageSize ), 1 );
 
-            if ( CurrentPage > lastPage )
-                CurrentPage = lastPage;
+            if ( Page > lastPage )
+                Page = lastPage;
 
             return lastPage;
         }
@@ -190,15 +190,15 @@ public int LastVisiblePage
     /// <summary>
     /// Gets or sets the current page size
     /// </summary>
-    public int CurrentPageSize
+    public int PageSize
     {
-        get => currentPageSize;
+        get => pageSize;
         set
         {
-            if ( currentPageSize != value )
+            if ( pageSize != value )
             {
-                currentPageSize = value;
-                TriggerCurrentPageSizeChange( value );
+                pageSize = value;
+                TriggerPageSizeChange( value );
             }
         }
     }