Grid pager with selectable items per page via dropdown

[Joel DSouza]

Is there anything built-in to support this type of a feature? 

I'm aware that this could be part of a custom pager implementation but this also involved redrawing the  pageCount presentation based on the total count available.  Is there a sample that point me in the right direction?

Thanks,

Joel

[Ragavee U S]

Hi Joel, 

Thanks for your interest in Syncfusion products. 

We have achieved your requirement using the pagerTemplates feature of the Grid. Using this feature, we can customize the grid pager based on our need. Please refer to the below documentation for more information. 

http://help.syncfusion.com/js/grid/paging#pager-template 

http://help.syncfusion.com/js/api/ejgrid#members:pagesettings-enabletemplates 

We have prepared a sample which can be tracked through below link. 

http://jsplayground.syncfusion.com/4r345aw4 

In the above sample, we have rendered a dropdown control in grid pager which is used to change the pageSize of the Grid. Please refer to the below code example. 

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

        <input id="pageSize" type="text" style="text-align:center; margin:0px;border:none;width:32px;height:23px" /> 

 

        <span style="padding:5px">items per page</span> 

 

 

    </script> 

 

<script type="text/javascript">         

        $(function () {             

            $("#Grid").ejGrid({ 

                dataSource: data, 

                allowPaging: true,                 

                pageSettings: { pageSize: 10, enableTemplates: true, template: "#template", showDefaults: true }, 

                actionComplete: function (args) { 

                    $(".e-pagercontainer.e-template").css('border-style', 'none'); 

                    if (args.requestType == "refresh") 

                        debugger 

                    $("#pageSize").ejDropDownList({ // here we will change input box into ejDropDownList 

                        width: 55, 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 

                        } 

                    }); 

                } 

            }); 

        }); 

 

 

    </script> 

Regards, 

Ragavee U S. 

[Joel DSouza]

Thanks Ragavee - that did the job.

I noticed that with your demo on Chrome, the page size selector is not in line with the other pager elements. But if I change the size, then it fixes alignment. Then, as you page through, it goes off alignment again. Any idea what the CSS issue there might be?

[Ragavee U S]

Hi Joel, 

Thanks for the update. 

We have modified the sample to align the page size dropdown inline with the other pager elements. We have set the display property for the grid .e-pagercontainer class as “inline-flex” and have also set height property for the container. Please find the modified sample below. 

http://jsplayground.syncfusion.com/rx3ogksz 

<style> 

        #Grid .e-pagercontainer { 

            display: inline-flex; 

            height: 27px; 

        } 

    </style> 

 

    <script type="text/javascript">     

    $(function () { 

        // the datasource "window.gridData" is referred from jsondata.min.js 

        var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50)); 

        $("#Grid").ejGrid({ 

            . . . 

            actionComplete: function (args) { 

                $(".e-pagercontainer.e-template").css('border-style', 'none'); 

                if (args.requestType == "refresh") 

                    $("#pageSize").ejDropDownList({ // here we will change input box into ejDropDownList 

                        width: 55, height: 27, value: args.model.pageSettings.pageSize, dataSource: dropData, // here we set the height and width properties of ejDropDownList 

                        . . . 

                        } 

                    }); 

            } 

        }); 

    }); 

 

 

    </script> 

Regards, 

Ragavee U S. 

[Joel DSouza]

Thank you very much Ragavee - that was very helpful.

[Ragavee U S]

Hi Joel, 

  

Thanks for your update. 

  

We are happy that your requirement is achieved. 

  

Regards, 

Ragavee U S. 

[Henryk]

I'm trying to implement a similar thing but using ASP.NET MVC.   And I'm struggling.  

In my grid definition I have ...

.PageSettings(p=>p.ShowDefaults().EnableTemplates().Template("pagerTemplate"))

The template I have so far is...

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

    @Html.EJ().DropDownList("pageSizes").Datasource((IEnumerable<WARP.Models.PageSize>)ViewBag.PageSizes).DropDownListFields(df => df.ID("size").Text("name").Value("size"))

</script>

I think I'm missing something as the dropdown is not displaying at all.

I understand I would also need to create an on change event for the dropdown to refresh the grid.

Cheers,

H

[Ragavee U S]

Hi Henryk, 

We have analyzed the code example that you have shared and found that you have missed out to add the “#” while specifying the template id to the Template property of the Pager. Please refer to the below code example. 

@(Html.EJ().Grid<EditableOrder>("Grid") 

                . . . 

                .PageSettings(p => p.ShowDefaults().EnableTemplates().Template("#pagerTemplate")) 

                . . . 

) 

Also, we cannot define the html helpers within the script template. So, please define the input element in script template and render the element to required control within the actionComplete event of the Grid. Please refer to the below sample. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample_PagerTemplate1969449477 

Regards, 

Ragavee U S. 

[Henryk]

Oh dear :)

Thanks, got it working.

[Ragavee U S]

Hi Henryk, 

We are happy that the issue is resolved. Please don’t hesitate to call us back, if you have need any further assistance. 

Regards, 

Ragavee U S.