Added new kb article set-all-page-size-option-as-default

knowledge-base/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: Set "All" PageSize option as default | Telerik Grid for Blazor
+slug: set-all-page-size-option-as-default
+tags: 
+ - Telerik Grid
+ - Blazor
+ - Page Size
+ - All Option
+ - Default
+ticketid: 1624891
+res_type: kb
+---
+
+## Environment
+| Property | Value |
+| --- | --- |
+| Product | Grid for Blazor |
+
+## 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` property 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.
+
+Here's an example implementation:
+
+```
+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; }
+ }
+}
+```