Custom Pager + Dropdownlist

[jqxgridNoobParticipant]

Hello,

I am having issues implementing this.

From my understanding, the pagerenderer function is called each time you select a value from the dropdown list to change the page size.

My problem is that once I select a value from the drop down, the pagerenderer function is called again which then initializes the dropdownlist with the original selected index value.

For example, on initial load the selected index is on position 0 (lets say 10 rows). If I change the dropwdown to the next index (20 rows), the pagerenderer func() is called again, and the dropdownlist is initialized all over again with the default value. So clicking 20 rows will successfully change the pagesize to 20, but the dropdownlist selected value is back to the default (10 rows).

Any ideas how to fix this?

var pagerrenderer = function () {
                    var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
                    var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                    var paginginfo = datainfo.paginginformation;

                   

                    var leftButton = $("<div style='padding: 0px; float: right;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
                    leftButton.find('div').addClass('jqx-icon-arrow-left');
                    leftButton.width(36);
                    leftButton.jqxButton({ theme: theme });

                    var rightButton = $("<div style='padding: 0px; float: right;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
                    rightButton.find('div').addClass('jqx-icon-arrow-right');
                    rightButton.width(36);
                    rightButton.jqxButton({ theme: theme });

                    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                    var dropdown = $('<div style="float: right;"></div>');
                    dropdown.jqxDropDownList({ source: ['10', '50', '100', rowscount],  selectedindex: 0, width: 55, height: 17, autoDropDownHeight: true })
                    dropdown.on('select', function (event) {
                        var args = event.args;
                        if (args) {
                            var index = args.index;
                            var item = args.item;
                            var label = item.label;
                            $('#jqxgrid').jqxGrid({ pagesize: parseInt(label) });
                           
                        }
                    });

                  
                    var label = $("<div style='font-size: 11px; padding-right: 25px; font-weight: bold; float: right;'></div>");
                    label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
                    label.appendTo(element);
                    self.label = label;
                    // update buttons states.
                    var handleStates = function (event, button, className, add) {
                        button.on(event, function () {
                            if (add == true) {
                                button.find('div').addClass(className);
                            }
                            else button.find('div').removeClass(className);
                        });
                    }

                    rightButton.appendTo(element);
                    leftButton.appendTo(element);
                    dropdown.appendTo(element);

              

                    rightButton.click(function () {
                        $("#jqxgrid").jqxGrid('gotonextpage');
                    });

                    leftButton.click(function () {
                        $("#jqxgrid").jqxGrid('gotoprevpage');
                    });

                    return element;
                }

[ivailoParticipant]

Hi jqxgridNoob,

You are set the jqxDropDownList with “selectedindex: 0” so every time it will select the first element.
In your case you have to use a variable as a container of the selectedIndex’s value and set it’s according to the page size.

Here is an example.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts