Custom Sort isn't working

[martypheeMember]

It was working before upgrading to 1.6. I’m using Backbone.js. The sort works on the screen, but my custom function isn’t called anymore.


customsortfunc:function (column, direction) {
this.options.collection.fetch({data:{articlePath:articlePath, startindex:0, endindex:10, column:column, direction:(direction == null ? true : direction)}});
},

initialize:function () {
_.extend(this, Backbone.Events);
var self = this;
self.source.data = this.options.collection.toJSON();
self.source.totalrecords = articleCount;
self.config = {
width:580,
autoheight:true,
source: self.source,
theme:theme,
pageable:true,
virtualmode:true,
sortable:true,
altrows:true,
sort:_.bind(self.customsortfunc, self),
rendergridrows:_.bind(self.rendergridrows, self),
columns:[
{ text:'Id', datafield:'id', width:0, hidden:true },
{ text:'Name', datafield:'contentName', width:160 },
{ text:'Category', datafield:'category', width:100 },
// { text: 'Tags', datafield: 'tags', width: 90},
{ text:'Pub Date', datafield:'publishDate', width:135, columntype:'date', cellsformat:"d", cellsrenderer:_.bind(self.dateRender, self) },
{ text:'Exp Date', datafield:'expiredDate', width:135, columntype:'date', cellsformat:"d", cellsrenderer:_.bind(self.dateRender, self) },
{ text:'Priority', datafield:'priority', width:50, cellsalign:'right'}
]
};
$("#jqxgrid").jqxGrid(self.config);
// todo: change these to use the dispatcher
this.options.collection.bind('reset', self.render, self);
// this.options.collection.bind('add', self.render, self);
this.options.collection.bind('change', self.updateRow, self);
dispatcher.on('ArticleCollection:row-added', this.render, this);
}


[Peter StoevKeymaster]

Hi martyphee,

I don’t see in your code where you set the source object’s sort property to point to the custom sorting function.

The following code is working on my side and the customsortfunc is called when the Grid’s sortby function is called either by clicking a Column header or through the API:

           var customsortfunc = function (column, direction) {
                var sortdata = new Array();
                if (direction == 'ascending') direction = true;
                if (direction == 'descending') direction = false;
                if (direction != null) {
                    for (i = 0; i < data.length; i++) {
                        sortdata.push(data[i]);
                    }
                }
                else sortdata = data;
                var tmpToString = Object.prototype.toString;
                Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] };
                if (direction != null) {
                    sortdata.sort(compare);
                    if (!direction) {
                        sortdata.reverse();
                    }
                }
                source.localdata = sortdata;
                $("#jqxgrid").jqxGrid('databind', source);
                Object.prototype.toString = tmpToString;
            }
            // custom comparer.
            var compare = function (value1, value2) {
                value1 = String(value1).toLowerCase();
                value2 = String(value2).toLowerCase();
                try {
                    var tmpvalue1 = parseFloat(value1);
                    if (isNaN(tmpvalue1)) {
                        if (value1 < value2) { return -1; }
                        if (value1 > value2) { return 1; }
                    }
                    else {
                        var tmpvalue2 = parseFloat(value2);
                        if (tmpvalue1 < tmpvalue2) { return -1; }
                        if (tmpvalue1 > tmpvalue2) { return 1; }
                    }
                }
                catch (error) {
                    var er = error;
                }
                return 0;
            };
            var source =
            {
                localdata: data,
                sort: customsortfunc,
                datatype: "array"
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                sortable: true,
                pageable: true,
                autoheight: true,
                ready: function () {
                    $("#jqxgrid").jqxGrid('sortby', 'firstname', 'asc');
                },
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[martypheeMember]

Oh, I see that the custom sort moved to the source object and not the config….

I had above:

altrows:true,
sort:_.bind(self.customsortfunc, self),
rendergridrows:_.bind(self.rendergridrows, self),
columns:[….

Which was part of the config object.

[Author]

Posts