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.
Unfortunately, activation email could not send to your email. Please try again.

Allowing user to select number of records per page

Thread ID:

Created:

Updated:

Platform:

Replies:

116047 Mar 23,2014 10:19 PM Mar 27,2014 02:52 AM JavaScript 5
loading
Tags: ejGrid
Xander van der Merwe
Asked On March 23, 2014 10:19 PM

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 [Syncfusion]
Replied On March 25, 2014 03:16 AM

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
Replied On March 25, 2014 04:44 AM

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 [Syncfusion]
Replied On March 26, 2014 05:43 AM

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
Replied On March 26, 2014 05:46 AM

Perfect!!

Thank you so much.
Regards

Madhu Sudhanan P [Syncfusion]
Replied On March 27, 2014 02:52 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;