CODEWITHSUNDEEP
jqueryjqgridpager
malkam
malkam

Reputation: 2355

Textbox for rowList instead of select in jqGrid pager

Is it possible to have textbox and button to specify page size instead of having select with options.

I want pager like below

enter image description here

User can enter page number in first text box and refresh grid only when clicking on "Go" button and user can change page size by editing second text box and clicking on "Change" grid needs to refreshed with updated total number of pages,page size etc..

Thanks in advance!!

Upvotes: 2

Views: 1303

Answers (1)

Oleg
Oleg

Reputation: 221997

Everything is possible! The demo demonstrates one of the possible implementation. It uses external input control:

enter image description here

In the same way you can move the controls to the pager/pagers, you can force Click on the "Change" button on pressing Enter key and so on. I just wanted to demonstrate how the requirements could be implemented. I used both toppager and the second pager at the bottom on the demo to demonstrates that the approach works in the case too.

The code used in the demo is the following:

var getPagerSelectors = function () {
        return $("#list").closest(".ui-jqgrid").find(">.ui-jqgrid-view>.ui-jqgrid-toppager,>.ui-jqgrid-pager").find(".ui-pg-selbox");
    };
$("#setRowNum").button().click(function () {
    var newRowNum = parseInt($("#newRowNum").val(), 10);
    if (newRowNum > 0) {
        var $selects = getPagerSelectors();
        var $firstOption = $selects.find("option:nth-child(1)");
        $firstOption.text(newRowNum);
        $firstOption.val(newRowNum);
        $selects.first().val(newRowNum);
        $selects.first().trigger("change");
    }
});
getPagerSelectors().hide();

If one removed the last line (getPagerSelectors().hide();) one will see that I just change the value of the first option in the <select> used by jqGrid for choosing the page size, set the option as selected and trigger "change" event in the first pager. It's all.

UPDATED: One more demo uses insertAfter to move controls used for entering new page size. The results looks like below

enter image description here

I used the following CSS styles

.ui-jqgrid .ui-jqgrid-pager, .ui-jqgrid .ui-jqgrid-toppager {
    height: auto !important;
}
.ui-jqgrid .ui-pg-table {
    padding-bottom: 0;
}

to improve a little the height of the pager after adding new components.

Upvotes: 2

Related Questions