Added new kb article set-all-page-size-option-as-default (#1812)

* Added new kb article set-all-page-size-option-as-default * Update knowledge-base/set-all-page-size-option-as-default.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/set-all-page-size-option-as-default.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/set-all-page-size-option-as-default.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/set-all-page-size-option-as-default.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * kb(grid): address feedback --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> Co-authored-by: Nadezhda Tacheva <Nadezhda.Tacheva@progress.com>

Author: 4 people

knowledge-base/grid-set-all-page-size-option-as-default.md

@@ -0,0 +1,93 @@
+---
+title: Set "All" PageSize Option as Default
+description: How to set the "All" option for the PageSize as default in Telerik Grid for Blazor.
+type: how-to
+page_title: How to Set "All" PageSize Option as Default
+slug: grid-kb-set-all-pagesize-option-as-default
+tags: grid, page, size, all, option, default
+ticketid: 1624891
+res_type: kb
+---
+
+## Environment
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>Grid for Blazor</td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+I want to set the default selected entry in the Pager of the Telerik Grid to be "All" items. However, the `PageSize` property only accepts a non-nullable `int`, so I cannot bind it to a nullable `int?` variable. Is there a way to initialize the `PageSize` with `null` to indicate that I want the "All" option as the default?
+
+## Solution
+
+The `PageSize` parameter of the Grid accepts a non-nullable `int` by design. To set the "All" option as the default for the page size in the Telerik Grid, use a custom approach as follows:
+
+1. In the component's initialization method (`OnInitializedAsync`), load the data and set the `PageSize` property to the total count of the records.
+2. Add the "All" option (`null`) to the `PageSizes` collection.
+3. Bind the `PageSize` property to the `@bind-PageSize` attribute of the `TelerikGrid` component.
+4. Specify the `PageSizes` collection in the `GridPagerSettings` component to display the dropdown with the available page sizes.
+
+>caption Set "All" PageSize Option as Default
+
+```
+Page size: @PageSize
+
+<TelerikGrid Data="@GridData"
+ Pageable="true"
+ @bind-PageSize="@PageSize"
+ Height="500px">
+ <GridSettings>
+ <GridPagerSettings InputType="PagerInputType.Buttons"
+ PageSizes="@PageSizes" 
+ ButtonCount="5">
+ </GridPagerSettings>
+ </GridSettings>
+ <GridColumns>
+ <GridColumn Field="@(nameof(Product.Name))" Title="Product Name" />
+ <GridColumn Field="@(nameof(Product.Price))" />
+ <GridColumn Field="@(nameof(Product.Released))" />
+ <GridColumn Field="@(nameof(Product.Discontinued))" />
+ </GridColumns>
+</TelerikGrid>
+
+@code {
+ private List<Product> GridData { get; set; } = new List<Product>();
+
+ private int PageSize { get; set; }
+
+ private List<int?> PageSizes { get; set; } = new List<int?> { null, 5, 10, 15 };
+
+ protected override async Task OnInitializedAsync()
+ {
+ await LoadData();
+
+ PageSize = GridData.Count();
+ }
+
+ private async Task LoadData()
+ {
+ GridData = Enumerable.Range(1, 30).Select(x => new Product
+ {
+ Id = x,
+ Name = "Product name " + x,
+ Price = (decimal)(x * 3.14),
+ Released = DateTime.Now.AddMonths(-x).Date,
+ Discontinued = x % 5 == 0
+ }).ToList();
+ }
+
+ public class Product
+ {
+ public int Id { get; set; }
+ public string Name { get; set; }
+ public decimal Price { get; set; }
+ public DateTime Released { get; set; }
+ public bool Discontinued { get; set; }
+ }
+}
+```