jQuery UI Widgets › Forums › Getting Started › jqx-grid not working with AngularJS
This topic contains 4 replies, has 3 voices, and was last updated by sudeep 8 years, 10 months ago.
-
Author
-
Hi,
I downloaded the latest version of jqxwidget (v 3.9.1) and tried a basic sample to load jqx-grid, but unable to do so. Can you please check the issue?
I get below error
Error: Missing required JavaScript references for: jqxGrid
at n (jqxangular.js:7)<!DOCTYPE> <html ng-app="demoApp"> <head> <title>Button directive from attribute for AngularJS</title> <link rel="stylesheet" type="text/css" href="scripts/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="scripts/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="scripts/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="scripts/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) { $scope.people = [{ id: 1, name: "Pedro", age: 13 }, { id: 2, name: "Clara", age: 22 }, { id: 3, name: "John", age: 33 }, { id: 4, name: "Pier", age: 27 }]; $scope.settings = { altrows: true, width: 500, height: 300, source: $scope.people, columns: [ { text: 'Id', dataField: 'id', width: 150 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Age', dataField: 'age', width: 150 } ] } }); </script> </head> <body> <div ng-controller="demoController"> <jqx-grid jqx-settings="settings"></jqx-grid> </div> </body> </html>
Hi sriharshag7,
The thrown error says it – you’re missing Javascript references to jqxGrid. See the Grid’s demos, please in order to learn how to use it with AngularJS
Example #1: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/grid.htm?arctic
Example #2: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/grid-with-jqx-settings.htm?arcticBest Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comwhat is jqx-setting and jqx-create and jqx-watch
Hi sudeep,
It is explained here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm?search=. You may also look at the AngularJS demos on our website to learn how to use them.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comthank you…………peter
-
AuthorPosts
You must be logged in to reply to this topic.