We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Ability for User To Select Results per Page

Hello, I am currently using Syncfusion for ASP.NET MVC and it is an awesome set of tools. I have recently been using the Syncfusion grid control to display data. I would like to have the ability for there to be a dropdown on the page that allows the user to select how many results are being displayed per page. I found a web page that described how to do this, but it was for Syncfusion Javascript (Javascript Results Per Page Link) and not Syncfusion ASP.NET MVC. Any help would be appreciated.

7 Replies

SA Saravanan Arunachalam Syncfusion Team July 21, 2017 10:00 AM UTC

Hi Eli Hellmer, 
Thanks for contacting Syncfusion’s support. 
We have analyzed your requirement, it is already logged as a feature “Provide support to choose page size through dropdown list in pager container” and it will be inculde in our 2017 Volume 3 release which is expected to roll out at the end of July, 2017. 
And we have achieved your requirement by using pager template feature of Grid control. By using pager template element, we have rendered the ejDropDownList to change the pageSize by using “ActionComplete” event of Grid control which you can refer from the below code example and also refer to the following links. 
<script type="text/x-jsrender" id="pagertemplate"> 
    <select name="selectIndex" class="e-ddl" id="projectPageSize"> 
        <option value="10">10</option> 
        <option value="20">20</option> 
        <option value="30">30</option> 
    </select> 
</script> 
 
@(Html.EJ().Grid<OrdersView>("Grid") 
        . . . 
        .PageSettings(p => p.Template("#pagertemplate").EnableTemplates().ShowDefaults().PageSize(10)) 
        .Columns(col => 
        .ClientSideEvents(e=>e.ActionComplete("PageRefresh").ActionBegin("onBegin")) 
) 
    <script type="text/javascript"> 
        var index = 0; 
        function PageRefresh(args) { 
            if(this.initialRender || args.requestType == "paging") 
                renderDropdown(); 
        } 
        function renderDropdown(){ 
            var gObj = $("#Grid").ejGrid("instance"); 
            //To Render the ejDropDownList on pager template 
            gObj.getPager().find("select").ejDropDownList({  
                selectedIndex: index,  
                change: "pageSizeChange",  
                showRoundedCorner: true, 
                width: 60, height: 25  
            }); 
 
        } 
        function pageSizeChange(args){ 
            var gridModel = $("#Grid").ejGrid("model"); 
            var pagerModel = $("#Grid").ejGrid("getPager").ejPager("model"); 
            var newLastPage = Math.ceil(gridModel.pageSettings.totalRecordsCount / args.value); 
            if (pagerModel.currentPage > newLastPage) 
                $("#Grid").ejGrid("getPager").ejPager("goToPage", newLastPage); 
            $("#Grid").ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } }); 
            index = args.itemId; 
            renderDropdown(); 
        } 
         
     
</script> 
 
And also we have created a sample that can be downloaded from the bekow link. 
Regards, 
Saravanan A. 



EH Eli Hellmer July 21, 2017 04:59 PM UTC

I used the code you submitted and I am getting an error when testing it out. I am getting the error "index in undefined" and the location is in the code block for the renderDropdown() javascript method.



MS Mani Sankar Durai Syncfusion Team July 24, 2017 07:25 AM UTC

Hi Eli Hellmer,  
 
We have analyzed your query and we suspect that you have not assigned the value for the index variable globally. This is the reason you may get the script error. So we suggest you to set the value for the index variable as like the below code 
<script type="text/javascript">  
        var index = 0;  
        function PageRefresh(args) {  
            if(this.initialRender || args.requestType == "paging")  
                renderDropdown();  
        }  
        function renderDropdown(){  
            var gObj = $("#Grid").ejGrid("instance");  
            //To Render the ejDropDownList on pager template  
            gObj.getPager().find("select").ejDropDownList({   
                selectedIndex: index  
                change: "pageSizeChange"  
                showRoundedCorner: true,  
                width: 60, height: 25   
            });  
  
        }  
                              ... 
</script> 

If you still face the issue please get back with the following details. 
1.       In what case you have faced the issue like any grid actions? 
2.       Share the screenshot of the issue. 
3.       If possible please reproduce the issue in the previous attached sample 
The provide information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance 

Regards, 
Manisankar Durai. 



EH Eli Hellmer July 26, 2017 09:54 PM UTC

The code is still not working for me. Here is the code:

@model ProjectViewModel


