Server side paging and client side grouping no longer working after upgrading

[jgarisParticipant]

We have been using jqwidgets version 3.0.2 on our website and using the jqxgrid with client side grouping and server side paging. It has been working fine. I tried upgrading jqwidgets to 3.2.2 today and after doing that the grouping only happens on the first page, and subsequent pages lose their grouping.

I tried testing this with the in-between versions to see which version this broke in, and it looks like it broke going from 3.0.4 to 3.1.0. Were there any known changes regarding this functionality in 3.1.0? The changelog doesn’t seem to mention anything around this specifically but since there was a lot of changes in that release it could just be a side effect.

Here is the code we use to initialize the grid:

// for refine by functionality, getting the refine by to display is done by setting properties
// on the columns collection that is passed in.  Here are the new properties that should
// be added to a column in the collection:
//       refineByType
//          possible values: text, range, daterange, checklist
//
//      sourceDatafield
//          value:  should be the name of an item in datafields.  Normally the refine by uses
//                  the datafield setting for the column, but in some instances this is a formatted
//                  string, instead of the actual data value.  Refine by must use the underlying numeric or date
//                  column in order to do filter correctly.
// examples:
// var columns =    [
//                      { text: 'Trade Price', datafield: 'TradePriceDisplay', cellsalign: 'right', minwidth: 100, refineByType: 'range', sourceDatafield: 'TradePrice' }
//                  ];

