How to Change "pageSize" by code?

I’m trying to have a little dropdownlist with different values (10,50,100) and when the user select one I would change the pagesize.

<div id="jsgrid"></div><select id="pagelength">
    <option>10</option>
    <option>50</option>
    <option>180</option>
</select>

var selectedPagelength = 15;

 $("#pagelength").change(function () {
    onPageLenghtSelect($(this).val());
});

function onPageLenghtSelect(newLenght) {
    selectedPagelength = newLenght;
    $("#instancedata-grid").jsGrid("refresh");
}

$("#instancedata-grid").jsGrid({
                autoload: true,
                sorting: true,
                paging: true,
                pageSize: selectedPagelength,
                pageButtonCount: 5,
               ....

Nothing changes. I try “render” instead of refresh… same result. If I recall my $.getJSON it works, but then I when back to the server… I don’t need calling my api to get new data I just want to change the number of line displayed.

[FBoucher]

Fantastic, it works!

Here what I did:

    <span id="pageResizer" class="jsgrid-pager-page">
        <select id="pagelength">
            <option>15</option>
            <option>30</option>
            <option>60</option>
            <option>180</option>
        </select>
    </span>
    <div id="instancedata-grid"></div>

    <script type="text/javascript">
        function onPageLenghtSelect(newLenght) {
            selectedPagelength = newLenght;
            $("#instancedata-grid").jsGrid("changePageSize", selectedPagelength);
        }

        $("#instancedata-grid").jsGrid({
            autoload: true,
            sorting: true,
            paging: true,
            pageSize: selectedPagelength,
            pageButtonCount: 5,
            changePageSize: function (pageSize) {
                var $this = this;
                $this.pageSize = selectedPagelength;
                $this.refresh();
            },
            ...
        });

        $("#pageResizer").prependTo(".jsgrid-pager");
    </script>

[FBoucher]

Yeah that’s what I did. Bad copy paste. and I used the pagerContainer: property instead of the jquery to get the dropdown inside the pager section.