jQWidgets Forums

Tagged: Angular, jqx grid, ui-route

This topic contains 8 replies, has 4 voices, and was last updated by Peter Stoev 9 years, 7 months ago.

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

Author

grid does not work with ui router! Posts
April 30, 2015 at 5:25 am grid does not work with ui router! #70467
n1ma
Blocked
Hey There
Result of the following code is an empty page, but firebug shows that data from this url ‘/Person/GetListData’ fetched.

returned data:
[{“Id”:1,”FirstName”:”a”,”LastName”:”aa”},{“Id”:2,”FirstName”:”b”,”LastName”:”bb”},{“Id”:3,”FirstName”:”c”,”LastName”:”cc”}]

app.js
```
var app = angular
    .module("app", ["ui.router", "jqwidgets"])
    .config(function ($stateProvider, $urlRouterProvider) {
        app.stateProvider = $stateProvider;
    })
    .run(function ($http) {

        $http({
            method: 'POST',
            url: '/Config/GetRoutes'
        }).success(function (data, status) {

            for (i in data.routes) {

                app.stateProvider.state(data.routes[i].name, {
                    url: "/" + data.routes[i].name,
                    templateUrl: data.routes[i].url,
                    controller: 'sectionController'
                });
            }
        });

    })
;

app.controller('sectionController', function ($scope, $http) {
  
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'Id', type: 'int' },
            { name: 'FirstName', type: 'string' },
            { name: 'LastName', type: 'string' }
        ],
        id: 'id',
        type: 'POST',
        url: '/Person/GetListData'
    };

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

    $scope.gridSettings =
    {
        width: 850,
        source: dataAdapter,
        columnsresize: true,
        columns: [
            { text: 'FirstName', datafield: 'FirstName', width: '10%' },
            { text: 'LastName', datafield: 'LastName', width: '10%' }
        ]
    };
});
```
view.html
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/Scripts/jqwidgets/styles/jqx.orange.css" type="text/css" />
</head>
<body ng-app="app">

    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-ui-router.min.js"></script>

    <script type="text/javascript" src="/Scripts/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxcheckbox.js"></script>

    <script src="/Scripts/app.js"></script>
     
    <div id="content">
        <section ui-view></section>
    </div>