function refineByGrid() {

    var readyEvent = null;
    var theme = "ceo";
    var RefineByText = 'Refine by';
    var pagenum = 0;
    var pagesize = 10;
    var enablePaging = true;
    var rowsheight = 25;
    var customGroupRenderer = null;
    var downLoadCompleteEvent = null;
    var totalrecords = 0;
    var callWebService = true,
        control,
        dataSourceUrl,
        source,
        dataAdapter,
        refineByBar,
        getValuesForRefineBy = true,
        exportFileName;
    var lastUpdatedFilter;
    var hasSubGrid = false;
    var initSubGrid = null;
    var isPostBack = false;
    var maintainState = false;
    var groupsDisplayColumns = null;
    var showstatusbar = false;
    var selectionmode = 'none';
    var showaggregates = false;
    var databinding = false;

    // By default a refing by grid is registered with the counterparty selector 
    // for a data refresh when the user updates the selected counterparties.
    var registerForRefresh = true;

    // this returns the parent of 'Self', 
    // which is the refine by grid.
    function widget() {
        return this;
    }

    function LogException(e) {
        if (window.console && window.console.log) window.console.log(e);
    }

    function addRefineByValues(gridSettings) {
        if (getValuesForRefineBy && !maintainState) {
            gridSettings.RefineByColumns = refineByBar.getColumns();
        } else {
            gridSettings.RefineByColumns = lastUpdatedFilter;
        }
        return gridSettings;
    }

    function updateFilters() {
        lastUpdatedFilter = refineByBar.getFilter();
    }

    function setMaintainState(state) {
        // only do this if the refine by has been submitted already
        if (lastUpdatedFilter) {
            maintainState = state;
        }
    }

    function GetSortColumnValue(data, columnVals) {
        var sortValue = '';
        var sortColumnName = '';

        if (data.sortdatafield) {
            sortColumnName = GetSortColumnName(data.sortdatafield, columnVals);
        }

        if (data.groupscount > 0) {
            for (var i = 0; i < data.groupscount; i++) {
                var groupByColumnName = GetSortColumnName(eval("data.group" + i), columnVals);
                if (groupByColumnName != sortColumnName) {
                    sortValue += groupByColumnName + ',';
                }
            }
        }

        if (sortColumnName.length > 0) {
            sortValue += sortColumnName;
        }

        if (sortValue.length > 0 && sortValue.charAt(sortValue.length - 1) == ',') {
            sortValue = sortValue.substr(0, sortValue.length - 1);
        }

        return sortValue;
    }

    var resetPageNumber = function () {
        pagenum = 0;
    }

    function GetSortColumnName(sortColumnName, columnVals) {
        for (var i = 0; i < columnVals.length; i++) {
            var currentColumn = columnVals[i];
            if (currentColumn.datafield == sortColumnName) {
                return currentColumn.sourceDatafield ? currentColumn.sourceDatafield : currentColumn.datafield;
            }
        }
    }

    var setUrl = function (url) {
        source.url = url + 'Pager';
    };

    // Added this to make parameter passing easier to define.
    var create = function (params) {
        readyEvent = params.readyEvent;
        downLoadCompleteEvent = params.downLoadCompleteEvent;
        customGroupRenderer = params.customGroupRenderer;
        hasSubGrid = params.hasSubGrid;
        initSubGrid = params.initSubGrid;
        groupsDisplayColumns = params.groupsDisplayColumns;
        if (params.showStatusBar == true) {
            showstatusbar = true;
        }
        if (params.selectionmode) {
            selectionmode = params.selectionmode;
        }
        if (params.registerForRefresh != null) {
            registerForRefresh = params.registerForRefresh;
        }
        if (params.rowheight != null) {
            rowsheight = params.rowheight;
        }
        if (params.enablePaging != null) {
            enablePaging = params.enablePaging;
        }
        if (params.showaggregates != null) {
            showaggregates = params.showaggregates;
        }
        init(params.Url, params.gridId, params.dataFields, params.gridColumns, params.groups, params.width, params.sortColumn, params.sortDirection, params.addCustomFilterParameters, params.exportFile)
    };

    var resetGetRefineByFlag = function () {
        getValuesForRefineBy = true;
    };

    var init = function (dataUrl, gridId, datafields, gridColumns, groups, width, sortColumn, sortDirection, addCustomFilterParameters, exportFile) {

        control = $("#" + gridId);
        dataSourceUrl = dataUrl + 'Pager';
        exportFileName = exportFile;
        refineByBar = new refineBy(gridColumns, control, theme, updateBoundData);

        source = {
            type: "POST",
            datatype: "json",
            datafields: datafields,
            url: dataSourceUrl,
            sortcolumn: sortColumn,
            sortdirection: sortDirection,
            sort: function () {
                if (isPostBack === true) {
                    updateBoundData();
                }
                isPostBack = true;
            },
            formatdata: function (data) {

                // Create the parameters being passed to the page method
                var parameters = {};
                var exportSettings = {};

                if (enablePaging == true) {
                    parameters.PageNum = pagenum;
                    parameters.PageSize = data.pagesize;
                } else {
                    parameters.PageNum = -1;
                    parameters.PageSize = -1;
                }
                parameters.TotalRecords = 0;
                parameters.SortOrder = data.sortorder;
                parameters.SortColumn = GetSortColumnValue(data, gridColumns);
                parameters.CallWebService = callWebService;
                parameters.GetRefineByValues = getValuesForRefineBy;
                parameters = addRefineByValues(parameters);

                var exportable = control.jqxGrid('getexportable');

                // If we are exporting add export parameters;
                if (exportable == null || exportable == false) {
                    parameters.Export = null
                } else {
                    exportSettings.ExportType = control.jqxGrid('getexportmode');
                    exportSettings.FileName = control.jqxGrid('getexportfilename');
                    exportSettings.Columns = gridColumns;
                    parameters.Export = exportSettings;
                }

                if (addCustomFilterParameters) {
                    parameters = addCustomFilterParameters(parameters);
                }
                return JSON.stringify(parameters);
            },
            cache: false
        };

        // Sets up the data adaper, in this case it uses the specified source which
        // is a page method.
        dataAdapter = new $.jqx.dataAdapter(
            source, {
                contentType: 'application/json; charset=utf-8',
                downloadComplete: function (payload, textStatus, jqXHR) {

                    callWebService = false;
                    if (payload == null || payload.Data == null) {
                        return null;
                    }

                    totalrecords = payload.TotalRecords;

                    if (getValuesForRefineBy) {
                        refineByBar.show(payload.ColumnValues);
                    }

                    // If we got an exportId back from the server
                    // then we are exporting the data. 
                    if (payload.ExportId != null) {
                        control.jqxGrid('openExportedDocument', payload.ExportId);
                    }

                    // If we have a custom download complete event call it.
                    if (downLoadCompleteEvent) {
                        downLoadCompleteEvent(payload.Data);
                    }

                    // Only get the refineBy values on initial load,
                    // unless there isn't any data, then keep trying until there is data
                    if (payload.ColumnValues) {
                        getValuesForRefineBy = false;
                    }

                    control.jqxGrid('hideloadelement');

                    databinding = false;
                    return payload.Data;
                },
                loadError: function (xhr, status, error) {
                    control.jqxGrid('hideloadelement');
                    LogException(xhr.responseText);
                }
            });

        var self = this;

        function lastPage() {
            return Math.floor(totalrecords / pagesize);
        }

        function setPagerLabel() {
            var recordRange;
            if (totalrecords === 0) {
                recordRange = "0";
            } else {
                recordRange = 1 + pagenum * pagesize + "-" + Math.min(totalrecords, (pagenum + 1) * pagesize);
            }

            return self.label.text(recordRange + ' of ' + totalrecords);
        }

        function displayPage(value) {
            if (value < 0) {
                value = 0;
            }
            if (value > lastPage()) {
                value = lastPage()
            }
            if (value >= 0 & value <= lastPage()) {
                pagenum = value;
                updateBoundData();
            }
        }

        var pagerrenderer = function () {

            var element = $("<div style='margin:0 8px;'></div>");

            var firstButton = $("<div style='display:inline-block;'><div></div></div>");
            firstButton.find('div').addClass('jqx-icon-arrow-first-' + theme);
            firstButton.width(15);
            firstButton.jqxButton({ theme: theme });

            var leftButton = $("<div style='display:inline-block;'><div></div></div>");
            leftButton.find('div').addClass('jqx-icon-arrow-left-' + theme);
            leftButton.width(13);
            leftButton.jqxButton({ theme: theme });

            var gotolabel = $("<div style='display:inline-block;position:relative;top:-3px;margin-left:2px;vertical-align:middle;'>Go to page:</div>");

            var gotoPage = $("<input type='text' style='display:inline-block;position:relative;top:-3px;margin-right:4px;padding:0 3px;vertical-align:middle;' />");
            gotoPage.width(25);
            gotoPage.jqxInput({ theme: theme });
            gotoPage.val(pagenum + 1)

            var rightButton = $("<div style='display:inline-block;'><div></div></div>");
            rightButton.find('div').addClass('jqx-icon-arrow-right-' + theme);
            rightButton.width(13);
            rightButton.jqxButton({ theme: theme });

            var lastButton = $("<div style='display:inline-block'><div></div></div>");
            lastButton.find('div').addClass('jqx-icon-arrow-last-' + theme);
            lastButton.width(15);
            lastButton.jqxButton({ theme: theme });

            var pagerSource = [
                    "10",
                    "20",
                    "50"];
            var pageSizelabel = $("<div style='display:inline-block;position:relative;top:-2px;margin-left:20px;'>Page size:</div>");
            var pageSizeDropdown = $("<div style='display:inline-block;position:relative;top:3px;'></div>");
            pageSizeDropdown.jqxDropDownList({ source: pagerSource, selectedIndex: 0, width: '40px', height: '16px', autoDropDownHeight: true, theme: theme });
            var selectedItem = pageSizeDropdown.jqxDropDownList('getItemByValue', pagesize.toString());
            pageSizeDropdown.jqxDropDownList('selectItem', selectedItem);

            var label = $("<div class='pagerinfo' style='float:right;position:relative;top:6px;'></div>");
            self.label = label;
            setPagerLabel();

            firstButton.appendTo(element);
            leftButton.appendTo(element);
            gotolabel.appendTo(element);
            gotoPage.appendTo(element);
            rightButton.appendTo(element);
            lastButton.appendTo(element);
            pageSizelabel.appendTo(element);
            pageSizeDropdown.appendTo(element);
            label.appendTo(element);

            // 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);
                });
            }

            if (theme != '') {

                handleStates('mouseenter', rightButton, 'jqx-icon-arrow-right-hover-' + theme, true);
                handleStates('mouseleave', rightButton, 'jqx-icon-arrow-right-hover-' + theme, false);
                handleStates('mouseenter', leftButton, 'jqx-icon-arrow-left-hover-' + theme, true);
                handleStates('mouseleave', leftButton, 'jqx-icon-arrow-left-hover-' + theme, false);
                handleStates('mouseenter', lastButton, 'jqx-icon-arrow-last-hover-' + theme, true);
                handleStates('mouseleave', lastButton, 'jqx-icon-arrow-last-hover-' + theme, false);
                handleStates('mouseenter', firstButton, 'jqx-icon-arrow-first-hover-' + theme, true);
                handleStates('mouseleave', firstButton, 'jqx-icon-arrow-first-hover-' + theme, false);
            }

            rightButton.click(function () {
                var startRow = ((pagenum + 1) * pagesize) + 1;
                if (startRow <= totalrecords) {
                    pagenum = pagenum + 1;
                    updateBoundData();
                }
            });

            leftButton.click(function () {
                if ((pagenum - 1) >= 0) {
                    pagenum = pagenum - 1;
                    updateBoundData();
                }
            });

            lastButton.click(function () {
                var lastpage = lastPage();
                if (lastpage != pagenum) {
                    pagenum = lastpage;
                    updateBoundData();
                }
            });

            firstButton.click(function () {
                if (pagenum != 0) {
                    pagenum = 0;
                    updateBoundData();
                }
            });

            pageSizeDropdown.on('select', function (event) {

                // Get the first row num being displayed;
                var rowIndex = (pagesize * pagenum) + 1;
                pagesize = parseInt(event.args.item.value);

                // set the page to whatever the current rowindex would be located
                pagenum = Math.floor(rowIndex / pagesize);

                control.jqxGrid({ pagesize: pagesize });
                updateBoundData();
            });

            gotoPage.keypress(function (e) {
                if (e.keyCode == '13') {
                    e.preventDefault();
                }
            });

            gotoPage.keyup(function (event) {
                var code = (event.keyCode ? event.keyCode : event.which);
                if (code === 13) {
                    var value = this.value - 1;
                    displayPage(value);
                }
            });

            gotoPage.blur(function () {
                var value = this.value - 1;
                displayPage(value);
            });

            return element;
        };

        var groupsrenderer = function (text, group, expanded, data) {
            if (customGroupRenderer) {
                return customGroupRenderer(text, group, expanded, data);
            } else {
                var displayValue = '';
                // If user has supplied a list of display columns
                // use the array to substitute the values being displayed.
                if (groupsDisplayColumns) {
                    if (data.subGroups.length > 0) {
                        displayValue = data.subGroups[0].subItems[0][groupsDisplayColumns[data.level]];
                    } else {
                        displayValue = data.subItems[0][groupsDisplayColumns[data.level]];
                    }
                } else {
                    displayValue = group;
                }
                return "<div class=\"jqx-grid-groups-row jqx-grid-groups-row-ceo\" style=\"position: absolute;\"><span class=\"jqx-grid-groups-row-details jqx-grid-groups-row-details-ceo\">" + displayValue + "</span></div>";
            }
        };

        var settings = {
            rendergridrows: function (args) {
                return args.data;
            },
            columns: gridColumns,
            width: "100%",
            source: dataAdapter,
            pageable: enablePaging,
            pagerrenderer: pagerrenderer,
            sortable: true,
            virtualmode: false,
            theme: theme,
            //Customizations
            enabletooltips: true,
            altrows: true,
            showemptyrow: true,
            pagerheight: 1,
            showstatusbar: showstatusbar,
            //statusbarheight: 31,
            scrollbarsize: 15,
            showtoolbar: true,
            toolbarheight: 24,
            columnsmenu: false,
            columnsresize: false,
            autoheight: true,
            rowsheight: rowsheight,
            enablehover: true,
            enablemousewheel: true,
            enablebrowserselection: true,
            selectionmode: selectionmode,
            sorttogglestates: 1,
            showrowdetailscolumn: false,
            ready: readyEvent,
            showaggregates: showaggregates
        };

        // need to add these to the settings and pass all in at the same time,
        // otherwise the grid defaults then changes
        if (groups && groups.length > 0) {
            $.extend(settings, {
                groupable: true,
                groups: groups,
                groupsexpandedbydefault: true,
                showgroupsheader: false,
                groupindentwidth: 25,
                showgroupmenuitems: false,
                groupsrenderer: groupsrenderer
            });
        }

        //if there is a subgrid then add the initrowdetails settings
        if (hasSubGrid) {
            $.extend(settings, {
                rowdetails: true,
                initrowdetails: initSubGrid,
                rowdetailstemplate: { rowdetails: "<div style='padding-top:2px;border-top:1px solid #aaa'></div>", rowdetailshidden: true, rowdetailsheight: 130 }
            });
        }

        control.jqxGrid(settings);
        control.jqxGrid('exportInitialize', exportFileName);

        control.on('pagechanged', function (event) {
            self.label.text(getPagerLabel());
        });

        control.on("bindingcomplete", function (event) {
            control.jqxGrid('expandallgroups');
        });
    },
    updateGrid = function () {
        callWebService = true;
        updateBoundData();
    },
    updateBoundData = function () {
        databinding = true;
        control.jqxGrid('showloadelement');
        control.jqxGrid('updatebounddata');
    },
    refreshView = function () {
        callWebService = false;
        updateBoundData();
    },
    refresh = function () {
        // In case the user added a new counterparty 
        // we need to recall the web service.
        callWebService = true;
        setMaintainState(true);
        updateBoundData();
    };

    function refineBy(columns, dataGrid, theme, updateBoundData) {

        var filters = new Array();
        this.columns = columns;
        var refineByDiv;

        var getColumns = function () {
            var refineBy = new Array();
            for (var i = 0; i < columns.length; i++) {
                var currentColumn = columns[i];
                if (currentColumn.refineByType) {
                    var refineByType;
                    switch (currentColumn.refineByType) {
                        case 'text':
                            refineByType = 'MatchesExact';
                            break;
                        case 'daterange':
                        case 'range':
                            refineByType = 'InRange';
                            break;
                        default:
                            refineByType = 'MatchesList';
                    }

                    refineBy.push({
                        ColumnName: GetColumnName(currentColumn),
                        Type: refineByType
                    });
                }
            }

            return refineBy;
        };

        var getFilter = function () {
            var refineBy = new Array();
            for (var i = 0; i < filters.length; i++) {
                var currentFilter = filters[i];
                refineBy.push({
                    ColumnName: GetColumnName(currentFilter.column),
                    Type: currentFilter.filter.type,
                    Values: currentFilter.filter.val()
                });
            }

            return refineBy;
        };

        var areFiltersValid = function () {
            for (var i = 0; i < filters.length; i++) {
                var currentFilter = filters[i];
                if (currentFilter.filter.type == 'MatchesList' && currentFilter.filter.val().length == 0) {
                    alert("The Refine By column " + currentFilter.column.text + " doesn't have any values selected.  Please select at least one value and try again.");
                    return false;
                }
            }

            return true;
        };
        var show = function (initialValues) {
            if (initialValues) {
                if (refineByDiv) {
                    refineByDiv.empty();
                    filters.length = 0;
                }

                for (var i = 0; i < columns.length; i++) {
                    var currentColumn = columns[i];
                    var currentColumnName = GetColumnName(currentColumn);

                    if (currentColumn.refineByType) {
                        if (!refineByDiv) {
                            refineByDiv = CreateRefineBy(dataGrid);
                        }

                        var columnValue;
                        for (var j = 0; j < initialValues.length; j++) {
                            var currentInitialValues = initialValues[j];
                            if (currentColumnName == currentInitialValues.ColumnName) {
                                columnValue = currentInitialValues;
                                break;
                            }
                        }

                        var filter = CreateFilter(refineByDiv, currentColumn, i, theme, columnValue);
                        filters.push(filter);
                    }
                }

                if (refineByDiv) {
                    var buttonwrapper = AppendDiv(refineByDiv, "refinebybuttonwrapper");
                    var button = AppendDiv(buttonwrapper, "", "Apply");
                    button.jqxButton({ roundedCorners: 'none', theme: 'ceo-btn-Action', width: 60 });
                    button.bind('click', function () {
                        if (areFiltersValid()) {
                            // When refine by is changed reset to start of data.
                            pagenum = 0;
                            updateFilters();
                            refreshView();
                        }
                    });
                }
            }
        };

        return {
            getFilter: getFilter,
            show: show,
            getColumns: getColumns
        };
    };

    function GetColumnName(column) {
        return column.sourceDatafield ? column.sourceDatafield : column.datafield;
    }

    function CreateRefineBy(dataGrid) {
        var refineByDiv = $('<div class="refinebycontainer"/>').insertBefore(dataGrid);
        var header = AppendDiv(refineByDiv, 'refinebyheader closed', RefineByText);
        var content = AppendDiv(refineByDiv, 'refinebycontent', '');
        content.hide();
        header.click(function () {
            content.toggle();
            header.toggleClass('closed').toggleClass('open');
        });
        return content;
    }

    function AppendDiv(parent, style, text) {
        if (!text) text = '';
        style = (style) ? ' class="' + style + '"' : '';
        return $('<div' + style + '>' + text + '</div>').appendTo(parent);
    }

    function CreateFilter(refineByDiv, currentColumn, index, theme, columnValue) {

        filterDiv = AppendDiv(refineByDiv, "refinebyitemwrapper");
        filterheaderDiv = AppendDiv(filterDiv, "refinebyitemheader", currentColumn.text);
        filtercontentDiv = AppendDiv(filterDiv, "refinebyitem");
        var filter;
        switch (currentColumn.refineByType) {
            case 'text':
                filter = new ExactMatch(filtercontentDiv);
                break;
            case 'daterange':
                filter = new DateRange(filtercontentDiv, theme, columnValue.MinValue, columnValue.MaxValue);
                break;
            case 'range':
                filter = new NumericRange(filtercontentDiv, theme, columnValue.MinValue, columnValue.MaxValue);
                break;
            case 'checklist':
                filter = new CheckList(filtercontentDiv, theme, columnValue.DistinctValues);
                break;
            default:
                break;
        }

        if (maintainState && lastUpdatedFilter) {
            for (var i = 0; i < lastUpdatedFilter.length; i++) {
                if (lastUpdatedFilter[i].ColumnName == GetColumnName(currentColumn)) {
                    filter.val(lastUpdatedFilter[i].Values);
                    break;
                }
            }
        }

        return {
            column: currentColumn,
            filter: filter
        };
    }

    function DateRange(div, theme, min, max) {

        var minDate = new Date(min);
        var maxDate = new Date(max);
        var fromDiv = AppendDiv(div, "", "");
        var from = fromDiv.jqxDateTimeInput({ width: '100px', height: '20px', theme: theme, formatString: 'MM/dd/yyyy', minDate: minDate, maxDate: maxDate, value: minDate });
        AppendDiv(div, "", "to");
        var toDiv = AppendDiv(div, "", "");
        var to = toDiv.jqxDateTimeInput({ width: '100px', height: '20px', theme: theme, formatString: 'MM/dd/yyyy', minDate: minDate, maxDate: maxDate, value: maxDate });

        var value = function (newValue) {
            if (newValue && newValue.length == 2) {
                from.val(newValue[0]);
                to.val(newValue[1]);
            } else {
                var toDate = new Date(to.val());
                // change the from date to have a time of 11:59:59.999 instead of 00:00:00.000, otherwise dates on the same day as the from date won't match correctly
                return [from.val(), new Date(toDate.getFullYear(), toDate.getMonth(), toDate.getDate(), 23, 59, 59, 999)];
            }
        };

        return {
            type: 'InRange',
            val: value
        }
    }

    function NumericRange(div, theme, min, max) {

        var fromDiv = AppendDiv(div, "", "");
        var from = new NumberInput(fromDiv, min);
        AppendDiv(div, "", "to");
        var toDiv = AppendDiv(div, "", "");
        var to = new NumberInput(toDiv, max);

        var value = function (newValue) {
            if (newValue && newValue.length == 2) {
                from.val(newValue[0]);
                to.val(newValue[1]);
            } else {
                return [from.val(), to.val()];
            }
        };

        var isValid = function () {
            var fromValue = parseFloat(from.val());
            var toValue = parseFloat(to.val());

            return fromValue != "NaN" && toValue != "NaN" && fromValue <= toValue;
        };

        return {
            type: 'InRange',
            val: value,
            isValid: isValid
        };
    }

    function CheckList(div, theme, values) {

        var checkListDiv = AppendDiv(div, "", "");
        checkListDiv.jqxListBox({ source: values, checkboxes: true, height: 75, itemHeight: -1, autoItemsHeight: true, theme: theme, displayMember: 'DisplayText', valueMember: 'Value', scrollBarSize: 8 });
        checkListDiv.jqxListBox('checkAll');

        var value = function (newValue) {
            if (newValue) {
                checkListDiv.jqxListBox('uncheckAll');
                for (var i = 0; i < newValue.length; i++) {
                    var item = checkListDiv.jqxListBox('getItemByValue', newValue[i]);
                    checkListDiv.jqxListBox('checkItem', item);
                }
            } else {
                var results = new Array();

                var items = checkListDiv.jqxListBox('getCheckedItems');
                $.each(items, function (index) {
                    results.push(this.value)
                });

                return results;
            }
        };

        return {
            type: 'MatchesList',
            val: value
        };
    }

    function ExactMatch(div) {

        div.append('<input type="text"style="width:125px;" />');
        var input = div.find('input');

        var value = function (newValue) {
            if (newValue) {
                input.val(newValue[0]);
            } else {
                return [input.val()];
            }
        };

        return {
            val: value,
            type: 'MatchesExact'
        };
    }

    function NumberInput(div, value) {

        var displayInput = $('<input type="text" class="numberinput" value="' + $.jqx.dataFormat.formatnumber(value, 'f') + '" \/>').appendTo(div);
        var valueInput = $('<input type="hidden" value="' + value + '" \/>').appendTo(div);
        displayInput.blur(function (event) {
            var newValue = displayInput.val();
            if (!isNaN(newValue)) {
                valueInput.val(newValue);
                displayInput.val($.jqx.dataFormat.formatnumber(displayInput.val(), 'f'));
            } else {
                event.preventDefault();
            }
        });
        displayInput.focus(function (event) {
            var newValue = parseFloat(valueInput.val());
            if (!isNaN(newValue)) {
                displayInput.val(newValue);
            }
        });
        displayInput.keypress(function (event) {
            // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
            // We don't support the del key in Opera because del == . == 46.
            var controlKeys = [8, 9, 13, 45, 46, 110, 190];
            // IE doesn't support indexOf
            var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
            // Some browsers just don't raise events for control keys. Easy.
            // e.g. Safari backspace.
            if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
                (49 <= event.which && event.which <= 57) || // Always 1 through 9
                (97 <= event.which && event.which <= 105) || // Always 1 through 9 from number section 
                (48 == event.which && $(this).attr("value")) || // No 0 first digit
                (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
                isControlKey) { // Opera assigns values for control keys.
                return;
            } else {
                event.preventDefault();
            }
        });

        var val = function (newValue) {
            if (newValue) {
                valueInput.val(newValue);
            } else {
                return valueInput.val();
            }
        };

        return {
            val: val
        };
    };

    return {
        init: init,
        create: create,
        updateBoundData: updateGrid,
        refreshView: refreshView,
        resetGetRefineByFlag: resetGetRefineByFlag,
        setMaintainState: setMaintainState,
        setUrl: setUrl,
        resetPageNumber: resetPageNumber,
        refresh: refresh,
        databinding: databinding
    };
};

