jQWidgets Forums

Tagged: datagrid angularjs, jquery angularjs, jqwidgets angularjs

This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 5 months ago.

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

Author

Reloading jqx-grid with Angularjs in v3.6.0 Posts

December 9, 2014 at 9:25 am Reloading jqx-grid with Angularjs in v3.6.0 #63946

Tyl

Participant

Hi Peter,

I switched to v3.6.0 to get rid of memory leak bug in charts and after that I now have an infinite loop when I reload data in my jqx-grid.
It worked perfectly with jqwidgets v3.5.0.

Let me explain the problem:
I initialize a jqx-grid with local data, there is no issue there, the data is displayed correctly and there is no errors in the console.
I have a ‘Refresh’ button that generate new data and update the grid.
The update is done but I have the following errors in the console:
(the problem occurs when you click the Refresh button)

Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.27/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…Ck%2B%2B)%3Breturn%20k%7D%3B%20newVal%3A%2092%3B%20oldVal%3A%2087%22%5D%5D
at Error (native)
at http://localhost:8181/AngularADE/tests/jqw3.6.0-grid/angular/angular.min.js:6:450
at h.$digest (http://localhost:8181/AngularADE/tests/jqw3.6.0-grid/angular/angular.min.js:111:232)
at h.$apply (http://localhost:8181/AngularADE/tests/jqw3.6.0-grid/angular/angular.min.js:113:362)
at HTMLSpanElement.<anonymous> (http://localhost:8181/AngularADE/tests/jqw3.6.0-grid/angular/angular.min.js:195:229)
at http://localhost:8181/AngularADE/tests/jqw3.6.0-grid/angular/angular.min.js:31:225
at r (http://localhost:8181/AngularADE/tests/jqw3.6.0-grid/angular/angular.min.js:7:290)
at HTMLSpanElement.c (http://localhost:8181/AngularADE/tests/jqw3.6.0-grid/angular/angular.min.js:31:207)
angular.js:36 Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.27/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…Ck%2B%2B)%3Breturn%20k%7D%3B%20newVal%3A%2092%3B%20oldVal%3A%2087%22%5D%5D

I have made a little sample that causes the problem so that you can reproduce it (on chrome or firefox, I didn’t try IE)

HTML:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="ade">
  <head>
    <meta charset="utf-8">
    <title>jqx-grid test v3.6.0</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- angularjs libraries -->
    <script src="angular/angular.min.js" type="text/javascript"></script>
    <script src="angular/angular-route.min.js" type="text/javascript"></script>
    <script src="angular/angular-animate.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>

    <!-- jqwidgets library -->
    <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/jqxdraw.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.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/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsreorder.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/jqxangular.js"></script>

    <!-- jqwidgets styling -->
    <link rel="stylesheet" type="text/css" href="jqwidgets/styles/jqx.base.css" />

    <!-- application scripts -->
    <!-- main -->
	  <script src="test.js"></script>

  </head>

  <body ng-controller="MainCtrl">

    <span style="cursor: pointer;" ng-click="doRefresh()">REFRESH</span>
    <div>
      <jqx-grid jqx-create="createGrid" jqx-settings="gridSettings"></jqx-grid>
    </div>

  </body>
</html>

JAVASCRIPT:

var ade_app = angular.module("ade", ["jqwidgets"]);

// main controller
ade_app.controller('MainCtrl', function ($scope, $rootScope, $locale, $location, $http) {

  $scope.createGrid = false;

  // grid settings
  $scope.gridSettings =
  {
    width: "100%",
    columns: [
        { text: 'NAME', datafield: 'Name', width: 400},
        { text: 'PATH', datafield: 'Path', resizable: false}
    ],
  };

  var generate_data_1 = function() {
    var data_1 =
    [
      {ID:1, Name:"All", Path:"/"},
      {ID:2, Name:"Sources", Path:"/dev/src"},
      {ID:3, Name:"Images", Path:"/usr/images"},
    ];
    return data_1;
  };
  var generate_data_2 = function() {
    var data_2 =
    [
      {ID:1, Name:"All", Path:"/"},
      {ID:5, Name:"3D", Path:"/usr/3d"},
    ];
    return data_2;
  };

  var fullRefresh = function() {
    $scope.predefinedPaths = generate_data_1();
    gridRefresh();
    if ($scope.createGrid == false)
      $scope.createGrid = true;
  };
  var fullRefresh2 = function() {
    $scope.predefinedPaths = generate_data_2();
    gridRefresh();
  };

  // grid refresh
  var gridRefresh = function () {
    $scope.source = {
      datatype: 'json',
      localdata: $scope.predefinedPaths,
      id: 'ID',
      datafields: [
        { name: 'Name', type: 'string'},
        { name: 'Path', type: 'string'},
      ]
    };
    $scope.dataAdapter = new $.jqx.dataAdapter($scope.source);
    $scope.gridSettings.source = $scope.dataAdapter;
  };

  fullRefresh();

  $scope.doRefresh = function() {
    fullRefresh2();
  };
});

December 9, 2014 at 10:36 am Reloading jqx-grid with Angularjs in v3.6.0 #63952

Tyl

Participant

Perhaps I am doing things wrong with this new v3.6.0 version.
If this is the case, please tell me how to do.

December 9, 2014 at 3:33 pm Reloading jqx-grid with Angularjs in v3.6.0 #63962

Peter Stoev

Keymaster

Hello Tyl,

The Grid’s source should be set during the initialization of the Settings object.

Best Regards,
Peter Stoev

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

December 9, 2014 at 4:05 pm Reloading jqx-grid with Angularjs in v3.6.0 #63964

Tyl

Participant

Thanks Peter,

I’ve just tried that but the same error occurs.
I now set data and initialize the grid source in the setting object.
The grid displayd well and without any error in console.
But when I click on my ‘Refresh’ button, the infinite loop error appears in the console.

The code is simple though, what do I do wrong ?

My new javascript code:

var ade_app = angular.module("ade", ["jqwidgets"]);

// main controller
ade_app.controller('MainCtrl', function ($scope, $rootScope, $locale, $location, $http) {

  $scope.createGrid = false;

  // data generators
  var generate_data_1 = function() {
    var data_1 =
    [
      {ID:1, Name:"All", Path:"/"},
      {ID:2, Name:"Sources", Path:"/dev/src"},
      {ID:3, Name:"Images", Path:"/usr/images"},
    ];
    return data_1;
  };
  var generate_data_2 = function() {
    var data_2 =
    [
      {ID:1, Name:"All", Path:"/"},
      {ID:5, Name:"3D", Path:"/usr/3d"},
    ];
    return data_2;
  };

  // data
  $scope.predefinedPaths = generate_data_1();
  $scope.source = {
    datatype: 'json',
    localdata: $scope.predefinedPaths,
    id: 'ID',
    datafields: [
      { name: 'Name', type: 'string'},
      { name: 'Path', type: 'string'},
    ]
  };
  $scope.dataAdapter = new $.jqx.dataAdapter($scope.source);

  // grid settings
  $scope.gridSettings =
  {
    source: $scope.dataAdapter,
    width: "100%",
    columns: [
        { text: 'NAME', datafield: 'Name', width: 400},
        { text: 'PATH', datafield: 'Path', resizable: false}
    ],
  };

  $scope.createGrid = true;

  $scope.doRefresh = function() {
    $scope.predefinedPaths = generate_data_2();
    $scope.source.localdata = $scope.predefinedPaths;
    $scope.dataAdapter = new $.jqx.dataAdapter($scope.source);
    $scope.gridSettings.source = $scope.dataAdapter;
  };
});

December 10, 2014 at 7:42 am Reloading jqx-grid with Angularjs in v3.6.0 #63997

Tyl

Participant

Hi,

This problem is easy to reproduce, did you reproduce it ?
I’d really like to have an answer (either a fix or a workaround) because I need to know if I can use jqwidgets in the project I work on.

If there is still something wrong in the way I use the jqx-grid, please tell me.
Thank you

December 10, 2014 at 8:27 am Reloading jqx-grid with Angularjs in v3.6.0 #64004

Tyl

Participant

What I would like actually is be able to automatically bind my local data array ($scope.predefinedPaths) with the grid.
It means that all the modifications made in $scope.predefinedPaths would automatically be reflected in the grid.

December 10, 2014 at 12:13 pm Reloading jqx-grid with Angularjs in v3.6.0 #64031

Tyl

Participant

Can I have an answer please ..?

December 16, 2014 at 8:48 am Reloading jqx-grid with Angularjs in v3.6.0 #64242

Peter Stoev

Keymaster

Hi Tyi,

You can find a working sample below:

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <title id='Description'>This example shows the set the cells and columns alignment.
    </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="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);  
        demoApp.controller("demoController", function ($scope) {
            $scope.createGrid = false;

            // data generators
            var generate_data_1 = function () {
                var data_1 =
                [
                  { ID: 1, Name: "All", Path: "/" },
                  { ID: 2, Name: "Sources", Path: "/dev/src" },
                  { ID: 3, Name: "Images", Path: "/usr/images" },
                ];
                return data_1;
            };
            var generate_data_2 = function () {
                var data_2 =
                [
                  { ID: 1, Name: "All", Path: "/" },
                  { ID: 5, Name: "3D", Path: "/usr/3d" },
                ];
                return data_2;
            };

            // data
            $scope.predefinedPaths = generate_data_1();
            $scope.source = {
                datatype: 'json',
                localdata: $scope.predefinedPaths,
                id: 'ID',
                datafields: [
                  { name: 'Name', type: 'string' },
                  { name: 'Path', type: 'string' },
                ]
            };
      
            // grid settings
            $scope.gridSettings =
            {
                source: $scope.source,
                width: "100%",
                columns: [
                    { text: 'NAME', datafield: 'Name', width: 400 },
                    { text: 'PATH', datafield: 'Path', resizable: false }
                ],
            };

            $scope.createGrid = true;

            $scope.doRefresh = function () {
                $scope.predefinedPaths = generate_data_2();
                $scope.source.localdata = $scope.predefinedPaths;
            };
        });
    </script>
</head>
 <body ng-controller="demoController">
     <jqx-grid jqx-create="createGrid" jqx-settings="gridSettings"></jqx-grid>
 <span style="cursor: pointer;" ng-click="doRefresh()">REFRESH</span>
   </body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.