jQuery UI Widgets Forums Grid jqxGrid – Custom sorting on knockout observableArray

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 8 years ago.

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

  • BobbyBob
    Participant

    Hi,

    does anybody know how to get custom sorting on jqxGrid working with knockout observable arrays? When I try with a regular array, custom sorting works fine. But when I try with knockout observablearray, i just get errors like ‘Uncaught TypeError: Cannot convert object to primitive value’. This hits on my sortdata.sort(). But when I take a regular array, it works fine. It also works fine when I dont use custom sorting, but just the sorting that is standard for jqxgrid. Any tips? I just cannot get it to work…

        var GridModel = function() {
                    var self = this;
                    self.cases= ko.observableArray();
                    var tempArray = [];
                    var t = [];
                    ajax.getJSON(urloptions.caseUrl)
                        .done(function(result) {
                            _(result)
                                .each(function(case) {
                                    tempArray.push(new CaseViewModel(case));
                                });                   
                        }).done(function() {
                        self.cases(tempArray);
                        });
                };
        
                var model = new GridModel();
    
        var customsortfunc = function (column, direction) {
                    console.log("Do i even go in here?" + column);
                    var sortdata = new Array();
                    if (direction === 'ascending' || direction === 'asc') direction = true;
                    if (direction === 'descending' || direction === 'desc') direction = false;
                    for (var j = 0; j < source.localdata.length; j++) {
                        sortdata.push(source.localdata[j]);
                    }
                    var tmpToString = Object.prototype.toString;
                    Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] };
                        if (column === 'casenumber') {
                            sortdata.sort();
                        }
                        if (!direction) {
                            sortdata.reverse();
                        }
                    source.localdata = sortdata;
        
                    $("#jqxgrid").jqxGrid('updatebounddata', 'sort'); 
                    Object.prototype.toString = tmpToString;
                }
    
        var source =
                {
                    localdata: model.cases,
                    datatype: "observablearray",
                    datafields:
                    [
                        { name: 'casenumber', type: 'string' }
                    ],
                    sort: customsortfunc,            
                    sortcolumn: 'casenumber',
                    sortdirection: 'desc'
                };
        
                var dataAdapter = new $.jqx.dataAdapter(source);
    
        $("#jqxgrid").jqxGrid(
                {
                    width: '100%',
                    showdefaultloadelement: true,
                    height: $(window).innerHeight() - 440,
                    sortable: true,
                    altrows: true,
                    source: dataAdapter,
                    pagesize: 50,
                    columnsresize: true,
                    groupable: true,
                    columnsreorder: true,
                    filterable: true,
                    pageable: true,
                    pagerrenderer: pagerrenderer,
                    editable: true,
                    autoshowfiltericon: true,
                    columns: [
                        {
                            text: 'CaseNumber', datafield: 'casenumber', sortable: true, editable: false, width: '5%'
    }]

    BobbyBob
    Participant

    Hi again,

    Is there anybody that know of a solution for custom sort functionality with knockout observablearray?


    Dimitar
    Participant

    Hi BobbyBob,

    Please consider using our own $.jqx.observableArray. Here is a working example bound to this type of array with custom sorting:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../sampledata/generatedata.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                var array = generatedata(2);
    
                var observableArray = new $.jqx.observableArray(array);
    
                var customsortfunc = function (column, direction) {
                    var sortdata = new Array();
                    if (direction == 'ascending') direction = true;
                    if (direction == 'descending') direction = false;
                    for (i = 0; i < observableArray.length; i++) {
                        sortdata.push(observableArray[i]);
                    }
                    var tmpToString = Object.prototype.toString;
                    Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] };
                    if (direction != null) {
                        sortdata.sort();
                        if (!direction) {
                            sortdata.reverse();
                        }
                    }
                    source.localdata = new $.jqx.observableArray(sortdata);
                    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                    Object.prototype.toString = tmpToString;
                }
    
                var source =
                {
                    localdata: observableArray,
                    datatype: "obserableArray",
                    sort: customsortfunc,
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ]
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    height: 150,
                    source: dataAdapter,
                    sortable: true,
                    columnsresize: true,
                    editable: true,
                    selectionmode: "multiplecellsadvanced",
                    columns: [
                      { text: 'Name', datafield: 'firstname', width: 120 },
                      { text: 'Last Name', datafield: 'lastname', width: 120 },
                      { 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>
    </head>
    <body class='default'>
        <div id="jqxgrid"></div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.