1. Home
  2. Forum
  3. ASP.NET Core
  4. Align items per page with pager control

Align items per page with pager control

Hi support, i need to add the items per page in Pager control at the bottom of page.

Im my cshtml i have:
    <div class="row" id="Pager">
        <ej-pager id="pager" total-records-count="20" is-responsive="true" show-page-info="true" page-size="5" locale="@locale"
                  click="PagerClick" create="PagerCreate" ></ej-pager>
    </div>

and in JS section:
    <script type="text/x-jsrender" id="template">
        <input id="pageSize" type="text" style="text-align:center; margin:0px;border:0px;width:32px;height:23px;" />
        <span style="padding:5px">@viewLocalizer["ITEM_PER_PAGE"]</span>
    </script>

    <script type="text/javascript" id="PagerCreate">
        function PagerCreate(args) {

            $("#Pager").ejPager({
                template: "#template"
            });
 
            $("#pageSize").ejDropDownList({
                width: 55,
                height: 29,
                value: args.model.pageSize,
                dataSource: dropData, 
                change: function (args) { 
                    $("#Pager").ejPager({ pageSize: parseInt(args.value)  }); 
                }
            })

            RefreshPage(1);
        }
    </script>

How can i align the listbox to pager navigation and send a refresh page when i change the listbox content.

Thans
Stefano Capobianco


4 Replies
PK Prem Kumar Madhan Raj Syncfusion Team June 11, 2018 12:39 PM UTC

Hi Stefano,   
  
Thanks for contacting Syncfusion Support.   
  
From the shared code snippet, we suspect that your requirement is to dynamically change the pageSize value of the Pager control by using a dropdown list and update the pager control on each value changes in dropdown list control. We would like to let you know that we have already provided this as a built in feature with page-size-list API, where similarly a dropdown will be displayed with the API values with which we can select a required value to change the page Size value dynamically.   
  
Code snippet to define page-size-list API.   
  
@{   
    ViewData["Title"] = "Home Page";   
    //defining page list as list of integer   
    List<int> pageSizeList = new List<int>();   
    pageSizeList.Add(1);   
    pageSizeList.Add(2);   
    pageSizeList.Add(3);   
}   
     
<div class="row" id="Pager">   
   
    <ej-pager id="pager" total-records-count="20" is-responsive="true" show-page-info="true"page-size="5" create="PagerCreate" page-size-list="pageSizeList"></ej-pager>   
   
</div>   


  
To know more about page-size-list API, please check the below documentation link.   
  
  
For your convenience, we have created a sample using page-size-list API in the below link. Please check it.   
  
  
If this is not your requirement, then please revert with more information so that we can provide an exact solution for your requirement.   
  
Regards,   

Prem Kumar M  
 


SC Stefano Capobianco June 11, 2018 02:22 PM UTC

Hi support, thanks for your response but i need somethings like the
    <script type="text/x-jsrender" id="template">
        <input id="pageSize" type="text" style="text-align:center; margin:0px;border:0px;width:32px;height:23px;" />
        <span style="padding:5px">@viewLocalizer["ITEM_PER_PAGE"]</span>
    </script>

            $("#pageSize").ejDropDownList({
                width: 55,
                height: 29,
                value: args.model.pageSettings.pageSize,
                dataSource: dropData, // here we will set dataSource and other properties for ejDropDownList
                change: function (args) { // this is change event of ejDropDownList and this event triggers after the value changed
                    $("#Grid").ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } }); // here we will change pagesize in model
                }
            })

to set the items diplayed in html page and after any change in listbox fetch data from datamanager.

I hope that can clarify you about my question.

Thanks
Stefano

SC Stefano Capobianco June 11, 2018 02:44 PM UTC

Thanks for your suggestion i've solved thanks to your solution and i added the page-size-selected event. Thanks soo much

Stefano

PK Prem Kumar Madhan Raj Syncfusion Team June 12, 2018 11:47 AM UTC

Hi Stefano, 

Thanks for the update. 

Please let us know if you need further assistance. 

Regards, 

Prem Kumar M 


Loader.
Up arrow icon