I am getting TypeError: $(...).jqxGrid is not a function

Question

I am trying to create jqxGrid(JQWdidgets) using angularjs directive. I am trying to access grid id which has been mentioned in directive and hence trying to use function jqxGrid() to set some grid properties in the controller. But I am getting following error

TypeError: $(...).jqxGrid is not a function 

I have a set up of the project in git and the project has gulp file. I have added gulp task to load dependencies for jqwidgets.

gulp.task('vendorScripts', function() {
    return gulp.src([
            'bower_components/**/dist/jquery.js',
            'bower_components/**/assets/javascripts/bootstrap.js',
            'bower_components/**/angular.js',
            'bower_components/**/angular-route.js',
            'bower_components/**/highcharts.js',
            'bower_components/**/modules/exporting.js',
            'bower_components/**/release/angular-ui-router.min.js',
            'bower_components/**/ui-bootstrap-tpls.js',
            'bower_components/**/dist/jquery.min.js',
            'bower_components/**/jqwidgets/jqxcore.js',
            'bower_components/**/jqwidgets/jqxdata.js',
            'bower_components/**/jqwidgets/jqxbuttons.js',
            'bower_components/**/jqwidgets/jqxscrollbar.js',
            'bower_components/**/jqwidgets/jqxmenu.js',
            'bower_components/**/jqwidgets/jqxcheckbox.js',
            'bower_components/**/jqwidgets/jqxlistbox.js',
            'bower_components/**/jqwidgets/jqxdropdownlist.js',
            'bower_components/**/jqwidgets/jqxgrid.js',
            'bower_components/**/jqwidgets/jqxgrid.sort.js',
            'bower_components/**/jqwidgets/jqxgrid.pager.js',
            'bower_components/**/jqwidgets/jqxgrid.selection.js',
            'bower_components/**/jqwidgets/jqxgrid.edit.js',
            'bower_components/**/jqwidgets/jqxangular.js'
        ])
        .pipe(plumber())
        .pipe(concat('vendor.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});



gulp.start('vendorScripts');

And this is how I used directive:

<jqx-grid id="cs-grid" jqx-settings="$root.settings" jqx-source="$root.gridData"></jqx-grid> 

My controller implementation:

$scope.PageSize = 3;
            $rootScope.settings = {
                theme: 'bootstrap',
                width: '100%',
                height: '100%',
                selectionmode: 'none',
                sortable: true,
                pageable: true,
                pagermode: 'simple',
                pagerheight: 0,
                pagesizeoptions: [3, 5, 10],
                pagesize: $scope.PageSize,
                columns: $rootScope.columns,
                pagerrenderer: function() {
                    return '';
                },
                bindingcomplete: function() {
                    $scope.pagingInfo = $("#cs-grid").jqxGrid('getpaginginformation');
                    $scope.PageNum = 0; 
                }
            };

I had suspected that, jqxWidget dependencies are not loaded properly. But when I went though vendor.js which is generated by gulp, I found relevant methods(jqxGrid etc) were available.

I am struggling to resolve this error. Please Help me,

Thanks in advance

Answer 1

Try reordering the include files, especially "jqwidgets file tags". When I got similar problem, I reordered in such a way that I took datepicker files to the top of the tag-stack. Then, it worked well. Of course, in your case, datepicker is not an issue. Still, reordering may help.