Current PageSize when EnablePersistence is true

[Yongkee Cho]

How to get the current PageSize when EnablePersistence is true. I want it to be applied to the ComboBox in grid toolbar.

<SfGrid ID="equipment" @ref="_equipmentGrid" DataSource="@_equipment" TValue="Equipment" EnableHover="true" EnablePersistence="true"
        AllowPaging="true" AllowFiltering="true" AllowExcelExport="true" AllowSorting="true" AllowGrouping="true" EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Mobile"
        Toolbar="@(new List<Object>() { "Search" })">
    <GridPageSettings PageSize="@_pageSize">
        <SfToolbar OverflowMode="OverflowMode.Extended" CssClass="pt-2 px-2">
            <ToolbarItems>
                <ToolbarItem Type="ItemType.Input">
                    <SfComboBox @bind-Value="@_pageSize" DataSource="@_displayOptions" Width="70px" ShowClearButton="false" CssClass="e-small">
                        <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
                    </SfComboBox>
                </ToolbarItem>
            </ToolbarItems>
        </SfToolbar>
    </GridPageSettings>
        <GridColumns>
            <GridColumn Field=@nameof(Equipment.DepartmentId) HeaderText="Department" Width="120px" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Center" AllowFiltering="true" ClipMode="ClipMode.EllipsisWithTooltip" />
        </GridColumns>
    </SfGrid>

@code {

    private int _pageSize = 10;
    private readonly int[] _displayOptions = new[] { 10, 75, 150, 300 };
    private SfGrid<Equipment>? _equipmentGrid;

[Huffman Samuel]

Looks good overall! You might want to make sure displayoptions includes values consistent with your pagination logic: 10 to 300 seems fine, but maybe double-check if you really need 75? 

From Slope

[Naveen Palanivel]

Hi Yongkee Cho,

We reviewed your query and would like to clarify that when EnablePersistence is set to true, it only maintains the state of the Grid component. However, you can still retrieve the current PageSize and assign it to a ComboBox in the Grid toolbar using the DataBound event. Please refer to the sample and code snippet below for more details.

UG : https://blazor.syncfusion.com/documentation/datagrid/events#databound

Sample : https://blazorplayground.syncfusion.com/VDhesZqCgErrrrIU

 

<SfGrid ID="equipment1" @ref="_equipmentGrid" DataSource="@_equipment" TValue="Equipment" EnableHover="true" EnablePersistence="true"

        AllowPaging="true" AllowFiltering="true" AllowExcelExport="true" AllowSorting="true" AllowGrouping="true" EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Mobile"

        Toolbar="@(new List<Object>() { "Search" })">

    <GridEvents DataBound="DataBoundHandler" TValue="Equipment"></GridEvents>

    <GridPageSettings PageSize="@_pageSize">

        <SfToolbar OverflowMode="Syncfusion.Blazor.Navigations.OverflowMode.Extended" CssClass="pt-2 px-2">

            <ToolbarItems>

                <ToolbarItem Type="Syncfusion.Blazor.Navigations.ItemType.Input">

                    <SfComboBox @bind-Value="@_pageSize" DataSource="@_displayOptions" Width="70px" ShowClearButton="false" CssClass="e-small">

                        <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>

                    </SfComboBox>

                </ToolbarItem>

            </ToolbarItems>

        </SfToolbar>

    </GridPageSettings>

        <GridColumns>

        <GridColumn Field=@nameof(Equipment.DepartmentId) HeaderText="Department" Width="120px" HeaderTextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" AllowFiltering="true" ClipMode="ClipMode.EllipsisWithTooltip" />

        </GridColumns>

    </SfGrid>

 

@code {

 

    private int _pageSize = 10;

    private readonly int[] _displayOptions = new[] { 10, 75, 150, 300 };

    private SfGrid<Equipment>? _equipmentGrid;

    private List<Equipment> _equipment = new();

    private bool _isFirstRender = true;

 

   protected override void OnInitialized()

    {

        _equipment = Enumerable.Range(1, 200).Select(i => new Equipment

        {

            DepartmentId = i,

        }).ToList();

    }

    public void DataBoundHandler()

    {

        if (_isFirstRender && _equipmentGrid != null)

        {

            _pageSize = _equipmentGrid.PageSettings.PageSize;

            _isFirstRender = false;

        }

 

    }

Regards,
Naveen