jQWidgets Forums

Tagged: angular grid, bindgcomplete, bootstrap grid, customsort, javascript grid, jquery grid, jqwidgets grid, jqxgrid

This topic contains 3 replies, has 3 voices, and was last updated by Hristo 9 years, 6 months ago.

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

Author

jqx-grid: customsort demo and bindingcomplete Posts

December 8, 2015 at 6:32 am jqx-grid: customsort demo and bindingcomplete #79036

badera

Participant

There is once more an issue with bindingcomplete (I already reported two or three of them earlier).
If we port your grid ‘customsort’ demo to angular and insert an empty ‘bindingcomplete’ event function, the sorting works but the displayed state in the column header (the arrow symbol) is very strange. Can you look at that?


<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxGrid Binding to JSON using AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css"/>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <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/jqx-all.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope, $http) {
            $scope.createWidget = false;
            var data = generatedata(100);

            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;
                $scope.gridSettings.apply('updatebounddata', 'sort');
                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,
                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' }
                        ],
                datatype: "array"
            };

            $scope.gridSettings =
            {
                width: 850,
                height: 600,
                source: source,
                sortable: true,
                pageable: true,
                columnsmenu: false,
                autoheight: false,
                autoheight: true,
                columns: [
                    {text: 'First Name', datafield: 'firstname', width: 200},
                    {text: 'Last Name', datafield: 'lastname', width: 200},
                    {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'}
                ],

                bindingcomplete: function(event) { }, // <<<----- Without this, all is OK....
            };

            // now create the widget.
            $scope.createWidget = true;
        });
    </script>
</head>
<body>
<div ng-controller="demoController">
    <jqx-grid jqx-create="createWidget" jqx-settings="gridSettings"></jqx-grid>
</div>
</body>
</html>

Thank you in advance for fixing this! Best regards,
– badera

December 10, 2015 at 6:54 am jqx-grid: customsort demo and bindingcomplete #79156

Hristo

Participant

Hello badera,

You have a missing to set source: dataAdapter,.
With var dataAdapter = new $.jqx.dataAdapter(source);.


<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxGrid Binding to JSON using AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css"/>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <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/jqx-all.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope, $http) {
            $scope.createWidget = false;
            var data = generatedata(100);

            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;
                $scope.gridSettings.apply('updatebounddata', 'sort');
                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,
                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' }
                        ],
                datatype: "array"
            };
			
			var dataAdapter = new $.jqx.dataAdapter(source);

            $scope.gridSettings =
            {
                width: 850,
                height: 600,
                source: dataAdapter,
                sortable: true,
                pageable: true,
                columnsmenu: false,
                autoheight: false,
                autoheight: true,
                columns: [
                    {text: 'First Name', datafield: 'firstname', width: 200},
                    {text: 'Last Name', datafield: 'lastname', width: 200},
                    {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'}
                ],

                bindingcomplete: function(event) { }, // <<<----- Without this, all is OK....
            };

            // now create the widget.
            $scope.createWidget = true;
        });
    </script>
</head>
<body>
<div ng-controller="demoController">
    <jqx-grid jqx-create="createWidget" jqx-settings="gridSettings"></jqx-grid>
</div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

December 10, 2015 at 7:36 am jqx-grid: customsort demo and bindingcomplete #79160

jqxfriend

Participant

Dear Hristo. Thank you very much! This solves the problem.
Well, the problem is that there are actually some angular demos on your page doing exactly what I have done! So I learn to create always a dataAdapter…

Can you explain, what exactly the difference is and why it halfway works? I thought that jqx-grid will create internal always a dataAdapter for the source…

December 10, 2015 at 8:04 am jqx-grid: customsort demo and bindingcomplete #79166

Hristo

Participant

Hello jqxfriend,

We do not have such demo about jqxGrid with partial ‘source’.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.