<script type="text/x-jsrender" id="labellink">

    <a rel='nofollow' href="Edit?id={{:id}}">

        {{:Number}}

    </a>

</script>


<script type="text/x-jsrender" id="optlink">

    <a rel='nofollow' href="/Unit/GetUnitListFromProject?projID={{:id}}">

        <i class="glyphicon glyphicon-filter"></i>

    </a>{{:classlet}}

</script>

<script type="text/x-jsrender" id="pagertemplate">

        <select name="selectIndex" class="e-ddl" id="projectPageSize">

            <option value="2">2</option>

            <option value="4">4</option>

            <option value="5">5</option>

        </select>

    </script>



<form>

    @(Html.EJ().Grid<LabSys.NEWLabSys.ProjectsViewModel>("ProjGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowSorting()

        .AllowPaging()

        .PageSettings(p =>

        p.Template("#pagertemplate").EnableTemplates().ShowDefaults().PageSize(10))        

        .AllowResizeToFit()

        .AllowTextWrap()

        .AllowScrolling()

        .ScrollSettings(s => s.Width("100%"))

        .AllowFiltering()      

        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

        .ClientSideEvents(eve => eve.DataBound("dataBound"))

        .ClientSideEvents(e => e.ActionComplete("PageRefresh").ActionBegin("onBegin"))        

        .Columns(col =>

        {

            

            col.HeaderText("Opt.").Template("#optlink").Width(40).AllowFiltering(false).Add();

            col.Field(z => z.Number).HeaderText("Number").Template("#labellink").Add();

            col.Field(z => z.name).HeaderText("Name").Add();

            col.Field(z => z.status).HeaderText("Status").Add();

            col.Field(z => z.type).HeaderText("Type").Add();

            col.Field(z => z.engname).HeaderText("Lead Engineer").Add();

            col.Field(z => z.phase).HeaderText("Phase").Add();

            col.Field(z => z.CompletedDateDT).HeaderText("Completion Date").Format("{0:MM/dd/yyyy}").Width(100).Add();

        }

       

        ))

</form>

    <script type="text/javascript" language="javascript">

        var index = 0;

        

        function PageRefresh(args){

            if (this.initialRender || args.requestType == "paging")

                

                renderDropdown();

        }

        function renderDropdown() {

            var gObj = $("#ProjGrid").ejGrid("instance");

            //render the ejDropDownList on pager template

            gObj.getPager().find("selectIndex").ejDropDownList({

                selectedIndex: index,

                change: "pageSizeChange",

                showRoundedCorner: true,

                width: 60, height: 25

            });

        }

        function pageSizeChange(args) {

            debug;

            var gridModel = $("#ProjGrid").ejGrid("model");

            var pagerModel = $("#ProjGrid").ejGrid("getPager").ejPager("model");

            var newLastPage = Math.ceil(gridModel.pageSettings.totalRecordsCount / args.value);

            if (pagerModel.currentPage > newLastPage)

                $("#ProjGrid").ejGrid("getPager").ejPager("goToPage", newLastPage);

            $("#ProjGrid").ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } });

            index = args.itemId;

            renderDropdown();

        }

    </script>



MS Mani Sankar Durai Syncfusion Team July 27, 2017 12:19 PM UTC

Hi Eli Hellmer 

We have analyzed your query and from your code example we found that the ejDropDown doesn’t renders properly and functionality of pager template doesn’t works. This cause of this issue is due to you have used selectIndex instead of finding select element in pager template. 
Refer the code example 
<script type="text/x-jsrender" id="pagertemplate"> 
  <select name="selectIndex" class="e-ddl" id="projectPageSize"> 
        <option value="2">2</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
    </select> 
</script> 
                 ... 
 
function renderDropdown() { 
        var gObj = $("#Grid").ejGrid("instance"); 
        //render the ejDropDownList on pager template 
        gObj.getPager().find("select").ejDropDownList({   //find the select element from the pager instead of finding selectIndex since it is an name attribute of select element 
           ... 
 
}) 

Refer the screenshot below 
 

Please let us know if you need further assistance 

Regards, 
Manisankar Durai. 



EH Eli Hellmer July 27, 2017 06:33 PM UTC

The code change that you recommended fixed my problem. I appreciate the help!



MS Mani Sankar Durai Syncfusion Team July 28, 2017 08:41 AM UTC

HI Eli Hellmer  

We are happy to hear that your problem has been solved. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Live Chat Icon For mobile
Up arrow icon