</body>
</html>
```
template:
<jqx-grid jqx-settings="gridSettings"></jqx-grid>
April 30, 2015 at 6:11 am grid does not work with ui router! #70476

Peter Stoev
Keymaster

Hi n1ma,

jQWidgets requires reference to jQuery Framework. Where is this reference in your code?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 30, 2015 at 7:01 am grid does not work with ui router! #70484

n1ma
Blocked

hi Peter

Th original code has reference to jquery 2.1.3. We used an asp.net mvc helper for referencing javascripts but they are replaced for this post

I copied this from Firebug net tab

GET Person

200 OK

localhost:1504

1.7 KB

[::1]:1504

7ms
GET site.css

200 OK

localhost:1504

237 B

[::1]:1504

1ms
GET jqx.base.css

200 OK

localhost:1504

25.5 KB

[::1]:1504

12ms
GET jqx.orange.css

200 OK

localhost:1504

2.0 KB

[::1]:1504

17ms
GET jquery-2.1.3.js

200 OK

localhost:1504

241.6 KB

[::1]:1504

89ms
GET angular.min.js

200 OK

localhost:1504

123.0 KB

[::1]:1504

50ms
GET angular-ui-router.min.js

200 OK

localhost:1504

29.2 KB

[::1]:1504

86ms
GET jqxcore.js

200 OK

localhost:1504

34.2 KB

[::1]:1504

95ms
GET jqxangular.js

200 OK

localhost:1504

27.2 KB

[::1]:1504

116ms
GET jqxdata.js

200 OK

localhost:1504

86.0 KB

[::1]:1504

147ms
GET jqxinput.js

200 OK

localhost:1504

14.4 KB

[::1]:1504

154ms
GET jqxbuttons.js

200 OK

localhost:1504

12.4 KB

[::1]:1504

102ms
GET jqxscrollbar.js

200 OK

localhost:1504

28.8 KB

[::1]:1504

133ms
GET jqxmenu.js

200 OK

localhost:1504

49.1 KB

[::1]:1504

149ms
GET jqxlistbox.js

200 OK

localhost:1504

73.5 KB

[::1]:1504

224ms
GET jqxdropdownlist.js

200 OK

localhost:1504

36.7 KB

[::1]:1504

224ms
GET jqxgrid.js

200 OK

localhost:1504

230.4 KB

[::1]:1504

245ms
GET jqxgrid.selection.js

200 OK

localhost:1504

29.9 KB

[::1]:1504

243ms
GET jqxgrid.columnsresize.js

200 OK

localhost:1504

11.9 KB

[::1]:1504

149ms
GET jqxgrid.filter.js

200 OK

localhost:1504

40.7 KB

[::1]:1504

150ms
GET jqxgrid.sort.js

200 OK

localhost:1504

5.3 KB

[::1]:1504

220ms
GET jqxgrid.pager.js

200 OK

localhost:1504

21.1 KB

[::1]:1504

219ms
GET jqxgrid.grouping.js

200 OK

localhost:1504

30.8 KB

[::1]:1504

240ms
GET jqxcheckbox.js

200 OK

localhost:1504

11.9 KB

[::1]:1504

253ms
GET app.js

200 OK

localhost:1504

1.7 KB

[::1]:1504

252ms
POST GetRoutes

200 OK

localhost:1504

98 B

[::1]:1504

2ms
GET icon-down.png

200 OK

localhost:1504

142 B

[::1]:1504

2ms

27 requests

April 30, 2015 at 9:30 am grid does not work with ui router! #70491

Peter Stoev
Keymaster

Hi n1ma,

I don’t know why you’re copying the information from the network tab. It would be better if you provide Full Example which someone from the Forum can look at or send a complete sample to support@jqwidgets.com if you’re licensed customer.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 1, 2015 at 3:49 am grid does not work with ui router! #70510

n1ma
Blocked

Because I’m sure that is a bug, so I copied from net tab as a proof that no reference was missed and also that is a working example that everyone can test it. one of my friends tested it too, same behavior.

May 14, 2015 at 1:16 am grid does not work with ui router! #71088

tommut
Participant

I hit the same issue. It seems like this is a change in behavior in version 3.8 where jqxGrid / jqxangular does not work as expected inside of a ui-view.
Try the previous version 3.7; that still works for me.

May 14, 2015 at 5:28 am grid does not work with ui router! #71089

Peter Stoev
Keymaster

Hi tommut,

If we reproduce the reported behavior, we will look into it in the future.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 16, 2015 at 11:43 pm grid does not work with ui router! #73837
markncs
Participant
I was seeing an issue when I upgraded from jqWidgets 3.7.x to 3.8.x.

Some widgets were failing to initialize. (jqxGrid,jqxDropDownList, etc…)
The javascript console was showing the following exception:

angular.min.js:102 TypeError: J.controller is not a function
at a (jqxangular.js:7)
at m (jqxangular.js:7)
at n (jqxangular.js:7)
at X (jqxangular.js:7)
at Y (jqxangular.js:7)
at jqxangular.js:7
at angular.min.js:114
at l.$eval (angular.min.js:125)
at l.$digest (angular.min.js:122)
at l.$apply (angular.min.js:126)

See the following fiddle to demonstrate: https://jsfiddle.net/3xz1bjqj/8/

What I determined was that the order in which you load the javascript libraries makes a difference when using jqWidgets 3.8.x

The issue occurs when you load jquery after the angular.js libraries like this:
```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/public/jqwidgets/jqxangular.js"></script>
```
If you load jquery FIRST like below, the exception disappears:
```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/public/jqwidgets/jqxangular.js"></script>
```
The order does not seem to matter (ie. loading jquery after angular) when using jqWidgets 3.7.x
July 22, 2015 at 5:56 pm grid does not work with ui router! #74066

Peter Stoev
Keymaster

Hi markncs,

– jqx-all.js includes jqxangular.js so it’s not necessary to load it twice. If controller is not a function is the exception, then this means that AngularJS is not loaded.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.