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

Tagged: , , , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    jqxGrid – Custom sorting on knockout observableArray Posts
  • May 16, 2016 at 6:07 pm jqxGrid – Custom sorting on knockout observableArray #84398

    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%'
}]
    May 19, 2016 at 6:24 am jqxGrid – Custom sorting on knockout observableArray #84471

    BobbyBob
    Participant

    Hi again,

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

    May 19, 2016 at 7:22 am jqxGrid – Custom sorting on knockout observableArray #84475

    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/

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

You must be logged in to reply to this topic.