Grid many TypeError with angularjs

[mohanaraoParticipant]

Hi,

I am getting many following errors when I tried to integrate the grid with angularjs version 1.6.1 and inside a component. Grid is also not rendered

TypeError: Cannot read property ‘split’ of undefined
at d (http://localhost:9001/bower_components/jqwidgets/jqxangular.js:6:21371)
at Object.post (http://localhost:9001/bower_components/jqwidgets/jqxangular.js:6:26542)
at http://localhost:9001/bower_components/angular/angular.js:1291:18
at invokeLinkFn (http://localhost:9001/bower_components/angular/angular.js:10252:9)
at nodeLinkFn (http://localhost:9001/bower_components/angular/angular.js:9641:11)
at compositeLinkFn (http://localhost:9001/bower_components/angular/angular.js:8881:13)
at publicLinkFn (http://localhost:9001/bower_components/angular/angular.js:8746:30)
at d (http://localhost:9001/bower_components/jqwidgets/jqxangular.js:6:21283)
at Object.post (http://localhost:9001/bower_components/jqwidgets/jqxangular.js:6:26542)
at http://localhost:9001/bower_components/angular/angular.js:1291:18 <div id=”jqxWidget1770f07e” role=”grid” align=”left” class=”jqx-grid jqx-reset jqx-rc-all jqx-widget jqx-widget-content jqx-disableselect jqx-element-container ng-scope” style=”width: 1138px; height: 400px;” data-jqx-ng-include=”true”>
(anonymous) @ angular.js:14328

[mohanaraoParticipant]

Hi,

It is failing in the addDirective any help

function addDirective(name) {
        var properties = {};
        var linkFunction = function (scope, element, attrs, controllers, transclude) {
            if ($(element).attr('data-jqx-ng-include')) {
                $(element).removeAttr('
				');
                var children = $(element.children()).detach();
                element = addTemplate(element, true, attrs, name);
                element.append(children);
                $compile(element)(scope);
                var toParentScope = true;
                for (var obj in attrs) {
                    if (obj.toString().indexOf('jqx') == -1) {
                        continue;
                    }

                    if (scope[attrs[obj]] != undefined) {
                        toParentScope = false;
                    }
                   <ul>
 if (attrs[obj].split(".").length > 1) {</ul>

                        var subProperties = attrs[obj].split(".");
                        for (var i = 0; i < subProperties.length; i++) {
                            if (scope[subProperties[i]] != undefined) {
                                toParentScope = false;
                            }
                        }
                    }
                }
                if (toParentScope && attrs.jqxSettings) {
                    if (!$parse(attrs.jqxSettings)(scope)) {
                        toParentScope = false;
                    }
                }

                if (toParentScope) {
                    scope = scope.$parent;
                }
            }

[mohanaraoParticipant]

Below is the plunker Example I created with the problem

See the console of the output of the plunker

Plunker Example of jqwidgets with angular ui router

Problematic code in jqxangular.js is below where it adds attribute data-jqx-ng-include and then later again in linkfunction it calls the addTemplate function

function addTemplate(element, replace, attrs, name) {
        var nodeName = element[0].nodeName.toLowerCase();
        var parent = $(element).parent();
        var contents = $(element).html();
        var ngInclude = parent && parent[0] && parent[0].nodeName.toLowerCase() == "ng-include" ? true : false;
        if ($(element).parents("[ui-view]").length > 0)
            ngInclude = true;

        if (ngInclude && !replace) {
            $(element).attr('data-jqx-ng-include', true);
            return;
        }

`

[DimitarParticipant]

Hello mohanarao,

Please refer to our existing example with AngularJS UI-Router: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/angular-dropdownlist/dropdownlist-angular-ui-router.htm?light#/route1. We hope it helps you configure your own project.

Best Regards,
Dimitar

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

[mohanaraoParticipant]

Thanks, Dimitar.

Seems with angularjs we can’t use jqx-all.js. It’s better to import individual js files.

After importing individual files the problem got resolved

[DimitarParticipant]

Hello mohanarao,

Generally, using jqx-all.js should cause no issues. Here is a working jQWidgets example in an AngularJS environment that works as expected: https://www.jseditor.io/?key=angularjs-cascading-comboboxes. Please note that you do not have to include the jqxangular.js plug-in file separately, because it is included as part of jqx-all.js.

Best Regards,
Dimitar

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

[Author]

Posts