Allowing user to select number of records per page

[Xander van der Merwe]

In the grid footer, say somewhere between the pager on the left and the page/record counters on the right, I would like to insert a dropdown where the user can select the number of records to display per page and I would like to be able to configure the selection options (e.g. 10, 20, 30, 50, 100).

Something like:    "Records per Page: [  20  ][\/]"

In my case I am calling a Lightswitch OData backend datasource, although I do not believe that is important.

Is this possible?

Thanks in advance

[Madhu Sudhanan P]

Hi Xander,

 

We have not provided in-built support to place a drop downlist in the grid pager.But we can achieve your requirement through the workaround solution.

 

For your convenience, we have created a simple grid sample with a dropdownlist in the pager and allow the user to select the page size. Please find the sample from the attachment.

 

In the attached sample, the grid page size will be updated based on selection of value from the dropdownlist. Please refer the following code snippet.

 

 

function onchange(sender) {

            var model = $("#Grid").ejGrid("model"); //Will be called when a value is selected in dropdown

            var model1 = $("#Grid").ejGrid("getGridPager").ejPager("model");

            var newLastPage = Math.ceil(model.pageSettings.totalRecordsCount / sender.value);

            if (model1.currentPage > newLastPage)

                $("#Grid").ejGrid("getGridPager").ejPager("goToPage", newLastPage);

            $("#Grid").ejGrid({ "pageSettings": { pageSize: parseInt(sender.value) } }); //Setting the new page size

            renderDrop();

        }

 

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

Attachment: FSample_c8412808.zip

[Xander van der Merwe]

Thanks Madju, that will work great. 

The only thing I notice is that:

a) the bottom part of the dropdown box seems to be cut off slightly (by a few pixels only)

b) the dropdown stays blank and does not display the currently selected page size

Any quick fixes for those?

Regards

[Madhu Sudhanan P]

Hi Xander,

 

Please find the response.

 

Query: “the bottom part of the dropdown box seems to be cut off slightly (by a few pixels only)”

 

This can be fixed by the following workaround solution.

 

 

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

                    <div class="droptemplate">

                        <input type="text" id="drop{{:OrderID}}"/>

 

                    </div>

 

<style>

     .droptemplate [class^="e-"]{

         box-sizing:border-box;

         -moz-box-sizing:border-box;

         -webkit-box-sizing:border-box;

     }

</style>

 

 

Query: “the dropdown stays blank and does not display the currently selected page size”

 

Based on your request, we have made some changes in the previously provided sample to set the page size value in the dropdownlist and also with the dropdownlist bottom border missing issue fixed.

 

Please find the sample from the attachment.

 

The value in the dropdownlist can be selected by the following code snippet.

 

 

   $("#select1").ejDropDownList({ selectedItem: 0});  //select the item at index 0

 

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

Attachment: 116047_6bc48231.zip

[Xander van der Merwe]

Perfect!!

Thank you so much.

Regards

[Madhu Sudhanan P]

Hi Xander,

Thanks for your appreciation.

Please get back to us if you require further assistance. We will be happy to help you out.

Regards,
Madhu Sudhanan. P