CODEWITHSUNDEEP
angularjsgruntjsng-gridangular-ui-grid
Sanath
Sanath

Reputation: 4886

Error 'uiGrid' must have exactly one root element. ui-grid/ui-grid when UI-Grid is initiated

While trying to add ui-grid to an angular project, I came across this issue.

I’ve bootstrapped the angel;ar application with ui-grid dependency injected.

    var app = angular.module(‘myApp’,
    
    ['ui.bootstrap',
    
     'services',
    
     'filters',
        
     'directives',
        
     'controllers',
        
     'ui.grid'
    
    ]);

The controller looks like this.

   angular.module('controllers').controller('UIGridCtrl',function      UIGridCtrl($scope) {
 
  $scope.init = function(){
        
      $scope.myData = [
            
        {"firstName": "Cox",
          "lastName": "Carney",
          "company": "Enormo",

          "employed": true
            
         }
];
    
       };
   
});

The view is

    <div ng-controller="UIGridCtrl">
         <div id="grid1" ui-grid="{data: myData}" class="grid"></div>  
    </div>

since grunt was used, I’ve added the ui-grid dependencies in my index template as well.

<!-- include: "type": "css", "files": "javascripts/library/uiGrid/ui-grid-stable.css" -->
<!-- include: "type": "js", "files": "javascripts/library/uiGrid/ui-grid-stable.js"  -->

When I try to access my view, I get this error.

Error: [$compile:tplrt] Template for directive 'uiGrid' must have exactly one root element. ui-grid/ui-grid.

Apart fro that, there is a network call to this url.

http://localhost:PORT/ui-grid/ui-grid which is an invalid url. Not sure what is the issue. Any suggestions?

Upvotes: 1

Views: 667

Answers (2)

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6887

If you are using http interceptor, omit the urls with ui-grid which clears this error.

Below is my final working code

(function() {
    angular.module('myapp').config(myHttpProvider);
})();



function appHttpInterceptor($q, $injector) {
    return {
        // optional method
        'request': function(config) {
            // do something on success
             if ((config.url.indexOf('tpl.html') === -1) && 
             (config.url.indexOf('tabler-icons') === -1) && (config.url.indexOf('ui-grid/') === -1)) {
                config.url = window.APP.api + config.url;
            }
            return config;
        },

        // optional method
        'requestError': function(rejection) {
            // do something on error
            return $q.reject(rejection);
        },

        // optional method
        'response': function(response) {
            // do something on success
            if (response.config.url.indexOf('ui-grid/') !== -1) {
                return response;
            }
            if (response.config.url.indexOf('tpl.html') !== -1) {
                return response;
            }
            if (response.config.url.indexOf('tpl.html') !== -1) {
                return response;
            }
            if (response.config.url.indexOf('tabler-icons') !== -1) {
                return response;
            }
            const data = response.data;
            
            if(data.message){
                const toastService = $injector.get('ToastService');
                toastService.success(data.message);
            }
            if (data.redirect) {
                window.location.href = data.redirect;
            }
            return data;
        },

        // optional method
        'responseError': function(rejection) {
            // do something on error
            let data = rejection.data;
            let errors = [data.message];
            if (data.errors) {
                const errorValues = Object.values(data.errors);
                if (errorValues.length) {
                    errors = [];
                    _.forEach(errorValues, function(error) {
                        errors = errors.concat(error)
                    });
                }
            }
    const toastService = $injector.get('ToastService');
            toastService.error(errors[0]);
            return $q.reject(errors);
        }
    };
}

function myHttpProvider($httpProvider) {
    $httpProvider.interceptors.push(appHttpInterceptor);
}

myHttpProvider.$inject = ['$httpProvider'];
appHttpInterceptor.$inject = ['$q', '$injector'];

config.url.indexOf('ui-grid/') !== -1 is the key.

Upvotes: 1

Sanath
Sanath

Reputation: 4886

My issue was related to an odd http interception. When ui-grid was added, it was triggering a get request to http://localhost:xxxx/ng-grid/ng-grid, which was breaking the grid and throwing the error. ('uiGrid' must have exactly one root element. ui-grid/ui-grid) Added an intercepter rule to ignore that url format and then the grids started rendering fine.

Upvotes: 2

Related Questions