Responsive Layout

[Sam]

Hi,

I want to change the pager's default mode to mobile mode, that is, it will be the same mode as in the attached photo and it will be displayed in all the breakpoints like in Small.

[Prathap Senthil]

Hi Ali,

Greetings from Syncfusion,

Based on your requirements, we suggest using the pager template feature to override the built-in pager on larger screens. This will allow you to customize the pager according to your needs. Please refer to the documentation below for more information.

Reference:
https://blazor.syncfusion.com/documentation/datagrid/paging#pager-template


Regards,
Prathap Senthil

[Sam]

Hi  Prathap

i wanna use SfPager in SfListView for some reasons, and i want mobile mode as default mode of SfPager.

SfPager has a Method  IsMobileDevice(true); but i dont know how to use it correctly.

i attached the sample file, thx ..

Attachment: ListViewPager_4afd21cf.rar

[Prathap Senthil]

Hi Sam,

Based on your requirement, you can use SfMediaQuery to call the method only on small devices and disable it on large devices. Kindly refer to the code snippet and sample below for your reference.

<div class="listview-container">

 

    <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint" />

    @if (activeBreakpoint == "Small")

    {

        if (Pager !=null)

         IsMobileDevice(true);

    }

    else

    {

        if (Pager != null)

       IsMobileDevice(false);

 

    }

    @{

        var listData = ListData.Skip(SkipValue).Take(TakeValue).ToList();

        <SfListView CssClass="listview" TValue="DataModel" DataSource="listData" HeaderTitle="Products" ShowHeader="true">

            <ListViewFieldSettings TValue="DataModel" Id="ProductID" Text="ProductName"></ListViewFieldSettings>

        </SfListView>

    }

    <div class="pager-container">

        <SfPager @ref="@Pager" PageSize=5 NumericItemsCount=3 TotalItemsCount=25 ItemClick="Click">

        </SfPager>

    </div>

</div>

 

@code {

    SfPager Pager;

 

   

 

    public void IsMobileDevice(bool value)

    {

        Pager.IsMobileDevice(value);

    }

  

 

}

 

Sample:
https://blazorplayground.syncfusion.com/embed/VNVzMiskJoUfikbm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference:
https://blazor.syncfusion.com/documentation/media-query/break-points

Regards,
Prathap Senthil

[Sam]

Hi  Prathap

Thanks for your reply, but i don't want to disable it on large devices, 

What I want is that this IsMobileDevice property is active exactly in the large mode, that is, it is active by default.

[Prathap Senthil]

Regarding your requirement to always enable the IsMobileDevice, we suggest using the following approach to achieve this. Kindly refer to the code snippet and sample below for your reference.

<div class="listview-container">

 

    <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint" />

    @if (activeBreakpoint == "Small")

    {

        if (Pager != null)

            IsMobileDevice();

    }

    else

    {

        if (Pager != null)

            IsMobileDevice();

 

    }

    @{

        var listData = ListData.Skip(SkipValue).Take(TakeValue).ToList();

        <SfListView CssClass="listview" TValue="DataModel" DataSource="listData" HeaderTitle="Products" ShowHeader="true">

            <ListViewFieldSettings TValue="DataModel" Id="ProductID" Text="ProductName"></ListViewFieldSettings>

        </SfListView>

    }

    <div class="pager-container">

        <SfPager @ref="@Pager" PageSize=5 NumericItemsCount=3 TotalItemsCount=25 ItemClick="Click">

        </SfPager>

    </div>

</div>

 

@code {

   

 

    public void IsMobileDevice()

    {

        Pager.IsMobileDevice(true);

    }

 

Sample:https://blazorplayground.syncfusion.com/embed/hjBfMWLCfKzqNIcs?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Sam]

Hi  Prathap

Thanks for you reply, I run your code in PlayGround and in my own pc, but when the page is loaded, It's not in mobile mode.

[Prathap Senthil]

Based on your requirement, we suggest using the pager template feature to achieve your needs. Kindly refer to the code snippet and sample below for your reference.

<div class="listview-container">

    @{

        var listData = ListData.Skip(SkipValue).Take(TakeValue).ToList();

    }

    <SfListView CssClass="listview" TValue="DataModel" DataSource="listData" HeaderTitle="Products" ShowHeader="true">

        <ListViewFieldSettings TValue="DataModel" Id="ProductID" Text="ProductName"></ListViewFieldSettings>

    </SfListView>

    <div class="pager-container">

        <SfPager PageSize="5" TotalItemsCount="@(TotalItemsCount)" CurrentPage="@currentPage">

            <Template>

                @{

                    var Page = context as Syncfusion.Blazor.Navigations.PagerTemplateContext;

                    <div class="pager-wrapper">

                        <span class="e-icons e-icon-first pager-icon @((Page.CurrentPage == 1 ? "disabled" : ""))"

                              title="First" @onclick="@(() => GoToPage(1))"></span>

                        <span class="e-icons e-icon-prev pager-icon @((Page.CurrentPage == 1 ? "disabled" : ""))"

                              title="Previous" @onclick="@(() => GoToPage(Page.CurrentPage - 1))"></span>

                        Page @Page.CurrentPage of @Page.TotalPages

                        <span class="e-icons e-icon-next pager-icon @((Page.CurrentPage == Page.TotalPages ? "disabled" : ""))"

                              title="Next" @onclick="@(() => GoToPage(Page.CurrentPage + 1))"></span>

                        <span class="e-icons e-icon-last pager-icon @((Page.CurrentPage == Page.TotalPages ? "disabled" : ""))"

                              title="Last" @onclick="@(() => GoToPage(totalPages))"></span>

                    </div>

                }

          

            </Template>

        </SfPager>

    </div>

</div>

 

<style>

    .pager-wrapper {

        display: flex !important;

        justify-content: space-between;

        align-items: center;

    }

 

    .pager-icon {

        flex-grow: 1;

        text-align: center;

        color: lightslategray;

        cursor: pointer;

    }

 

 

        .pager-icon.disabled {

    

            opacity: 0.5;

            cursor: not-allowed;

            pointer-events: none;

        }

</style>

 

@code {

    public int pageSize { get; set; } = 5;

    public int currentPage { get; set; } = 1;

    public int totalPages => (int)Math.Ceiling((double)TotalItemsCount / pageSize);

    public int SkipValue => (currentPage - 1) * pageSize;

    public int TakeValue = 5;

    public int TotalItemsCount => ListData.Count;

    List<DataModel> ListData = new List<DataModel>();

 

 

    private void GoToPage(int page)

    {

        if (page >= 1 && page <= totalPages)

        {

            currentPage = page;

        }

    }

 

    public class DataModel

    {

        public int ProductID { get; set; }

        public string ProductName { get; set; }

    }

}

 

Reference: Pager with Template in Blazor Pager Component | Syncfusion


Sample:https://blazorplayground.syncfusion.com/embed/VjBpMWrkroBGonRg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Sam]

Dear Syncfusion Team,

I wanted to express my sincere gratitude for the excellent and thorough response to my question. The information you provided was incredibly helpful, and I truly appreciate your efforts.

Wishing you all the best!

Best regards