[Peter StoevKeymaster]

Hi jqaris,

Our Grid does not support Grouping in Server Mode. It supports Grouping in Client mode only and there are no changes here. The Grouping demos demonstrate that the widget works in the scenario it is developed to work. If you experience some kind of issue, then prepare a sample in http://jsfiddle.net/ and share a link to it which demonstrates an issue which is on our side. I hope that this is possible for you. Otherwise, you can continue using the version which works in your app scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jgarisParticipant]

Hi Peter,

Thank you for responding. We are not doing server side grouping. We are doing server paging, and then grouping on the client side. And it has been working with 3.0.2 and 3.0.4 using the same code above to initialize the grid. I am trying to compare the file changes between 3.0.4 to 3.1.0, but it is very difficult due to the minification. I can swap out the jqwidgets versions without making any other modifications and see exactly which version it is breaking on.

I will continue to investigate the issue, and let you know what I find.

Sincerely,
Jordan Garis

[Peter StoevKeymaster]

Hi jgaris,

Sorry, we can’t test your code because we can’t even run it locally as it is just part of something else. If you wish someone from our team to test your scenario, prepare a sample in http://jsfiddle.net/ and share it. I don’t suggest you to investigate, compare, modify files. Leave that to us, just share the sample as I requested.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jgarisParticipant]

Hi Peter,

We figured out the problem… it looks like in 3.1.0, you changed how the grid handles updatebounddata. In our custom pager we were not passing any parameters, and after the change in 3.1.0, this was resetting the grouping and sorting. We updated our code to pass the additional parameters to updateBoundData(“pagechanged”), and that fixed it, leaving the grouping and sorting in tact.

I hope that helps anybody else who may come across this!

Sincerely,
Jordan Garis

[Author]

Posts