jQuery UI Widgets › Forums › Grid › Passive Event Listener

Tagged: , , , , , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Passive Event Listener Posts
  • December 21, 2016 at 9:46 am Passive Event Listener #90019

    ashvani18
    Participant

    Hi,

    We are using jqxGrid with Angular 1, In JqxGrid, when we scroll the horizontal bar of grid , we get the below warning –

    ‘Consider marking event handler as ‘passive’ to make the page more responive’ from jqxGrid.js, and then we get the error ‘could not invoke on undefined’ from jqxangular.js.

    After this , all the updates (gridSettings.jqxGrid(‘beginupdate’), gridSettings.jqxGrid(‘updatebounddata’,’cells’)) to grid throw same error , mostly all function whereever we update the grid data or layout.

    we are using jqxWidgets v4.1.0

    Thanks,
    Ashvani

    December 21, 2016 at 1:42 pm Passive Event Listener #90022

    Dimitar
    Participant

    Hi Ashvani,

    We do not experience such an issue with the latest version of jQWidgets (4.4.0) when we run the following example (based on the AngularJS demo Grid Binding to JSON):

    <!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.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="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope, $http) {
            $scope.createWidget = false;
            $http({
                method: 'get',
                url: '../../sampledata/beverages.txt'
            }).success(function (data, status) {
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'name', type: 'string' },
                        { name: 'type', type: 'string' },
                        { name: 'calories', type: 'int' },
                        { name: 'totalfat', type: 'string' },
                        { name: 'protein', type: 'string' }
                    ],
                    id: 'id',
                    localdata: data
                };

                var dataAdapter = new $.jqx.dataAdapter(source);

                $scope.gridSettings =
                {
                    width: 850,
                    autoheight: true,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [
                      { text: 'Name', datafield: 'name', width: 250 },
                      { text: 'Beverage Type', datafield: 'type', width: 250 },
                      { text: 'Calories', datafield: 'calories', width: 180 },
                      { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                      { text: 'Protein', datafield: 'protein', minwidth: 120 }
                    ]
                };

                // now create the widget.
                $scope.createWidget = true;
            }).error(function (data, status) {
                // Some error occurred
            });
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-grid jqx-create="createWidget" jqx-settings="gridSettings"></jqx-grid>
    </div>
</body>
</html>

    We tested with Chrome, Firefox and Internet Explorer 11.

    Please update your jQWidgets files. If the issue persists, please share an example (preferably in jsEditor) we can test to reproduce the errors thrown on your side.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.