jQuery UI Widgets Forums Grid Custom Sort isn't working

This topic contains 2 replies, has 2 voices, and was last updated by  martyphee 12 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Custom Sort isn't working #2193

    martyphee
    Member

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

    Custom Sort isn't working #2195

    Peter Stoev
    Keymaster

    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

    Custom Sort isn't working #2201

    martyphee
    Member

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.